@c15t/react 3.0.0-alpha.2 → 3.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +6 -1
- package/dist/aggregate-components.js +1 -1
- package/dist/chunk-warming.js +1 -1
- package/dist/component-hooks/use-headless-iab-consent-ui.js +1 -1
- package/dist/component-hooks/use-panel-trigger.js +1 -1
- package/dist/components/consent-gate/consent-gate.js +1 -1
- package/dist/components/consent-preferences-link/consent-preferences-link.js +1 -1
- package/dist/components/iab-panel/atoms/purpose-item.js +1 -1
- package/dist/components/iab-panel/atoms/stack-item.js +1 -1
- package/dist/components/iab-panel/iab-panel.js +1 -1
- package/dist/components/iab-panel/index.js +1 -1
- package/dist/components/panel/atoms/overlay.js +1 -1
- package/dist/components/panel/atoms/root.js +1 -1
- package/dist/components/panel/index.js +1 -1
- package/dist/components/panel/panel.js +1 -1
- package/dist/components/panel-trigger/atoms/button.js +1 -1
- package/dist/components/panel-trigger/atoms/icon.js +1 -1
- package/dist/components/panel-trigger/atoms/root.js +1 -1
- package/dist/components/panel-trigger/atoms/trigger-icons.js +1 -0
- package/dist/components/panel-trigger/panel-trigger-toolbar.js +1 -1
- package/dist/components/preferences/atoms/accordion.js +1 -1
- package/dist/components/preferences/atoms/root.js +1 -1
- package/dist/components/preferences/atoms/vendor-list.js +1 -1
- package/dist/components/preferences/index.js +1 -1
- package/dist/components/prompt/policy-actions.js +1 -1
- package/dist/components/shared/primitives/button.js +1 -1
- package/dist/components/shared/ui/accordion/accordion.js +1 -1
- package/dist/components/shared/ui/collapsible/collapsible.js +1 -1
- package/dist/components/shared/ui/logo.js +1 -1
- package/dist/components/shared/ui/preference-item/preference-item.js +1 -1
- package/dist/components/shared/ui/switch/switch.js +1 -1
- package/dist/components/shared/ui/tabs/tabs.js +1 -1
- package/dist/consent-theme.js +1 -0
- package/dist/draft.js +1 -1
- package/dist/external-iab-context.js +1 -1
- package/dist/headless.js +1 -1
- package/dist/hooks/use-committed-ref.js +2 -0
- package/dist/hooks.js +1 -1
- package/dist/iab/styles.tw3.css +1 -41
- package/dist/iab-context.js +1 -1
- package/dist/index.js +1 -1
- package/dist/kernel-selector.js +1 -0
- package/dist/module-hooks/iframe-blocker.js +1 -1
- package/dist/module-hooks/network-blocker.js +1 -1
- package/dist/module-hooks/network-hold.js +2 -0
- package/dist/module-hooks/persistence.js +1 -1
- package/dist/panel.js +1 -1
- package/dist/preferences.js +1 -2
- package/dist/provider.js +1 -1
- package/dist/styles.tw3.css +0 -45
- package/dist/ui-save.js +1 -1
- package/dist/utils/deferred-module.js +1 -1
- package/dist/version.js +1 -1
- package/dist-types/chunk-warming.d.ts +41 -8
- package/dist-types/component-hooks/use-headless-iab-consent-ui.d.ts +1 -1
- package/dist-types/components/iab-panel/atoms/purpose-item.d.ts +4 -1
- package/dist-types/components/iab-panel/atoms/stack-item.d.ts +6 -1
- package/dist-types/components/iab-panel/index.d.ts +1 -0
- package/dist-types/components/panel/index.d.ts +1 -0
- package/dist-types/components/panel/panel.d.ts +1 -1
- package/dist-types/components/panel-trigger/atoms/trigger-icons.d.ts +20 -0
- package/dist-types/components/preferences/index.d.ts +1 -0
- package/dist-types/components/shared/ui/accordion/accordion.d.ts +1 -0
- package/dist-types/components/shared/ui/collapsible/collapsible.d.ts +1 -0
- package/dist-types/components/shared/ui/logo.d.ts +0 -10
- package/dist-types/components/shared/ui/preference-item/preference-item.d.ts +14 -0
- package/dist-types/components/shared/ui/switch/switch.d.ts +1 -0
- package/dist-types/components/shared/ui/tabs/tabs.d.ts +1 -0
- package/dist-types/consent-theme.d.ts +38 -0
- package/dist-types/draft.d.ts +43 -6
- package/dist-types/headless.d.ts +0 -1
- package/dist-types/hooks/use-committed-ref.d.ts +24 -0
- package/dist-types/hooks.d.ts +2 -0
- package/dist-types/index.d.ts +3 -2
- package/dist-types/kernel-selector.d.ts +66 -0
- package/dist-types/module-hooks/iframe-blocker.d.ts +27 -0
- package/dist-types/module-hooks/network-blocker.d.ts +23 -0
- package/dist-types/module-hooks/network-hold.d.ts +47 -0
- package/dist-types/panel.d.ts +13 -1
- package/dist-types/preferences.d.ts +12 -1
- package/dist-types/provider.d.ts +41 -8
- package/dist-types/ui-config-context.d.ts +2 -0
- package/dist-types/ui-save.d.ts +21 -1
- package/dist-types/utils/deferred-module.d.ts +3 -1
- package/dist-types/version.d.ts +1 -1
- package/docs/README.md +6 -1
- package/docs/customization/overview.md +4 -3
- package/docs/customization/recipes.md +4 -2
- package/docs/customization/tokens.md +66 -3
- package/docs/frameworks/react/components/consent-dialog.md +45 -6
- package/docs/frameworks/react/components/consent-gate.md +8 -4
- package/docs/frameworks/react/components/consent-manager-provider.md +34 -14
- package/docs/frameworks/react/components/consent-widget.md +9 -0
- package/docs/frameworks/react/concepts/consent-categories.md +8 -1
- package/docs/frameworks/react/hooks/{use-consent-manager/overview.md → overview.md} +7 -5
- package/docs/frameworks/react/iab/overview.md +121 -1
- package/docs/frameworks/react/network-blocker.md +146 -0
- package/docs/frameworks/react/script-loader.md +6 -0
- package/docs/frameworks/react/styling/overview.md +71 -22
- package/docs/guides/consent-state.md +327 -0
- package/docs/guides/shared-consent-controls.md +158 -0
- package/docs/integrations/adobe-analytics.md +1 -1
- package/docs/integrations/ahrefs-analytics.md +1 -1
- package/docs/integrations/amplitude.md +1 -1
- package/docs/integrations/clearbit.md +1 -1
- package/docs/integrations/cloudflare-web-analytics.md +1 -1
- package/docs/integrations/cloudflare-zaraz.md +1 -1
- package/docs/integrations/crisp.md +1 -1
- package/docs/integrations/databuddy.md +1 -1
- package/docs/integrations/fathom-analytics.md +1 -1
- package/docs/integrations/front-chat.md +322 -0
- package/docs/integrations/google-maps.md +1 -1
- package/docs/integrations/google-tag-manager.md +1 -1
- package/docs/integrations/google-tag.md +1 -1
- package/docs/integrations/granular-consent.md +3 -1
- package/docs/integrations/heap.md +1 -1
- package/docs/integrations/hightouch.md +1 -1
- package/docs/integrations/hotjar.md +1 -1
- package/docs/integrations/intercom.md +1 -1
- package/docs/integrations/linkedin-insights.md +1 -1
- package/docs/integrations/logrocket.md +1 -1
- package/docs/integrations/matomo-analytics.md +1 -1
- package/docs/integrations/meta-pixel.md +1 -1
- package/docs/integrations/microsoft-clarity.md +1 -1
- package/docs/integrations/microsoft-uet.md +1 -1
- package/docs/integrations/mixpanel-analytics.md +1 -1
- package/docs/integrations/one-dollar-stats.md +305 -0
- package/docs/integrations/openai-pixel.md +1 -1
- package/docs/integrations/overview.md +17 -14
- package/docs/integrations/pinterest-tag.md +321 -0
- package/docs/integrations/pirsch.md +1 -1
- package/docs/integrations/plausible-analytics.md +1 -1
- package/docs/integrations/posthog.md +1 -1
- package/docs/integrations/promptwatch.md +1 -1
- package/docs/integrations/reddit-pixel.md +1 -1
- package/docs/integrations/rudderstack.md +1 -1
- package/docs/integrations/rybbit-analytics.md +1 -1
- package/docs/integrations/segment.md +1 -1
- package/docs/integrations/snapchat-pixel.md +1 -1
- package/docs/integrations/tiktok-pixel.md +1 -1
- package/docs/integrations/umami-analytics.md +1 -1
- package/docs/integrations/vercel-analytics.md +1 -1
- package/docs/integrations/x-pixel.md +1 -1
- package/docs/integrations/youtube.md +1 -1
- package/docs/upgrade-v3.md +129 -1
- package/package.json +7 -7
- package/dist/component-hooks/use-manager.js +0 -2
- package/dist-types/component-hooks/use-manager.d.ts +0 -45
package/dist-types/draft.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { AllConsentNames, ConsentState, SaveResult, SaveInput } from '@c15t/core';
|
|
1
|
+
import type { AllConsentNames, ConsentKernel, ConsentState, SaveResult, SaveInput } from '@c15t/core';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
3
|
/** A local, unmasked selection, committed only by an explicit save. */
|
|
4
4
|
export interface ConsentDraftHandle {
|
|
@@ -27,6 +27,28 @@ export interface ConsentDraftHandle {
|
|
|
27
27
|
save: () => Promise<SaveResult>;
|
|
28
28
|
reset: () => void;
|
|
29
29
|
}
|
|
30
|
+
interface DraftSnapshot {
|
|
31
|
+
values: ConsentState;
|
|
32
|
+
displayedCategories: readonly AllConsentNames[];
|
|
33
|
+
vendors: Record<string, boolean>;
|
|
34
|
+
isDirty: boolean;
|
|
35
|
+
isStale: boolean;
|
|
36
|
+
}
|
|
37
|
+
declare const createDraftStore: (kernel: ConsentKernel, defaults?: Partial<ConsentState>) => {
|
|
38
|
+
acceptAll(): void;
|
|
39
|
+
connect(): import("@c15t/core").Unsubscribe;
|
|
40
|
+
getSnapshot: () => DraftSnapshot;
|
|
41
|
+
/** The kernel this draft reads from and saves into. */
|
|
42
|
+
kernel: ConsentKernel;
|
|
43
|
+
rejectAll(): void;
|
|
44
|
+
reset: () => void;
|
|
45
|
+
save(input?: SaveInput, categories?: readonly AllConsentNames[], onSuccess?: () => void): Promise<SaveResult>;
|
|
46
|
+
set(category: AllConsentNames, value: boolean): void;
|
|
47
|
+
setVendor(vendorId: string, granted: boolean): void;
|
|
48
|
+
subscribe(listener: () => void): () => void;
|
|
49
|
+
update: (patch: Partial<ConsentState>) => void;
|
|
50
|
+
};
|
|
51
|
+
type DraftStore = ReturnType<typeof createDraftStore>;
|
|
30
52
|
export interface ConsentDraftProviderProps {
|
|
31
53
|
children: ReactNode;
|
|
32
54
|
/** Defaults apply only to categories without an explicit receipt. */
|
|
@@ -35,11 +57,25 @@ export interface ConsentDraftProviderProps {
|
|
|
35
57
|
export declare const ConsentDraftProvider: ({ children, initial, }: ConsentDraftProviderProps) => import("react").JSX.Element;
|
|
36
58
|
/** Internal UI save path shared by stock controls and headless actions. */
|
|
37
59
|
export declare const useConsentSaveAction: () => (input?: SaveInput) => Promise<SaveResult>;
|
|
38
|
-
/**
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
60
|
+
/**
|
|
61
|
+
* The nearest consent draft store, for the stock preference rows. Pair with
|
|
62
|
+
* {@link useConsentDraftSlice} so a row re-renders only when its own slice
|
|
63
|
+
* changes, not on every staged edit elsewhere in the draft.
|
|
64
|
+
*
|
|
65
|
+
* @returns The shared draft store, or a local one outside a provider.
|
|
66
|
+
* @internal
|
|
67
|
+
*/
|
|
68
|
+
export declare const useConsentDraftStore: () => DraftStore;
|
|
69
|
+
/**
|
|
70
|
+
* Subscribes to one slice of a consent draft store.
|
|
71
|
+
*
|
|
72
|
+
* @param store - Store from {@link useConsentDraftStore}.
|
|
73
|
+
* @param selector - Picks the slice. Return a primitive or a reference the
|
|
74
|
+
* draft already holds.
|
|
75
|
+
* @returns The selected slice.
|
|
76
|
+
* @internal
|
|
77
|
+
*/
|
|
78
|
+
export declare const useConsentDraftSlice: <SliceType>(store: DraftStore, selector: (draft: DraftSnapshot) => SliceType) => SliceType;
|
|
43
79
|
/** Read and edit displayed choices without replacing masked effective permissions. */
|
|
44
80
|
export declare const useConsentDraft: () => ConsentDraftHandle;
|
|
45
81
|
/** The vendor slice of the consent draft, for a custom vendor control. */
|
|
@@ -81,3 +117,4 @@ export interface VendorDraftHandle {
|
|
|
81
117
|
* @public
|
|
82
118
|
*/
|
|
83
119
|
export declare const useVendorDraft: () => VendorDraftHandle;
|
|
120
|
+
export {};
|
package/dist-types/headless.d.ts
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
*/
|
|
7
7
|
export { defaultTranslationConfig, detectBrowserLanguage, mergeTranslationConfigs, prepareTranslationConfig, } from '@c15t/core';
|
|
8
8
|
export { type ConsentDialogTriggerVisibility, type UseConsentDialogTriggerOptions, type UseConsentDialogTriggerResult, useConsentDialogTrigger, } from './component-hooks/use-panel-trigger.js';
|
|
9
|
-
export { useConsentManager } from './component-hooks/use-manager.js';
|
|
10
9
|
export { type HeadlessConsentBannerAction, type HeadlessConsentBannerState, type HeadlessConsentDialogAction, type HeadlessConsentDialogState, type HeadlessConsentSurface, type HeadlessConsentSurfaceAction, type HeadlessConsentSurfaceState, type HeadlessConsentWriteAction, useHeadlessConsentUI, } from './component-hooks/use-headless-consent-ui.js';
|
|
11
10
|
export { useTranslations } from './component-hooks/use-translations.js';
|
|
12
11
|
export { useColorScheme } from './hooks/use-color-scheme.js';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A ref that holds `value` from the render React most recently committed.
|
|
3
|
+
*
|
|
4
|
+
* Consent guards use it to answer "is this still the kernel, draft or IAB
|
|
5
|
+
* selection this component renders?" when a kept callback runs, including
|
|
6
|
+
* from a descendant's layout effect in the very commit that switched
|
|
7
|
+
* runtimes.
|
|
8
|
+
*
|
|
9
|
+
* Why an insertion effect: React runs insertion effects while it applies a
|
|
10
|
+
* commit, before any layout effect of that commit, and never for a render it
|
|
11
|
+
* discards. Assigning the ref during render would publish values from
|
|
12
|
+
* renders React throws away (an interrupted concurrent render, StrictMode's
|
|
13
|
+
* second render). A layout effect is too late, because descendants' layout
|
|
14
|
+
* effects run before their ancestors'. A passive effect is later still.
|
|
15
|
+
* Assigning the committed value is idempotent, so StrictMode's replayed
|
|
16
|
+
* effects cannot leave a stale value behind.
|
|
17
|
+
*
|
|
18
|
+
* @param value - The value this render uses.
|
|
19
|
+
* @returns A ref whose `current` is the last committed `value`.
|
|
20
|
+
* @internal
|
|
21
|
+
*/
|
|
22
|
+
export declare const useCommittedRef: <Value>(value: Value) => {
|
|
23
|
+
readonly current: Value;
|
|
24
|
+
};
|
package/dist-types/hooks.d.ts
CHANGED
|
@@ -65,6 +65,8 @@ export declare const useHasConsentPolicy: () => boolean;
|
|
|
65
65
|
* {@link useHasConsentPolicy}.
|
|
66
66
|
*/
|
|
67
67
|
export declare const useHasConsentUI: () => boolean;
|
|
68
|
+
/** Whether c15t or an external CMP offers a preferences control. */
|
|
69
|
+
export declare const useHasConsentPreferences: () => boolean;
|
|
68
70
|
/**
|
|
69
71
|
* Derived consent model (opt-in / opt-out / iab), or `null` while no policy
|
|
70
72
|
* rule is resolved. The kernel keeps a safe fallback rule internally; this
|
package/dist-types/index.d.ts
CHANGED
|
@@ -48,13 +48,14 @@ export type { ConsentGateProps, FrameProps } from './components/consent-gate/ind
|
|
|
48
48
|
export { ConsentGate, Frame } from './components/consent-gate/index.js';
|
|
49
49
|
export type { ConsentDraftHandle, ConsentDraftProviderProps, VendorDraftHandle, } from './draft.js';
|
|
50
50
|
export { ConsentDraftProvider, useConsentDraft, useVendorDraft } from './draft.js';
|
|
51
|
-
export { useConsentManager } from './component-hooks/use-manager.js';
|
|
52
51
|
export { useTranslations } from './component-hooks/use-translations.js';
|
|
53
|
-
export { useActiveUI, useBranding, useConsent, useConsents, useHasConsentPolicy, useHasConsentUI, useIABEnabled, useIABSnapshot, useIdentify, useInit, useLocation, useModel, useOverrides, usePromptPresentation, usePolicyCategories, usePreferencesPresentation, usePolicyScopeMode, usePurposeConsent, useSaveConsents, useSetActiveUI, useSetLanguage, useSetOverrides, useSnapshot, useSpecialFeatureOptIn, useTCString, useUser, useDeclaredVendors, useVendorAllowed, useVendorChoice, useVendorConsent, } from './hooks.js';
|
|
52
|
+
export { useActiveUI, useBranding, useConsent, useConsents, useHasConsentPolicy, useHasConsentPreferences, useHasConsentUI, useIABEnabled, useIABSnapshot, useIdentify, useInit, useLocation, useModel, useOverrides, usePromptPresentation, usePolicyCategories, usePreferencesPresentation, usePolicyScopeMode, usePurposeConsent, useRegisterConsentCategories, useSaveConsents, useSetActiveUI, useSetLanguage, useSetOverrides, useSnapshot, useSpecialFeatureOptIn, useSubscribeToConsentChanges, useTCString, useUser, useDeclaredVendors, useVendorAllowed, useVendorChoice, useVendorConsent, } from './hooks.js';
|
|
54
53
|
export type { UseIframeBlockerOptions, UseNetworkBlockerOptions, UsePersistenceOptions, UseScriptLoaderOptions, } from './module-hooks.js';
|
|
55
54
|
export { useIframeBlocker, useNetworkBlocker, usePersistence, useScriptLoader, } from './module-hooks.js';
|
|
56
55
|
export type { ConsentProviderOptions, ConsentProviderCallbacks, ConsentProviderPrefetch, ConsentProviderProps, ExternalRuntimeProviderOptions, ExternalRuntimeProviderProps, OwnedRuntimeProviderProps, } from './provider.js';
|
|
57
56
|
export { ConsentProvider } from './provider.js';
|
|
57
|
+
export { ConsentTheme } from './consent-theme.js';
|
|
58
|
+
export type { ConsentThemeProps } from './consent-theme.js';
|
|
58
59
|
export type { ReactUIOptions } from './types/manager.js';
|
|
59
60
|
export { defineTheme, type Theme } from './types/theme/index.js';
|
|
60
61
|
export { useExplicitChoice, useEffectivePermissions, usePromptRequirement, useNoticeDismissal, usePrivacySignals, useOptOutDirectives, usePolicyResolution, usePolicyRule, useRestrictions, useDismissNotice, } from './hooks.js';
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Kernel access for the hooks and the stock components. The component
|
|
3
|
+
* selectors below each read a single derived value, so a component
|
|
4
|
+
* re-renders only when that value changes. Not exported from any package
|
|
5
|
+
* entry.
|
|
6
|
+
*
|
|
7
|
+
* @packageDocumentation
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
import type { AllConsentNames, ConsentKernel, ConsentSnapshot } from '@c15t/core';
|
|
11
|
+
/**
|
|
12
|
+
* Reads the kernel from the nearest provider.
|
|
13
|
+
*
|
|
14
|
+
* @returns The provider's kernel.
|
|
15
|
+
* @throws {Error} When called outside a `ConsentProvider`.
|
|
16
|
+
* @internal
|
|
17
|
+
*/
|
|
18
|
+
export declare const useKernel: () => ConsentKernel;
|
|
19
|
+
/**
|
|
20
|
+
* Subscribes to one slice of the kernel snapshot. React re-renders the
|
|
21
|
+
* caller only when the selected value `Object.is`-differs, so a selector
|
|
22
|
+
* must return a primitive or a reference the snapshot already holds.
|
|
23
|
+
*
|
|
24
|
+
* @param selector - Picks the slice from a snapshot.
|
|
25
|
+
* @returns The selected slice.
|
|
26
|
+
* @internal
|
|
27
|
+
*/
|
|
28
|
+
export declare const useKernelSelector: <SliceType>(selector: (snap: ConsentSnapshot) => SliceType) => SliceType;
|
|
29
|
+
/**
|
|
30
|
+
* Like `useKernelSelector`, for selectors that evaluate a gate at a point in
|
|
31
|
+
* time. The server render and hydration evaluate at the snapshot's own
|
|
32
|
+
* `evaluatedAt`, so they never read the clock: a Next.js `cacheComponents`
|
|
33
|
+
* prerender rejects `Date.now()` in a Client Component. In the browser the
|
|
34
|
+
* gate is evaluated at `Date.now()`, so an expiry the kernel's deadline
|
|
35
|
+
* timer has not processed yet still denies.
|
|
36
|
+
*
|
|
37
|
+
* @param selector - Picks the slice from a snapshot at the given time.
|
|
38
|
+
* @returns The selected slice.
|
|
39
|
+
* @internal
|
|
40
|
+
*/
|
|
41
|
+
export declare const useGateSelector: <SliceType>(selector: (snap: ConsentSnapshot, now: number) => SliceType) => SliceType;
|
|
42
|
+
/**
|
|
43
|
+
* Whether content gated on one category may render, with the kernel's gate
|
|
44
|
+
* semantics. Server rendering and hydration read no clock; see
|
|
45
|
+
* `useGateSelector`.
|
|
46
|
+
*
|
|
47
|
+
* @param category - Category the content needs.
|
|
48
|
+
* @returns `true` while the category is permitted.
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
export declare const useCategoryAllowed: (category: AllConsentNames) => boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Language of the active translation bundle.
|
|
54
|
+
*
|
|
55
|
+
* @returns The bundle's language, or the default language before one loads.
|
|
56
|
+
* @internal
|
|
57
|
+
*/
|
|
58
|
+
export declare const useTranslationLanguage: () => string;
|
|
59
|
+
/**
|
|
60
|
+
* Categories the preference surface lists: `necessary` plus the recorded
|
|
61
|
+
* choice scope, or the policy scope when no choice scope applies.
|
|
62
|
+
*
|
|
63
|
+
* @returns A list whose identity changes only when the scope does.
|
|
64
|
+
* @internal
|
|
65
|
+
*/
|
|
66
|
+
export declare const useDisplayedCategories: () => readonly AllConsentNames[];
|
|
@@ -1,6 +1,33 @@
|
|
|
1
|
+
import type { ConsentKernel } from '@c15t/core';
|
|
1
2
|
import type { IframeBlockerHandle } from '@c15t/core/modules/iframe-blocker';
|
|
2
3
|
export interface UseIframeBlockerOptions {
|
|
3
4
|
disableAutomaticBlocking?: boolean;
|
|
4
5
|
}
|
|
5
6
|
export declare const useIframeBlocker: (options?: UseIframeBlockerOptions) => IframeBlockerHandle;
|
|
7
|
+
/**
|
|
8
|
+
* Call `onFound` when a gated iframe is on the page: at once when one is
|
|
9
|
+
* there already, and again for each batch of gated frames that arrives.
|
|
10
|
+
*
|
|
11
|
+
* Until the returned stop function runs, a gated frame that arrives with a
|
|
12
|
+
* `src` the snapshot does not clearly allow is paused (`src` moved to
|
|
13
|
+
* `data-src`), as the loaded blocker would pause it. Frames on the page at
|
|
14
|
+
* the first call are left to the blocker, which is what happens when it
|
|
15
|
+
* loads with the provider.
|
|
16
|
+
*
|
|
17
|
+
* @param kernel - The kernel whose snapshot decides what is clearly allowed.
|
|
18
|
+
* @param onFound - Called for every sighting; the caller dedupes.
|
|
19
|
+
* @returns Stops watching.
|
|
20
|
+
* @internal
|
|
21
|
+
*/
|
|
22
|
+
export declare const watchGatedIframes: (kernel: ConsentKernel, onFound: () => void) => () => void;
|
|
23
|
+
/**
|
|
24
|
+
* The provider's default iframe blocker. Loads the blocker module when the
|
|
25
|
+
* first gated iframe (`data-category` or `data-vendor`) is on the page
|
|
26
|
+
* instead of on every mount, so pages without one never download it.
|
|
27
|
+
*
|
|
28
|
+
* @param options - Blocker options. With `disableAutomaticBlocking` the
|
|
29
|
+
* module loads at once, as it did before.
|
|
30
|
+
* @internal
|
|
31
|
+
*/
|
|
32
|
+
export declare const useIframeBlockerOnDemand: (options?: UseIframeBlockerOptions) => void;
|
|
6
33
|
export type { IframeBlockerHandle };
|
|
@@ -5,5 +5,28 @@ export interface UseNetworkBlockerOptions {
|
|
|
5
5
|
logBlockedRequests?: boolean;
|
|
6
6
|
onRequestBlocked?: (info: BlockedRequestInfo) => void;
|
|
7
7
|
}
|
|
8
|
+
/**
|
|
9
|
+
* Block `fetch` and XHR requests that match `rules` until the visitor's
|
|
10
|
+
* consent allows them.
|
|
11
|
+
*
|
|
12
|
+
* Blocking starts during the first render in the browser: matching requests
|
|
13
|
+
* wait from then on, including ones sent from this component's children's
|
|
14
|
+
* mount effects and from effects that run before this component's. The
|
|
15
|
+
* blocker loads after mount and decides each waiting request. On the
|
|
16
|
+
* server the hook does nothing.
|
|
17
|
+
*
|
|
18
|
+
* Rendering has a side effect: the first render patches `fetch` and
|
|
19
|
+
* `XMLHttpRequest` to hold matching requests. If React discards that
|
|
20
|
+
* render and never commits it, the hold ends after 10 seconds. Nothing
|
|
21
|
+
* checked consent for the requests it held, so they fail as blocked: a 451
|
|
22
|
+
* response for `fetch`, a failed XHR.
|
|
23
|
+
*
|
|
24
|
+
* Prefer the provider's `networkBlocker` option. It starts blocking when
|
|
25
|
+
* the provider renders, so it also covers components rendered before this
|
|
26
|
+
* one.
|
|
27
|
+
*
|
|
28
|
+
* @param options - Rules and logging options.
|
|
29
|
+
* @returns A handle to update rules or toggle blocking.
|
|
30
|
+
*/
|
|
8
31
|
export declare const useNetworkBlocker: (options: UseNetworkBlockerOptions) => NetworkBlockerHandle;
|
|
9
32
|
export type { BlockedRequestInfo, NetworkBlockerHandle, NetworkBlockerRule };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { NetworkBlockerRule } from '@c15t/core/modules/network-blocker';
|
|
2
|
+
import type { NetworkHold } from '@c15t/core/modules/network-hold';
|
|
3
|
+
/**
|
|
4
|
+
* How long a hold started during render waits for its component to commit.
|
|
5
|
+
* A render React throws away never commits, so nothing else would end its
|
|
6
|
+
* hold. When this runs out the hold ends, and since nothing checked consent
|
|
7
|
+
* for the requests it held, they get the blocker's answer for a blocked
|
|
8
|
+
* request instead of being sent.
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export declare const UNCOMMITTED_HOLD_MS = 10000;
|
|
12
|
+
/**
|
|
13
|
+
* The render-time hold behind one network blocker mount.
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
16
|
+
export interface EarlyNetworkHold {
|
|
17
|
+
/**
|
|
18
|
+
* Call from the mount effect, before loading the blocker. Keeps the hold
|
|
19
|
+
* from expiring, starts a new one if it already ended (a StrictMode or
|
|
20
|
+
* kernel re-run after the blocker took over, or a commit that came after
|
|
21
|
+
* the expiry), and returns it for `createNetworkBlocker({ hold })`. A
|
|
22
|
+
* disabled blocker gets a hold that holds nothing, so it cannot end
|
|
23
|
+
* another caller's hold.
|
|
24
|
+
*/
|
|
25
|
+
claim: (rules: readonly NetworkBlockerRule[], enabled: boolean | undefined) => NetworkHold;
|
|
26
|
+
/**
|
|
27
|
+
* Call from the mount effect's cleanup. Ends a hold no blocker took
|
|
28
|
+
* over, unless the effect runs again first (StrictMode, a kernel change).
|
|
29
|
+
* Nothing checked consent for what that hold held, so those requests get
|
|
30
|
+
* the blocker's answer for a blocked request instead of being sent.
|
|
31
|
+
*/
|
|
32
|
+
unmount: () => void;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Hold requests matching `rules` from this component's first render in the
|
|
36
|
+
* browser, before any child renders or runs an effect. The network blocker
|
|
37
|
+
* loads after mount and takes the hold over.
|
|
38
|
+
*
|
|
39
|
+
* Rendering is not side-effect free: the first render patches `fetch` and
|
|
40
|
+
* `XMLHttpRequest`. That is safe because the hold only delays matching
|
|
41
|
+
* requests, a render React discards ends its hold after
|
|
42
|
+
* {@link UNCOMMITTED_HOLD_MS} (failing what it held as blocked), and on the
|
|
43
|
+
* server it does nothing.
|
|
44
|
+
*
|
|
45
|
+
* @internal
|
|
46
|
+
*/
|
|
47
|
+
export declare const useEarlyNetworkHold: (rules: readonly NetworkBlockerRule[], enabled: boolean | undefined) => EarlyNetworkHold;
|
package/dist-types/panel.d.ts
CHANGED
|
@@ -1 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* `@c15t/react/consent-dialog`: the deferred `ConsentDialog`, the same
|
|
3
|
+
* component the `@c15t/react` entry exports. Its implementation and styles
|
|
4
|
+
* load when the dialog first opens, or earlier when something preloads it,
|
|
5
|
+
* so importing this entry adds nothing heavy to the first load.
|
|
6
|
+
*
|
|
7
|
+
* The eager dialog and its individual parts (`Card`, `Header`, `Overlay`,
|
|
8
|
+
* ...) are in `@c15t/react/components/consent-dialog`.
|
|
9
|
+
*
|
|
10
|
+
* @packageDocumentation
|
|
11
|
+
*/
|
|
12
|
+
export { ConsentDialog } from './aggregate-components.js';
|
|
13
|
+
export type { ConsentDialogCompoundComponent, ConsentDialogProps, } from './components/panel/index.js';
|
|
@@ -1 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* `@c15t/react/consent-widget`: the deferred `ConsentWidget`, the same
|
|
3
|
+
* component the `@c15t/react` entry exports. Its implementation and styles
|
|
4
|
+
* load when the widget first renders.
|
|
5
|
+
*
|
|
6
|
+
* The eager widget and its individual parts (`Accordion`, `Switch`, `Footer`,
|
|
7
|
+
* ...) are in `@c15t/react/components/consent-widget`.
|
|
8
|
+
*
|
|
9
|
+
* @packageDocumentation
|
|
10
|
+
*/
|
|
11
|
+
export { ConsentWidget } from './aggregate-components.js';
|
|
12
|
+
export type { ConsentWidgetCompoundComponent, ConsentWidgetProps, } from './components/preferences/index.js';
|
package/dist-types/provider.d.ts
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import type { AllConsentNames, ClearOnRevocationConfig, ConsentPresentation, Callbacks, I18nConfig, KernelConfig, KernelOverrides, KernelUser, LegalLinks, ProviderTransportFactory, StorageConfig, User, Vendor } from '@c15t/core';
|
|
2
2
|
import type { Script } from '@c15t/core/modules/script-loader';
|
|
3
|
-
import type { ConsentRuntime } from '@c15t/core/runtime';
|
|
3
|
+
import type { ConsentControlOptions, ConsentRuntime } from '@c15t/core/runtime';
|
|
4
4
|
import type { ReactNode } from 'react';
|
|
5
|
+
import type { DialogPreload } from './chunk-warming.js';
|
|
5
6
|
import type { UseNetworkBlockerOptions, UsePersistenceOptions, UseScriptLoaderOptions } from './module-hooks.js';
|
|
6
7
|
import type { UseIframeBlockerOptions } from './module-hooks/iframe-blocker.js';
|
|
7
8
|
import type { ReactUIOptions } from './types/manager.js';
|
|
8
9
|
import type { ReactComponentSlots } from './types/slots.js';
|
|
9
10
|
/** Events emitted by the mounted provider without snapshot-derived consent aliases. */
|
|
10
|
-
export type ConsentProviderCallbacks = Pick<Callbacks, 'onChoiceRecorded' | 'onPermissionsChanged' | 'onError'>;
|
|
11
|
+
export type ConsentProviderCallbacks = Pick<Callbacks, 'onChoiceRecorded' | 'onPermissionsChanged' | 'onError' | 'onBeforeConsentRevocationReload'>;
|
|
11
12
|
/** Prepared policy and records; legacy consent projections are not provider inputs. */
|
|
12
13
|
export type ConsentProviderPrefetch = Omit<KernelConfig, 'initialDraft' | 'transport'>;
|
|
13
|
-
export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorScheme' | 'disableAnimation' | 'noStyle' | 'scrollLock' | 'theme' | 'trapFocus'> {
|
|
14
|
+
export interface ConsentProviderOptions extends ConsentControlOptions, Pick<ReactUIOptions, 'colorScheme' | 'disableAnimation' | 'noStyle' | 'scrollLock' | 'theme' | 'trapFocus'> {
|
|
14
15
|
enabled?: boolean;
|
|
15
16
|
presentation?: ConsentPresentation;
|
|
16
17
|
/**
|
|
@@ -18,9 +19,10 @@ export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorSchem
|
|
|
18
19
|
*
|
|
19
20
|
* @remarks
|
|
20
21
|
* Set this when your CSP uses a nonce-based policy instead of
|
|
21
|
-
* `'unsafe-inline'`. The provider forwards it to
|
|
22
|
-
*
|
|
23
|
-
*
|
|
22
|
+
* `'unsafe-inline'`. The provider forwards it to every `<script>`
|
|
23
|
+
* element created by the script loader. A per-script `nonce` still takes
|
|
24
|
+
* precedence. Pass the same nonce to `ConsentTheme`, which renders the
|
|
25
|
+
* theme `<style>` element.
|
|
24
26
|
*/
|
|
25
27
|
nonce?: string;
|
|
26
28
|
/**
|
|
@@ -83,6 +85,15 @@ export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorSchem
|
|
|
83
85
|
* Initial-only: remount the provider to replace its cleanup configuration.
|
|
84
86
|
*/
|
|
85
87
|
clearOnRevocation?: ClearOnRevocationConfig;
|
|
88
|
+
/**
|
|
89
|
+
* Reload the page after an accept, reject or save turns off a category or
|
|
90
|
+
* vendor that was granted, or after a `consentSource` withdraws one.
|
|
91
|
+
* Removing a script cannot stop code that already ran, so the reload
|
|
92
|
+
* starts a document with only permitted code. Waits for the save request.
|
|
93
|
+
* Set `false` to handle revocation yourself.
|
|
94
|
+
* @default true
|
|
95
|
+
*/
|
|
96
|
+
reloadOnConsentRevoked?: boolean;
|
|
86
97
|
scripts?: Script[];
|
|
87
98
|
/**
|
|
88
99
|
* Vendors offered for vendor-level consent outside IAB. Each sits inside a
|
|
@@ -94,7 +105,12 @@ export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorSchem
|
|
|
94
105
|
vendors?: Vendor[];
|
|
95
106
|
scriptLoader?: UseScriptLoaderOptions;
|
|
96
107
|
networkBlocker?: UseNetworkBlockerOptions | false;
|
|
97
|
-
/**
|
|
108
|
+
/**
|
|
109
|
+
* Discover and gate DOM iframes with data-category. Enabled by default.
|
|
110
|
+
* The blocker loads when the first gated iframe is on the page; until it
|
|
111
|
+
* runs, a gated iframe that arrives with a `src` consent does not allow
|
|
112
|
+
* is paused.
|
|
113
|
+
*/
|
|
98
114
|
iframeBlocker?: UseIframeBlockerOptions | false;
|
|
99
115
|
persistence?: boolean | UsePersistenceOptions;
|
|
100
116
|
i18n?: Partial<I18nConfig>;
|
|
@@ -103,6 +119,21 @@ export interface ConsentProviderOptions extends Pick<ReactUIOptions, 'colorSchem
|
|
|
103
119
|
/** Per-component slot attribute overrides (shared contract with @c15t/vue). */
|
|
104
120
|
components?: ReactComponentSlots;
|
|
105
121
|
legalLinks?: LegalLinks;
|
|
122
|
+
/**
|
|
123
|
+
* When the deferred `<ConsentDialog />` starts loading before it opens.
|
|
124
|
+
*
|
|
125
|
+
* - `'idle'` (default): after the page's load event, in browser idle time,
|
|
126
|
+
* while the banner is shown or a button that opens the dialog is
|
|
127
|
+
* mounted, and on hover or focus of such a button. Skipped when the
|
|
128
|
+
* visitor has Save-Data on or a 2G-class connection.
|
|
129
|
+
* - `'intent'`: only on hover or focus of a button that opens the dialog.
|
|
130
|
+
*
|
|
131
|
+
* Neither loads the dialog on a visit that shows no banner and has no
|
|
132
|
+
* dialog trigger.
|
|
133
|
+
*
|
|
134
|
+
* @default 'idle'
|
|
135
|
+
*/
|
|
136
|
+
preloadDialog?: DialogPreload;
|
|
106
137
|
/**
|
|
107
138
|
* Adapter package name reported by `window.c15t`.
|
|
108
139
|
* @internal
|
|
@@ -149,7 +180,9 @@ export type ConsentProviderProps = OwnedRuntimeProviderProps | ExternalRuntimePr
|
|
|
149
180
|
* Pass `runtime` to render a runtime someone else created. The provider
|
|
150
181
|
* then borrows its kernel and mounts none of the side-effecting modules —
|
|
151
182
|
* no second `init()`, no second persistence handle, no second `window.c15t`
|
|
152
|
-
* — and does not dispose it on unmount.
|
|
183
|
+
* — and does not dispose it on unmount. Handing it a different runtime
|
|
184
|
+
* switches the tree to that runtime's kernel; switching between a borrowed
|
|
185
|
+
* runtime and a provider-built kernel still needs a remount.
|
|
153
186
|
*
|
|
154
187
|
* @example
|
|
155
188
|
* ```tsx
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import type { LegalLinks, ConsentPresentation } from '@c15t/core';
|
|
2
|
+
import type { DialogPreload } from './chunk-warming.js';
|
|
2
3
|
import type { ReactComponentSlots } from './types/slots.js';
|
|
3
4
|
export interface V3UIConfigValue {
|
|
4
5
|
components?: ReactComponentSlots;
|
|
5
6
|
presentation?: ConsentPresentation;
|
|
6
7
|
legalLinks?: LegalLinks;
|
|
8
|
+
preloadDialog?: DialogPreload;
|
|
7
9
|
}
|
|
8
10
|
export declare const V3UIConfigContext: import("react").Context<V3UIConfigValue>;
|
|
9
11
|
export declare const useUIConfig: () => V3UIConfigValue;
|
package/dist-types/ui-save.d.ts
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
import type { ConsentKernel, SaveResult } from '@c15t/core';
|
|
2
2
|
/** Explicit navigation supersedes a pending UI action, even to the same dialog. */
|
|
3
3
|
export declare const invalidateConsentUIAction: (kernel: ConsentKernel) => void;
|
|
4
|
-
/**
|
|
4
|
+
/**
|
|
5
|
+
* Close the preferences dialog as soon as its choice is recorded locally.
|
|
6
|
+
*
|
|
7
|
+
* The kernel commits the receipt and updates permissions synchronously, so
|
|
8
|
+
* the dialog closes in the task that handled the click. Storage is written
|
|
9
|
+
* one task later, still ahead of the request, and the request runs after:
|
|
10
|
+
* its outcome never reopens the dialog, and a failed request stays queued
|
|
11
|
+
* for replay by the kernel. A save that recorded nothing (an unchanged
|
|
12
|
+
* selection) closes when it resolves successfully, unless explicit
|
|
13
|
+
* navigation or a newer action came first.
|
|
14
|
+
*/
|
|
5
15
|
export declare const saveConsentUI: (kernel: ConsentKernel, save: () => Promise<SaveResult>, canClose: () => boolean) => Promise<SaveResult>;
|
|
16
|
+
/**
|
|
17
|
+
* Close an IAB surface in the task that handled the click.
|
|
18
|
+
*
|
|
19
|
+
* An IAB choice commits once its TC string is encoded, which can wait on the
|
|
20
|
+
* TCF library chunk but never on the backend. The surface closes first and
|
|
21
|
+
* comes back only when that local step recorded nothing (the vendor list
|
|
22
|
+
* failed to load, or the policy changed underneath), so the visitor can try
|
|
23
|
+
* again. A failed backend request never reopens it.
|
|
24
|
+
*/
|
|
25
|
+
export declare const saveIABConsentUI: (kernel: ConsentKernel, save: () => Promise<void> | void) => Promise<void>;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import type { ComponentType } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* Share an on-demand module across exports and
|
|
3
|
+
* Share an on-demand module across exports and preloading. Ready client
|
|
4
4
|
* retries run synchronously; Suspense retains server rendering and hydration.
|
|
5
|
+
* A failed import is cached for rendered exports only, so a failed preload
|
|
6
|
+
* does not stop a later open from retrying.
|
|
5
7
|
*
|
|
6
8
|
* @internal
|
|
7
9
|
*/
|
package/dist-types/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "3.0.0-alpha.
|
|
1
|
+
export declare const version = "3.0.0-alpha.3";
|
package/docs/README.md
CHANGED
|
@@ -32,8 +32,9 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
|
|
|
32
32
|
- [Consent categories](./frameworks/react/concepts/consent-categories.md): Assign optional features to categories and understand how policy scope affects permission.
|
|
33
33
|
- [Policy presets](./frameworks/react/concepts/policy-presets.md): Understand how policy rules affect React prompts, permissions and persistent privacy controls.
|
|
34
34
|
- [Headless](./frameworks/react/headless.md): Build a custom consent banner in React with the c15t/react/headless hooks inside your ConsentProvider.
|
|
35
|
-
- [Hooks](./frameworks/react/hooks/
|
|
35
|
+
- [Hooks](./frameworks/react/hooks/overview.md): Gate features and save consent choices in React components with the focused hooks exported from c15t/react.
|
|
36
36
|
- [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.
|
|
37
|
+
- [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.
|
|
37
38
|
- [Quickstart](./frameworks/react/quickstart.md): Connect a React application to Inth and add consent UI, persistence and a preferences link.
|
|
38
39
|
- [Load scripts with consent](./frameworks/react/script-loader.md): Register vendor scripts once and let effective permissions control loading.
|
|
39
40
|
- [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
|
|
|
44
45
|
- [Understand consent state](./guides/consent-state.md): Distinguish policy resolution, effective permissions, explicit choices, notices and privacy signals.
|
|
45
46
|
- [Data fetching and transports](./guides/data-fetching.md): Choose cached manifests, backend init or offline policy resolution, and understand where consent records are saved.
|
|
46
47
|
- [Choose a deployment mode](./guides/deployment-modes.md): Choose who runs your consent backend, then select manifest, init or offline resolution for your deployment.
|
|
48
|
+
- [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.
|
|
47
49
|
- [Troubleshoot consent](./guides/troubleshooting.md): Diagnose missing banners, early vendor requests, lost choices and hydration differences.
|
|
48
50
|
- [Verify consent before shipping](./guides/verify-consent.md): Test requests, policy resolution, persistence, navigation and preference changes in a production build.
|
|
49
51
|
|
|
@@ -68,6 +70,7 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
|
|
|
68
70
|
- [Crisp](./integrations/crisp.md): Configure Crisp with c15t v3, understand functionality permission and verify loading and revocation.
|
|
69
71
|
- [Databuddy](./integrations/databuddy.md): Configure Databuddy's initial and updated consent state with c15t v3.
|
|
70
72
|
- [Fathom Analytics](./integrations/fathom-analytics.md): Configure Fathom Analytics with c15t v3, understand measurement permission and verify loading and revocation.
|
|
73
|
+
- [Front Chat](./integrations/front-chat.md): Load the Front Chat widget with functionality permission, forward CSP nonces and clear the session on revocation.
|
|
71
74
|
- [Google Maps](./integrations/google-maps.md): Prevent a map iframe from mounting before the required permission.
|
|
72
75
|
- [Google Tag](./integrations/google-tag.md): Configure gtag with c15t Consent Mode signals and understand its loading behavior.
|
|
73
76
|
- [Google Tag Manager](./integrations/google-tag-manager.md): Load GTM with c15t consent signals and verify the tags inside your container.
|
|
@@ -83,8 +86,10 @@ These docs describe v3. Start with Inth hosted setup, identify the framework, ro
|
|
|
83
86
|
- [Microsoft Clarity](./integrations/microsoft-clarity.md): Configure Microsoft Clarity with c15t v3, understand measurement permission and verify loading and revocation.
|
|
84
87
|
- [Microsoft UET](./integrations/microsoft-uet.md): Configure Microsoft UET with c15t v3, understand marketing permission and verify loading and revocation.
|
|
85
88
|
- [Mixpanel](./integrations/mixpanel-analytics.md): Configure Mixpanel with c15t v3, understand measurement permission and verify loading and revocation.
|
|
89
|
+
- [OneDollarStats](./integrations/one-dollar-stats.md): Load the OneDollarStats tracker with measurement permission, forward its settings and verify loading and revocation.
|
|
86
90
|
- [OpenAI Pixel](./integrations/openai-pixel.md): Configure the OpenAI Measurement Pixel for ChatGPT Ads with c15t v3, manage marketing permission and verify conversion delivery.
|
|
87
91
|
- [Overview](./integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, chat and embedded content.
|
|
92
|
+
- [Pinterest Tag](./integrations/pinterest-tag.md): Configure the Pinterest Tag with c15t v3, track typed events and verify marketing permission, revocation and reload.
|
|
88
93
|
- [Pirsch](./integrations/pirsch.md): Configure Pirsch with c15t v3, understand measurement permission and verify loading and revocation.
|
|
89
94
|
- [Plausible Analytics](./integrations/plausible-analytics.md): Configure Plausible Analytics with c15t v3, understand measurement permission and verify loading and revocation.
|
|
90
95
|
- [PostHog](./integrations/posthog.md): Choose PostHog loading and cookieless behavior, configure the region, and synchronize v3 permissions.
|
|
@@ -34,10 +34,11 @@ layout can be restored by the policy renderer.
|
|
|
34
34
|
## Use the adapter's configuration shape
|
|
35
35
|
|
|
36
36
|
React and Next.js accept provider `theme`, `presentation` and `components`
|
|
37
|
-
options. Vue and Nuxt expose their own shared configuration, including CSS
|
|
37
|
+
options, and render theme tokens with `ConsentTheme` on the server. Vue and Nuxt expose their own shared configuration, including CSS
|
|
38
38
|
`tokens` and component slots. Svelte accepts its provider options and theme
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
slots; SvelteKit renders the token CSS from a server `load`. Astro serializes
|
|
40
|
+
integration options, renders the theme tokens on the server and uses the
|
|
41
|
+
selected adapter for dialogs. Do not move a configuration object between frameworks without checking
|
|
41
42
|
the target types.
|
|
42
43
|
|
|
43
44
|
Read [tokens and CSS](./tokens.md),
|
|
@@ -26,8 +26,10 @@ export const brandTheme = defineTheme({
|
|
|
26
26
|
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
Install `@c15t/ui` to use `defineTheme` directly.
|
|
30
|
-
|
|
29
|
+
Install `@c15t/ui` to use `defineTheme` directly. Render
|
|
30
|
+
`<ConsentTheme theme={brandTheme} />` on the server for the tokens, and pass
|
|
31
|
+
`brandTheme` as `theme` in your existing React or Next.js provider options for
|
|
32
|
+
the action styles. Keep your Inth mode and script
|
|
31
33
|
configuration. The theme source above is also imported by the runnable example,
|
|
32
34
|
so the rendered result and the documentation use the same values.
|
|
33
35
|
|