@c15t/react 2.0.0-rc.1 → 2.0.0-rc.10

package/dist-types/iab.d.ts

@@ -0,0 +1,24 @@
+/**
+ * IAB TCF 2.3 React components and hooks.
+ *
+ * This subpath export contains all IAB-specific React UI. It is only
+ * loaded when explicitly imported from '@c15t/react/iab'.
+ *
+ * Requires `@c15t/iab` as a peer dependency.
+ *
+ * @example
+ * ```tsx
+ * import { iab } from '@c15t/iab';
+ * import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';
+ *
+ * <ConsentManagerProvider options={{ mode: 'hosted', iab: iab({ cmpId: 28 }) }}>
+ *   <IABConsentBanner />
+ *   <IABConsentDialog />
+ * </ConsentManagerProvider>
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { IABConsentBanner, type IABConsentBannerProps, } from './components/iab-consent-banner';
+export { IABConsentDialog, type IABConsentDialogProps, } from './components/iab-consent-dialog';
+export { type HeadlessIABBannerAction, type HeadlessIABBannerState, type HeadlessIABDialogAction, type HeadlessIABDialogState, type HeadlessIABPreferenceTab, type UseHeadlessIABConsentUIResult, useHeadlessIABConsentUI, } from './hooks/use-headless-iab-consent-ui';

package/{dist → dist-types}/index.d.ts

@@ -1,21 +1,20 @@
-export type { AllConsentNames, ConsentManagerInterface, ConsentStoreState, ConsentType, Overrides, Translations, } from 'c15t';
-export { configureConsentManager, defaultTranslationConfig, detectBrowserLanguage, mergeTranslationConfigs, prepareTranslationConfig, } from 'c15t';
+export type { AllConsentNames, ConsentManagerInterface, ConsentStoreState, ConsentType, EuropePolicyMode, Overrides, PolicyPackPresets, Translations, } from 'c15t';
+export { configureConsentManager, defaultTranslationConfig, detectBrowserLanguage, mergeTranslationConfigs, policyPackPresets, prepareTranslationConfig, } from 'c15t';
 export { ConsentBanner, type ConsentBannerProps, } from './components/consent-banner';
 export * from './components/consent-banner/components';
 export { ConsentDialog, type ConsentDialogProps, } from './components/consent-dialog';
+export { ConsentDialogLink, type ConsentDialogLinkProps, } from './components/consent-dialog-link';
 export { ConsentDialogTrigger, type ConsentDialogTriggerCompound, type ConsentDialogTriggerProps, TriggerButton, type TriggerButtonProps, TriggerIcon, type TriggerIconProps, type TriggerIconType, TriggerRoot, type TriggerRootProps, type TriggerSize, TriggerText, type TriggerTextProps, type TriggerVisibility, type UseDraggableOptions, type UseDraggableReturn, useDraggable, useTriggerContext, } from './components/consent-dialog-trigger';
 export { ConsentWidget, type ConsentWidgetProps, } from './components/consent-widget';
 export { Frame, type FrameProps } from './components/frame';
-export { IABConsentBanner, type IABConsentBannerProps, } from './components/iab-consent-banner';
-export { IABConsentDialog, type IABConsentDialogProps, } from './components/iab-consent-dialog';
 export { ConsentButton } from './components/shared/primitives/button';
-export { InlineLegalLinks, LegalLinks, type LegalLinksProps, } from './components/shared/primitives/legal-links';
 export { useColorScheme } from './hooks/use-color-scheme';
+export { type ConsentDialogTriggerVisibility, type UseConsentDialogTriggerOptions, type UseConsentDialogTriggerResult, useConsentDialogTrigger, } from './hooks/use-consent-dialog-trigger';
 export { useConsentManager } from './hooks/use-consent-manager';
 export { useFocusTrap } from './hooks/use-focus-trap';
+export { type HeadlessConsentBannerAction, type HeadlessConsentBannerState, type HeadlessConsentDialogAction, type HeadlessConsentDialogState, type HeadlessConsentSurface, type HeadlessConsentSurfaceAction, type HeadlessConsentSurfaceState, type HeadlessConsentWriteAction, type UseHeadlessConsentUIResult, useHeadlessConsentUI, } from './hooks/use-headless-consent-ui';
 export { useSSRStatus } from './hooks/use-ssr-status';
 export { useTranslations } from './hooks/use-translations';
 export { ConsentManagerProvider } from './providers/consent-manager-provider';
 export type { ConsentManagerOptions, ConsentManagerProviderProps, } from './types/consent-manager';
 export type { ColorTokens, ComponentSlots, MotionTokens, RadiusTokens, ShadowTokens, SlotStyle, SpacingTokens, Theme, TypographyTokens, } from './types/theme';
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+export * from '../components/shared/ui/accordion';

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

@@ -0,0 +1 @@
+export * from '../components/shared/ui/button';

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

@@ -0,0 +1 @@
+export * from '../components/shared/ui/collapsible';

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

@@ -0,0 +1 @@
+export * from '../components/shared/ui/dialog';

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

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

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

@@ -0,0 +1 @@
+export * from '../components/shared/ui/switch';

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

@@ -0,0 +1 @@
+export * from '../components/shared/ui/tabs';

package/dist-types/primitives.d.ts

@@ -0,0 +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';

package/{dist → dist-types}/providers/consent-manager-provider.d.ts

@@ -38,4 +38,3 @@ export declare function clearConsentRuntimeCache(): void;
  * @public
  */
 export declare function ConsentManagerProvider({ children, options, }: ConsentManagerProviderProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=consent-manager-provider.d.ts.map

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

@@ -40,4 +40,3 @@ import type { FetchSSRDataOptions } from './types';
  * @public
  */
 export declare function fetchSSRData(options: FetchSSRDataOptions): Promise<SSRInitialData | undefined>;
-//# sourceMappingURL=fetch-ssr-data.d.ts.map

package/{dist → dist-types}/server/headers.d.ts

@@ -1,4 +1,4 @@
-declare const FORWARDED_HEADERS: readonly ["cf-ipcountry", "x-vercel-ip-country", "x-amz-cf-ipcountry", "x-country-code", "x-vercel-ip-country-region", "x-region-code", "accept-language", "user-agent", "x-forwarded-host", "x-forwarded-for", "sec-gpc"];
+declare const FORWARDED_HEADERS: readonly ["cf-ipcountry", "x-vercel-ip-country", "x-amz-cf-ipcountry", "x-country-code", "x-vercel-ip-country-region", "x-region-code", "accept-language", "user-agent", "x-forwarded-host", "x-forwarded-for", "sec-gpc", "purpose", "sec-purpose", "next-router-prefetch", "x-middleware-prefetch"];
 type ForwardedHeader = (typeof FORWARDED_HEADERS)[number] | 'x-c15t-country' | 'x-c15t-region';
 type RelevantHeaders = Partial<Record<ForwardedHeader, string>>;
 /**
@@ -13,6 +13,7 @@ type RelevantHeaders = Partial<Record<ForwardedHeader, string>>;
  * - Country headers (cf-ipcountry, x-vercel-ip-country, etc.)
  * - Region headers (x-vercel-ip-country-region, x-region-code)
  * - Standard headers (accept-language, user-agent, x-forwarded-*)
+ * - Prefetch headers (purpose, sec-purpose, next-router-prefetch, x-middleware-prefetch)
  *
  * @param headersList - The Headers object from the incoming request
  * @returns An object containing the relevant headers for consent management
@@ -29,4 +30,3 @@ type RelevantHeaders = Partial<Record<ForwardedHeader, string>>;
  */
 export declare function extractRelevantHeaders(headersList: Headers): RelevantHeaders;
 export {};
-//# sourceMappingURL=headers.d.ts.map

package/{dist → dist-types}/server/index.d.ts

@@ -26,6 +26,6 @@
  */
 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';
-//# sourceMappingURL=index.d.ts.map

package/dist-types/server/init-cache-key.d.ts

@@ -0,0 +1,21 @@
+import type { Overrides } from 'c15t';
+/**
+ * Creates a stable cache key for SSR init responses.
+ *
+ * @remarks
+ * This is framework-agnostic and can be used by wrappers (e.g. Next.js)
+ * to align cache key construction with the headers/override semantics used
+ * for SSR init fetching.
+ *
+ * @param normalizedURL - Normalized backend URL for /init
+ * @param headers - Request headers
+ * @param overrides - Optional location/language overrides
+ * @returns A stable JSON string key
+ *
+ * @public
+ */
+export declare function createSSRInitCacheKey({ normalizedURL, headers, overrides, }: {
+    normalizedURL: string;
+    headers: Headers;
+    overrides?: Overrides;
+}): string;

package/{dist → dist-types}/server/normalize-url.d.ts

@@ -49,4 +49,3 @@ export declare function validateBackendURL(backendURL: string): {
  * @public
  */
 export declare function normalizeBackendURL(backendURL: string, headersList: Headers): string | null;
-//# sourceMappingURL=normalize-url.d.ts.map

package/{dist → dist-types}/server/types.d.ts

@@ -48,4 +48,3 @@ export interface FetchSSRDataOptions extends FetchSSRDataOptionsBase {
  * Result of the SSR data fetch.
  */
 export type FetchSSRDataResult = SSRInitialData | undefined;
-//# sourceMappingURL=types.d.ts.map

package/{dist → dist-types}/types/consent-manager.d.ts

@@ -12,6 +12,11 @@ export interface ReactUIOptions extends UIOptions {
  * This type composes:
  * - Base framework-agnostic options from {@link BaseConsentManagerOptions}
  * - React-specific UI configuration
+ *
+ * In offline mode this also includes `offlinePolicy` configuration for
+ * local policy previews.
+ *
+ * @see {@link https://v2.c15t.com/docs/frameworks/react/policy-packs}
  */
 export type ConsentManagerOptions = BaseConsentManagerOptions & ReactUIOptions;
 /**
@@ -27,7 +32,8 @@ export interface ConsentManagerProviderProps {
     /**
      * Configuration options for the consent manager.
      * This includes core, React, store, and translation settings.
+     *
+     * @see {@link https://v2.c15t.com/docs/frameworks/react/components/consent-manager-provider}
      */
     options: ConsentManagerOptions;
 }
-//# sourceMappingURL=consent-manager.d.ts.map

package/{dist → dist-types}/types/theme/index.d.ts

@@ -1,3 +1,2 @@
 export * from './style-keys';
 export * from './style-types';
-//# sourceMappingURL=index.d.ts.map

package/{dist → dist-types}/types/theme/style-keys.d.ts

@@ -1,2 +1 @@
 export type { AllThemeKeys } from '@c15t/ui/theme';
-//# sourceMappingURL=style-keys.d.ts.map

package/{dist → dist-types}/types/theme/style-types.d.ts

@@ -33,6 +33,8 @@ export interface ExtendThemeKeys<VariableMap = Record<string, string | number>>
  * @public
  */
 export interface Theme extends Omit<BaseTheme, 'slots'> {
+    /** Semantic button styling for consent actions. */
+    consentActions?: BaseTheme['consentActions'];
     /** Component-specific style overrides. */
     slots?: BaseTheme['slots'];
 }
@@ -41,4 +43,3 @@ export interface Theme extends Omit<BaseTheme, 'slots'> {
  * @public
  */
 export declare function defineTheme<ThemeType extends Theme>(theme: ThemeType): ThemeType;
-//# sourceMappingURL=style-types.d.ts.map

package/{dist → dist-types}/utils/cn.d.ts

@@ -4,4 +4,3 @@ export type { ClassValue };
  * Utilizes framework-agnostic `cn` from @c15t/ui.
  */
 export declare function cnExt(...classes: ClassValue[]): string;
-//# sourceMappingURL=cn.d.ts.map

package/{dist → dist-types}/utils/merge-styles.d.ts

@@ -9,4 +9,3 @@ import type { ClassNameStyle, ThemeValue } from '../types/theme';
  * @returns The merged styles object
  */
 export declare function mergeStyles(style1: ThemeValue, style2?: ThemeValue): ClassNameStyle;
-//# sourceMappingURL=merge-styles.d.ts.map

package/{dist → dist-types}/utils/test-helpers.d.ts

@@ -29,4 +29,3 @@ interface ComponentStyles {
  */
 export declare function testComponentStyles({ component, testCases, noStyle, theme, }: ComponentStyles): Promise<void>;
 export default testComponentStyles;
-//# sourceMappingURL=test-helpers.d.ts.map

package/{dist → dist-types}/utils/theme-utils.d.ts

@@ -7,7 +7,7 @@ import type { Theme } from '../types/theme/style-types';
 /**
  * Default design tokens for the v2 theme system.
  */
-export declare const defaultTheme: Required<Omit<Theme, "slots" | "dark">>;
+export declare const defaultTheme: Required<Omit<Theme, "slots">>;
 /**
  * Maps theme tokens to CSS variables.
  */
@@ -16,4 +16,3 @@ export declare function themeToVars(theme: Theme, isDark?: boolean): ThemeCSSVar
  * Generates a CSS string for the theme variables.
  */
 export declare function generateThemeCSS(theme: Theme): string;
-//# sourceMappingURL=theme-utils.d.ts.map

package/dist-types/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "2.0.0-rc.10";

package/docs/README.md

@@ -0,0 +1,76 @@
+# c15t React Docs
+
+React-focused c15t docs for consent UI, hooks, headless flows, and script integrations.
+
+If you are changing consent flows, consent UI, script loading, server-side setup, or backend configuration in an app that uses this package, start here before editing code.
+
+## Start Here
+
+- [Quickstart](./quickstart.md)
+- [Headless](./headless.md)
+- [Building Headless Components](./building-headless-components.md)
+- [Callbacks](./callbacks.md)
+- [Google Tag Manager](./integrations/google-tag-manager.md)
+
+## Workflow Rules
+
+### Styling
+
+Use this when:
+- customizing component appearance
+- adapting c15t components to a design system
+- deciding how far to override the default UI
+
+Prefer:
+- Prefer design tokens first.
+- If tokens are not enough, use component slots.
+- Then use CSS variables or `className` for targeted overrides.
+
+If that is not enough:
+- Use `noStyle` or a full headless rebuild only when the design system cannot be expressed through the supported styling layers.
+
+Avoid:
+- Do not rebuild the consent UI from scratch if tokens, slots, or scoped overrides are sufficient.
+
+Read next:
+- [Overview](./styling/overview.md)
+- [Tokens](./styling/tokens.md)
+- [Slots](./styling/slots.md)
+- [Css Variables](./styling/css-variables.md)
+
+### Consent UI Customization
+
+Use this when:
+- changing banners, dialogs, or preference centers
+- deciding between built-in components and headless APIs
+
+Prefer:
+- Prefer the built-in components and their documented customization surfaces first.
+- If the UI requirements diverge significantly, use the headless APIs.
+
+Avoid:
+- Do not rebuild the full consent flow if a token, slot, or component override is enough.
+
+Read next:
+- [Quickstart](./quickstart.md)
+- [Consent Banner](./components/consent-banner.md)
+- [Headless](./headless.md)
+- [Building Headless Components](./building-headless-components.md)
+
+### Scripts & Integrations
+
+Use this when:
+- adding third-party scripts in React components or providers
+- wiring analytics or advertising behind consent
+
+Prefer:
+- Prefer premade scripts from `@c15t/scripts/*`.
+- Start from the integration docs before implementing custom script wiring in React components.
+
+Avoid:
+- Do not duplicate consent-sync logic in React effects when the integration already handles it.
+
+Read next:
+- [Script Loader](./script-loader.md)
+- [Google Tag Manager](./integrations/google-tag-manager.md)
+- [Meta Pixel](./integrations/meta-pixel.md)

package/docs/building-headless-components.md

@@ -0,0 +1,266 @@
+---
+title: Building Headless Components
+description: Build policy-aware custom consent components in React using the headless hooks and policy-pack tooling.
+---
+Building custom consent UI is easier now because c15t exposes multiple layers of policy-aware primitives instead of forcing you to reconstruct banner rules by hand.
+
+The layering is:
+
+* stock component props for the shortest path
+* `ConsentBanner.PolicyActions` and `ConsentWidget.PolicyActions` for custom structure with policy-aware actions
+* `useHeadlessConsentUI()` for fully manual action rendering and non-standard controls
+
+> ⚠️ **Warning:**
+> Headless is the last step in the customization ladder. Use this guide only when pre-built components, tokens, slots, compound components, and noStyle are no longer sufficient.
+
+The headless stack underneath that is:
+
+* `useHeadlessConsentUI()` for policy-aware banner/dialog actions, ordering, layout, and primary actions hints
+* `@c15t/ui/utils` for the pure policy-action helpers that framework packages build on
+* `useConsentManager()` for runtime state, categories, selected consent state, and policy metadata
+* `useTranslations()` for the resolved copy
+* `offlinePolicy.policyPacks` for offline previews that behave like backend policy resolution
+
+The split is intentional: `@c15t/ui` owns pure policy-action resolution, while the framework hooks own visibility, consent mutations, and reactive state.
+
+> ℹ️ **Info:**
+> This guide is about building your own components while still respecting resolved policy-pack behavior. For the general headless overview, see Headless Mode.
+
+## What the Headless Tooling Gives You
+
+The main win is that your custom UI can stay aligned with policy packs without duplicating policy logic in your components.
+
+`useHeadlessConsentUI()` already resolves:
+
+* which actions are allowed
+* the order those actions should render in
+* grouped actions from policy `layout`
+* layout `direction` (`row` or `column`)
+* the primary actions
+* UI profile and scroll-lock hints
+* whether the banner or dialog should currently be visible
+
+That means your component mostly focuses on markup and design-system concerns instead of re-implementing policy interpretation.
+
+For most compound-component layouts, start with `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions`. They render stock c15t buttons and translations by default, and `renderAction` is only needed when you want to override the action mapping. Reach for manual `actionGroups` mapping when you need action rendering that no longer fits the stock button compounds.
+
+> ℹ️ **Info:**
+> For custom layouts built from c15t compound components, prefer ConsentBanner.PolicyActions and ConsentWidget.PolicyActions. The examples below intentionally use manual actionGroups mapping to show the fully headless escape hatch.
+
+## Provider Setup for Local Policy Testing
+
+```tsx
+import type { ReactNode } from 'react';
+import {
+  ConsentManagerProvider,
+  policyPackPresets,
+} from '@c15t/react';
+
+export function ConsentManager({ children }: { children: ReactNode }) {
+  return (
+    <ConsentManagerProvider
+      options={{
+        mode: 'offline',
+        offlinePolicy: {
+          policyPacks: [
+            policyPackPresets.californiaOptOut(),
+            policyPackPresets.europeOptIn(),
+            policyPackPresets.worldNoBanner(),
+          ],
+        },
+        overrides: {
+          country: 'US',
+          region: 'CA',
+        },
+      }}
+    >
+      {children}
+    </ConsentManagerProvider>
+  );
+}
+```
+
+## Policy-Aware Banner Example
+
+```tsx
+import { useHeadlessConsentUI, useTranslations } from '@c15t/react/headless';
+
+export function CustomConsentBanner() {
+  const { banner, openDialog, performAction } = useHeadlessConsentUI();
+  const translations = useTranslations();
+
+  if (!banner.isVisible) return null;
+
+  return (
+    <aside className="rounded-xl border bg-white p-6 shadow-lg">
+      <h2 className="text-lg font-semibold">{translations.cookieBanner.title}</h2>
+      <p className="mt-2 text-sm text-gray-600">
+        {translations.cookieBanner.description}
+      </p>
+
+      <div className="mt-4 space-y-2">
+        {banner.actionGroups.map((group, index) => (
+          <div key={`${group.join('-')}-${index}`} className="flex gap-2">
+            {group.map((action) => (
+              <button
+                key={action}
+                type="button"
+                className={banner.primaryActions.includes(action) ? 'btn-primary' : 'btn-secondary'}
+                onClick={() => {
+                  if (action === 'customize') {
+                    openDialog();
+                    return;
+                  }
+                  void performAction(action, { surface: 'banner' });
+                }}
+              >
+                {action === 'accept'
+                  ? translations.common.acceptAll
+                  : action === 'reject'
+                    ? translations.common.rejectAll
+                    : translations.common.customize}
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+}
+```
+
+## Category List That Respects the Resolved Policy
+
+```tsx
+import {
+  useConsentManager,
+  useHeadlessConsentUI,
+  useTranslations,
+} from '@c15t/react/headless';
+
+export function CustomConsentDialog() {
+  const { dialog, performDialogAction, saveCustomPreferences } = useHeadlessConsentUI();
+  const {
+    consentTypes,
+    consentCategories,
+    consents,
+    selectedConsents,
+    setSelectedConsent,
+  } = useConsentManager();
+  const translations = useTranslations();
+
+  if (!dialog.isVisible) return null;
+
+  const displayedTypes = consentTypes.filter(
+    (type) => type.display && consentCategories.includes(type.name)
+  );
+
+  return (
+    <section className="rounded-xl border bg-white p-6 shadow-xl">
+      <h2 className="text-lg font-semibold">
+        {translations.consentManagerDialog.title}
+      </h2>
+
+      <div className="mt-4 space-y-3">
+        {displayedTypes.map((type) => (
+          <label key={type.name} className="flex items-start justify-between gap-4">
+            <div>
+              <p className="font-medium">
+                {translations.consentTypes[type.name]?.title ?? type.name}
+              </p>
+              <p className="text-sm text-gray-600">{type.description}</p>
+            </div>
+            <input
+              type="checkbox"
+              checked={selectedConsents[type.name] ?? consents[type.name] ?? false}
+              disabled={type.disabled}
+              onChange={(event) =>
+                setSelectedConsent(type.name, event.target.checked)
+              }
+            />
+          </label>
+        ))}
+      </div>
+
+      <div className="mt-4 space-y-2">
+        {dialog.actionGroups.map((group, index) => (
+          <div key={`${group.join('-')}-${index}`} className="flex gap-2">
+            {group.map((action) => (
+              <button
+                key={action}
+                type="button"
+                onClick={() => {
+                  if (action === 'customize') {
+                    void saveCustomPreferences();
+                    return;
+                  }
+                  void performDialogAction(action);
+                }}
+              >
+                {action === 'accept'
+                  ? translations.common.acceptAll
+                  : action === 'reject'
+                    ? translations.common.rejectAll
+                    : translations.common.save}
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+## What a Policy-Aware Headless Component Should Respect
+
+When you build custom banner or dialog components, make sure they use:
+
+* `activeUI` or `banner.isVisible` / `dialog.isVisible` for visibility
+* `allowedActions`, `actionGroups`, and `primaryActions` instead of hard-coding buttons
+* `primaryActions` for visual emphasis
+* `consentCategories` when deciding which category toggles to render
+* `policyDecision` when you want to debug why a specific UI state was chosen
+
+If you ignore those values, your custom UI can drift away from the resolved policy pack even though the underlying consent engine is configured correctly.
+
+## Test Custom UI Against the Resolved Policy
+
+```ts
+import {
+  getEffectivePolicy,
+  type PolicyUIState,
+  validateUIAgainstPolicy,
+} from 'c15t';
+
+const policy = getEffectivePolicy(initData);
+
+const bannerState: PolicyUIState = {
+  mode: 'banner',
+  actions: ['accept', 'reject', 'customize'],
+  layout: 'split',
+  uiProfile: 'compact',
+  scrollLock: false,
+};
+
+const issues = validateUIAgainstPolicy({
+  policy,
+  state: bannerState,
+});
+
+expect(issues).toEqual([]);
+```
+
+## Validation and Testing
+
+If you are building a reusable headless component library, validate your rendered UI against the resolved runtime policy in tests.
+
+The core package exposes:
+
+* `getEffectivePolicy(initData)` to read the resolved policy from `/init`
+* `validateUIAgainstPolicy({ policy, state })` to detect mismatches such as wrong actions, layout, or mode
+
+This is useful when your design system renders custom button arrangements and you want tests to catch policy drift early.
+
+> ℹ️ **Info:**
+> Use this together with Policy Packs when you want to preview multiple regional experiences locally.