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

package/AGENTS.md

@@ -6,98 +6,124 @@ These docs ship inside the package so coding agents can read them offline. Open
 
 ## Using these docs
 
-These docs describe v3. Start with Inth hosted setup, identify the framework, router and deployment, then read its quickstart. Static sites can use Inth directly. Use page Markdown and package-bundled docs for targeted context. Verify scripts, rejection, reload and preferences; banner visibility alone is insufficient.
+These docs describe c15t v3. Find your app's row in Choose your setup, then follow that framework guide from start to finish; it names the files to create and the backend URL to use. Install c15t packages with the @alpha dist-tag, because npm latest is still v2. A visible banner does not prove anything: check that vendor requests wait for consent, that rejection survives a reload, and that preferences can be reopened.
 
 ## Start here
 
 - [React quickstart](./docs/frameworks/react/quickstart.md)
-- [Customize your consent interface](./docs/customization/overview.md): Choose presentation, theme tokens, slots or custom markup for the change you need.
-- [Verify consent before shipping](./docs/guides/verify-consent.md): Test requests, policy resolution, persistence, navigation and preference changes in a production build.
-- [Upgrade to v3 policies](./docs/upgrade-v3.md): Migrate policy configuration, consent records, callbacks, and custom transports to the v3 policy system.
+- [Choose your setup](./docs/concepts/choose-your-setup.md): Pick the c15t setup for your framework, rendering mode and hosting, and decide who runs the consent backend.
+- [How consent works](./docs/concepts/how-consent-works.md): What c15t decides on each page load, the difference between a permission and a recorded choice, and what happens when a visitor saves.
+- [Customize the interface](./docs/customization/overview.md): Change c15t's consent banner and dialog one step at a time, from a prop to your own markup, and find where each step lives in your framework.
+- [Verify consent](./docs/guides/verify-consent.md): Check in a production build that vendor requests wait for consent, rejection survives a reload, preferences reopen and privacy signals apply.
+- [Upgrade a React app from v2](./docs/frameworks/react/upgrade-v3.md): Upgrade a React app from c15t v2 (@c15t/react) to v3. Covers packages, ConsentProvider and transports, the useConsentManager codemod, callbacks, policies, styles, IAB and stored consent.
 
 ## More documentation
 
-[Documentation index](https://c15t.com/docs/llms.txt) · [Full Markdown context](https://c15t.com/llms-full.txt). Prefer the index and individual pages for focused tasks.
+[Documentation index](https://v3.c15t.com/docs/llms.txt) · [Full Markdown context](https://v3.c15t.com/llms-full.txt). Prefer the index and individual pages for focused tasks.
 
 ## Frameworks
 
-- [ConsentBanner](./docs/frameworks/react/components/consent-banner.md): Pre-built consent banner shown when consent is required.
+- [Callbacks](./docs/frameworks/react/callbacks.md): Run code in a React app when a visitor records a consent choice, when permissions change, when a request fails and before the revocation reload, with the ConsentProvider callbacks option.
+- [Clear on revocation](./docs/frameworks/react/clear-on-revocation.md): Delete the first-party cookies and Web Storage keys a consent category owns in a React app when that category is denied, with the clearOnRevocation option on ConsentProvider.
+- [Components](./docs/frameworks/react/components.md): Every c15t component a React app imports from c15t/react, what each renders, where each one mounts, and which to start with.
+- [ConsentBanner](./docs/frameworks/react/components/consent-banner.md): Render the c15t consent banner in a React app, choose its variant and position, and compose its parts.
 - [ConsentDialog](./docs/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](./docs/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](./docs/frameworks/react/components/consent-dialog-trigger.md): Floating button and toolbar that reopen the preference center after the first prompt.
-- [ConsentProvider](./docs/frameworks/react/components/consent-manager-provider.md): Configure the v3 consent runtime and share its state with child components.
+- [ConsentDialogTrigger](./docs/frameworks/react/components/consent-dialog-trigger.md): Add the c15t ConsentDialogTrigger floating button or toolbar inside a React ConsentProvider so visitors can reopen the preference center after the first prompt.
+- [ConsentGate](./docs/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](./docs/frameworks/react/components/consent-provider.md): Mount ConsentProvider in a React app and configure its backend, scripts, storage, blocking and presentation options.
 - [ConsentWidget](./docs/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](./docs/frameworks/react/components/dev-tools.md): A development tool for inspecting consent state, geolocation, loaded scripts, and consent events in real time.
-- [Frame](./docs/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](./docs/frameworks/react/concepts/consent-categories.md): Assign optional features to categories and understand how policy scope affects permission.
-- [Policy presets](./docs/frameworks/react/concepts/policy-presets.md): Understand how policy rules affect React prompts, permissions and persistent privacy controls.
+- [DevTools](./docs/frameworks/react/components/dev-tools.md): Inspect consent state, location, loaded scripts and consent events in a React app during development with the c15t DevTools panel.
+- [Compose your own banner](./docs/frameworks/react/compose.md): Build a React consent banner from the ConsentBanner parts in c15t/react, with your own markup and buttons, while the policy still decides which actions appear.
+- [Content Security Policy](./docs/frameworks/react/content-security-policy.md): Run c15t in a React app under a Content Security Policy, allow the consent backend and vendor hosts, and pass a nonce to ConsentProvider and ConsentTheme.
+- [Customize](./docs/frameworks/react/customize.md): Change the colors, fonts, layout, button styles and copy of the c15t banner and dialog in a React app with theme tokens, provider options and slots, and load the stylesheet yourself when you need to.
+- [Embeds](./docs/frameworks/react/embeds.md): Keep YouTube videos, maps and other iframes out of a React page until their consent category is allowed, with ConsentGate or the iframe blocker in ConsentProvider.
+- [IAB GPP](./docs/frameworks/react/gpp.md): Add the IAB Global Privacy Platform API (__gpp) to a React app with ConsentGPP from @c15t/react/gpp, so ad tech can read US state opt-outs and the TCF EU consent string.
 - [Headless](./docs/frameworks/react/headless.md): Build a custom consent banner in React with the c15t/react/headless hooks inside your ConsentProvider.
-- [Hooks](./docs/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.
-- [IAB TCF](./docs/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.
-- [Quickstart](./docs/frameworks/react/quickstart.md): Connect a React application to Inth and add consent UI, persistence and a preferences link.
-- [Load scripts with consent](./docs/frameworks/react/script-loader.md): Register vendor scripts once and let effective permissions control loading.
-- [Styling](./docs/frameworks/react/styling/overview.md): Import the React stylesheet and theme c15t components with tokens, slots, and class names on ConsentProvider.
-- [Troubleshoot React consent](./docs/frameworks/react/troubleshooting.md): Diagnose policy resolution, early scripts, storage and rendering problems.
+- [Hooks](./docs/frameworks/react/hooks.md): Gate features and save consent choices in React components with the focused hooks exported from c15t/react.
+- [IAB TCF](./docs/frameworks/react/iab.md): Mount the IAB TCF banner and dialog inside a React ConsentProvider and configure the CMP ID, policy and vendor data.
+- [Network blocker](./docs/frameworks/react/network-blocker.md): Hold fetch and XMLHttpRequest calls in a React app until their consent category is allowed, with networkBlocker rules in the ConsentProvider options.
+- [Quickstart](./docs/frameworks/react/quickstart.md): Add a consent banner, preferences dialog and consent-gated scripts to a React single-page app built with Vite, using Inth as the consent backend.
+- [Rendering and deployment](./docs/frameworks/react/rendering.md): How c15t resolves consent in client-rendered React apps, React Router framework mode, Remix and other server-rendered React apps without a c15t adapter.
+- [Scripts](./docs/frameworks/react/scripts.md): Load vendor scripts by consent category in a React app with ConsentProvider, and clear stored data or reload the page when a visitor withdraws consent.
+- [Translations](./docs/frameworks/react/translations.md): Where c15t banner and dialog copy comes from in a React app, how the browser picks the visitor's language, and how to override copy and switch languages with the provider's i18n option and hooks.
+- [Troubleshooting](./docs/frameworks/react/troubleshooting.md): Fix a missing banner, early vendor requests, unstyled components and theme warnings in a React app that uses c15t/react.
+- [Upgrade from v2](./docs/frameworks/react/upgrade-v3.md): Upgrade a React app from c15t v2 (@c15t/react) to v3. Covers packages, ConsentProvider and transports, the useConsentManager codemod, callbacks, policies, styles, IAB and stored consent.
+- [Vendor consent](./docs/frameworks/react/vendor-consent.md): Let visitors allow a category such as marketing in a React app and still turn off one vendor in it, with the vendors option on ConsentProvider and useVendorAllowed.
+
+## Concepts
+
+- [Choose your setup](./docs/concepts/choose-your-setup.md): Pick the c15t setup for your framework, rendering mode and hosting, and decide who runs the consent backend.
+- [Consent categories](./docs/concepts/consent-categories.md): Assign scripts, embeds and features to c15t consent categories, and understand which categories the preference dialog shows.
+- [Consent state reference](./docs/concepts/consent-state.md): How c15t saves choices, gates IAB vendors, hydrates server records and keeps browser tabs and storage in step.
+- [Data fetching](./docs/concepts/data-fetching.md): Choose the recommended build-time policy snapshot or runtime manifest fetching, backend /init, browser resolution or offline rules, and understand where consent choices are saved.
+- [How consent works](./docs/concepts/how-consent-works.md): What c15t decides on each page load, the difference between a permission and a recorded choice, and what happens when a visitor saves.
+- [Consent modes](./docs/concepts/modes.md): Reference for manifest(), hosted() and offline() in every c15t framework package, where each one resolves the visitor's policy, what it adds to first-load JavaScript, the build-time manifest fetch and its failure policy, and the backend URL variable each framework reads.
+- [Policies](./docs/concepts/policies.md): How policy models, prompts and scope decide what c15t asks visitors, where to change the rules, and why a banner may not appear.
 
 ## Guides
 
-- [Understand consent state](./docs/guides/consent-state.md): Distinguish policy resolution, effective permissions, explicit choices, notices and privacy signals.
-- [Data fetching and transports](./docs/guides/data-fetching.md): Choose cached manifests, backend init or offline policy resolution, and understand where consent records are saved.
-- [Choose a deployment mode](./docs/guides/deployment-modes.md): Choose who runs your consent backend, then select manifest, init or offline resolution for your deployment.
-- [Troubleshoot consent](./docs/guides/troubleshooting.md): Diagnose missing banners, early vendor requests, lost choices and hydration differences.
-- [Verify consent before shipping](./docs/guides/verify-consent.md): Test requests, policy resolution, persistence, navigation and preference changes in a production build.
+- [Banner experiments](./docs/guides/banner-experiments.md): Run A/B tests on consent banner presentation with any feature-flag provider or built-in weighted assignment, and attribute every impression and choice to its arm.
+- [Troubleshooting](./docs/guides/troubleshooting.md): Fix a missing banner, analytics that load before consent, choices lost on reload, CORS errors, hydration differences, failed manifest downloads, mode errors and failed static builds in c15t v3.
+- [Verify consent](./docs/guides/verify-consent.md): Check in a production build that vendor requests wait for consent, rejection survives a reload, preferences reopen and privacy signals apply.
 
 ## Customization
 
-- [Customize your consent interface](./docs/customization/overview.md): Choose presentation, theme tokens, slots or custom markup for the change you need.
-- [Banner styling recipes](./docs/customization/recipes.md): See real v3 components and reuse the exact theme configuration behind the examples.
-- [Style component slots](./docs/customization/slots.md): Target a specific c15t component part without replacing its markup or behavior.
-- [Theme tokens and CSS](./docs/customization/tokens.md): Style c15t with semantic tokens and use the stylesheet that matches your CSS tooling.
+- [Class names and CSS-in-JS](./docs/customization/class-names.md): Style c15t's component parts with CSS Modules, vanilla-extract, StyleX, Emotion or plain class names, and see which approach works in each framework.
+- [Dark mode](./docs/customization/dark-mode.md): Switch c15t's banner and dialog to dark colors with colorScheme, set your own dark tokens, follow your site's theme switch, and paint dark on the first frame in every framework.
+- [Motion and animation](./docs/customization/motion.md): Change how fast c15t's banner and dialog animate with duration and easing tokens, turn animations off per surface with disableAnimation, and check reduced-motion behavior in each framework.
+- [Customize the interface](./docs/customization/overview.md): Change c15t's consent banner and dialog one step at a time, from a prop to your own markup, and find where each step lives in your framework.
+- [Banner designs](./docs/customization/recipes.md): Five consent banner designs built with c15t, from one prop to your own markup, with tested code for React, Vue, Svelte, Astro and plain HTML.
+- [Component parts](./docs/customization/slots.md): Find every part of c15t's banner, dialog, widget, trigger and ConsentGate placeholder, its key in your framework's part API, and the data attributes to select on.
+- [Stylesheets and CSS layers](./docs/customization/stylesheets.md): See how c15t delivers its styles in each framework without a render-blocking stylesheet, when to import styles.css yourself with styles false, which file holds the dialog's rules, and how c15t's cascade layer meets your own.
+- [Tailwind CSS](./docs/customization/tailwind.md): Use c15t's styles with Tailwind CSS 4 or 3 in every framework, put utilities on c15t component parts, and use Tailwind's dark variant with c15t.
+- [Theme tokens](./docs/customization/tokens.md): Change c15t's colors, type, radius, spacing, shadows and motion with theme tokens, and see every --c15t-* variable with its default.
 - [Copy and translations](./docs/customization/translations.md): Change consent wording through i18n and test the complete prompt and preferences flow.
 
 ## Integrations
 
-- [Adobe Analytics](./docs/integrations/adobe-analytics.md): Configure Adobe Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [Ahrefs Analytics](./docs/integrations/ahrefs-analytics.md): Configure Ahrefs Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [Amplitude](./docs/integrations/amplitude.md): Configure Amplitude with c15t v3, understand measurement permission and verify loading and revocation.
-- [Custom integrations](./docs/integrations/building-integrations.md): Define loading, initialization and consent-change behavior for a vendor without a helper.
-- [Clear on revocation](./docs/integrations/clear-on-revocation.md): Remove configured first-party cookies and Web Storage keys when their consent category is denied.
-- [Clearbit](./docs/integrations/clearbit.md): Configure Clearbit with c15t v3, understand marketing permission and verify loading and revocation.
-- [Cloudflare Web Analytics](./docs/integrations/cloudflare-web-analytics.md): Configure Cloudflare Web Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [Crisp](./docs/integrations/crisp.md): Configure Crisp with c15t v3, understand functionality permission and verify loading and revocation.
-- [Databuddy](./docs/integrations/databuddy.md): Configure Databuddy's initial and updated consent state with c15t v3.
-- [Fathom Analytics](./docs/integrations/fathom-analytics.md): Configure Fathom Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [Google Maps](./docs/integrations/google-maps.md): Prevent a map iframe from mounting before the required permission.
-- [Google Tag](./docs/integrations/google-tag.md): Configure gtag with c15t Consent Mode signals and understand its loading behavior.
-- [Google Tag Manager](./docs/integrations/google-tag-manager.md): Load GTM with c15t consent signals and verify the tags inside your container.
-- [Heap](./docs/integrations/heap.md): Configure Heap with c15t v3, understand measurement permission and verify loading and revocation.
-- [Hightouch](./docs/integrations/hightouch.md): Configure Hightouch with c15t v3, understand measurement permission and verify loading and revocation.
-- [Hotjar](./docs/integrations/hotjar.md): Configure Hotjar with c15t v3, understand measurement permission and verify loading and revocation.
-- [Intercom](./docs/integrations/intercom.md): Load the Intercom messenger with functionality permission and configure its region.
-- [LinkedIn Insight Tag](./docs/integrations/linkedin-insights.md): Configure LinkedIn Insight Tag with c15t v3, understand marketing permission and verify loading and revocation.
-- [LogRocket](./docs/integrations/logrocket.md): Configure LogRocket with c15t v3, understand measurement permission and verify loading and revocation.
-- [Matomo Analytics](./docs/integrations/matomo-analytics.md): Choose gated loading or Matomo consent signaling and configure the correct tracker endpoints.
-- [Meta Pixel](./docs/integrations/meta-pixel.md): Register the Meta Pixel under marketing permission and verify event calls after revocation.
-- [Microsoft Clarity](./docs/integrations/microsoft-clarity.md): Configure Microsoft Clarity with c15t v3, understand measurement permission and verify loading and revocation.
-- [Microsoft UET](./docs/integrations/microsoft-uet.md): Configure Microsoft UET with c15t v3, understand marketing permission and verify loading and revocation.
-- [Mixpanel](./docs/integrations/mixpanel-analytics.md): Configure Mixpanel with c15t v3, understand measurement permission and verify loading and revocation.
-- [OpenAI Pixel](./docs/integrations/openai-pixel.md): Configure the OpenAI Measurement Pixel for ChatGPT Ads with c15t v3, manage marketing permission and verify conversion delivery.
-- [Overview](./docs/integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, chat and embedded content.
-- [Pirsch](./docs/integrations/pirsch.md): Configure Pirsch with c15t v3, understand measurement permission and verify loading and revocation.
-- [Plausible Analytics](./docs/integrations/plausible-analytics.md): Configure Plausible Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [PostHog](./docs/integrations/posthog.md): Choose PostHog loading and cookieless behavior, configure the region, and synchronize v3 permissions.
-- [Promptwatch](./docs/integrations/promptwatch.md): Configure Promptwatch with c15t v3, understand measurement permission and verify loading and revocation.
-- [Reddit Pixel](./docs/integrations/reddit-pixel.md): Configure Reddit Pixel with c15t v3, understand marketing permission and verify loading and revocation.
-- [RudderStack](./docs/integrations/rudderstack.md): Gate the RudderStack browser SDK or map c15t categories to destination consent IDs.
-- [Rybbit Analytics](./docs/integrations/rybbit-analytics.md): Configure Rybbit Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [Segment](./docs/integrations/segment.md): Configure Segment with c15t v3, understand measurement permission and verify loading and revocation.
-- [Snapchat Pixel](./docs/integrations/snapchat-pixel.md): Configure Snapchat Pixel with c15t v3, understand marketing permission and verify loading and revocation.
-- [TikTok Pixel](./docs/integrations/tiktok-pixel.md): Configure TikTok Pixel with c15t v3, understand marketing permission and verify loading and revocation.
-- [Umami Analytics](./docs/integrations/umami-analytics.md): Configure Umami Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [Vercel Analytics](./docs/integrations/vercel-analytics.md): Configure Vercel Analytics with c15t v3, understand measurement permission and verify loading and revocation.
-- [X Pixel](./docs/integrations/x-pixel.md): Configure X Pixel with c15t v3, understand marketing permission and verify loading and revocation.
+- [Adobe Analytics](./docs/integrations/adobe-analytics.md): Load an Adobe Data Collection Tags property only after measurement consent with the c15t adobeAnalytics helper, and check its extensions in DevTools.
+- [Ahrefs Analytics](./docs/integrations/ahrefs-analytics.md): Load Ahrefs Web Analytics only after measurement consent with the c15t ahrefsAnalytics helper, and check it in DevTools.
+- [Amplitude](./docs/integrations/amplitude.md): Load the Amplitude Browser SDK 2 only after measurement consent with the c15t amplitude helper, which opts the SDK out on revocation and back in on a new grant.
+- [Custom integrations](./docs/integrations/building-integrations.md): Gate a vendor that has no @c15t/integrations helper, or sync consent with an SDK your app already loads, using a c15t script configuration.
+- [Clearbit](./docs/integrations/clearbit.md): Load the Clearbit enrichment tag only after marketing consent with the c15t clearbit helper, and check it in DevTools.
+- [Cloudflare Web Analytics](./docs/integrations/cloudflare-web-analytics.md): Load the Cloudflare Web Analytics beacon only after measurement consent with the c15t cloudflareWebAnalytics helper, and check it in DevTools.
+- [Cloudflare Zaraz](./docs/integrations/cloudflare-zaraz.md): Sync c15t permissions to Cloudflare Zaraz purposes with the c15t cloudflareZaraz bridge, which runs on every page without loading a script, and check the tools it controls.
+- [Crisp](./docs/integrations/crisp.md): Load the Crisp chat widget only after functionality consent with the c15t crisp helper, pass its runtime settings and check it in DevTools.
+- [Databuddy](./docs/integrations/databuddy.md): Load the Databuddy SDK on every page with the c15t databuddy helper, switch its disabled flag and config from measurement consent, and check both in DevTools.
+- [Fathom Analytics](./docs/integrations/fathom-analytics.md): Load Fathom Analytics only after measurement consent with the c15t fathomAnalytics helper, set its SPA mode, and check it in DevTools.
+- [Front Chat](./docs/integrations/front-chat.md): Load the Front Chat widget only after functionality consent with the c15t frontChat helper, forward CSP nonces, clear the session on revocation and check it in DevTools.
+- [Google Maps](./docs/integrations/google-maps.md): Gate a Google Maps iframe embed with c15t v3 so the map loads only after the visitor allows its consent category, in Next.js, TanStack Start, React, Nuxt, Vue, Astro, Svelte, SvelteKit, HTML or JavaScript.
+- [Google Tag](./docs/integrations/google-tag.md): Load gtag.js for Google Analytics or Google Ads before or after consent with c15t Consent Mode v2 signals, and verify the consent commands in DevTools.
+- [Google Tag Manager](./docs/integrations/google-tag-manager.md): Load a Google Tag Manager container before or after consent with c15t Consent Mode v2 signals, configure consent checks inside the container, and verify both in DevTools.
+- [Heap](./docs/integrations/heap.md): Load the Heap config script and heap.js only after measurement consent with the c15t heap helper, and check it in DevTools.
+- [Hightouch](./docs/integrations/hightouch.md): Load the Hightouch Events browser SDK only after measurement consent with the c15t hightouch helper, and check page events in DevTools.
+- [Hotjar](./docs/integrations/hotjar.md): Load Hotjar only after measurement consent with the c15t hotjar helper, and check its loader and recordings in DevTools.
+- [Intercom](./docs/integrations/intercom.md): Load the Intercom messenger only after functionality consent with the c15t intercom helper, set its region and check it in DevTools.
+- [Klaviyo](./docs/integrations/klaviyo.md): Load Klaviyo signup forms and onsite tracking only after marketing and measurement consent with the c15t klaviyo helper, gate your own events, and check it in DevTools.
+- [LinkedIn Insight Tag](./docs/integrations/linkedin-insights.md): Load the LinkedIn Insight Tag only after marketing consent with the c15t linkedinInsights helper, guard lintrk conversion calls, and check it in DevTools.
+- [LogRocket](./docs/integrations/logrocket.md): Load LogRocket session replay only after measurement consent with the c15t logRocket helper, including proxied setups, and check it in DevTools.
+- [Matomo Analytics](./docs/integrations/matomo-analytics.md): Load Matomo after measurement consent with the c15t matomoAnalytics helper, or use Matomo's own consent mode, and check each mode in DevTools.
+- [Meta Pixel](./docs/integrations/meta-pixel.md): Load the Meta Pixel only after marketing consent with the c15t metaPixel helper, guard fbq event calls, and check it in DevTools.
+- [Microsoft Clarity](./docs/integrations/microsoft-clarity.md): Load Microsoft Clarity only after measurement consent with the c15t clarity helper, send Consent V2 storage signals and check them in DevTools.
+- [Microsoft UET](./docs/integrations/microsoft-uet.md): Load Microsoft Advertising UET on every page with the c15t microsoftUet helper, send ad_storage consent defaults and updates, and verify both in DevTools.
+- [Mixpanel](./docs/integrations/mixpanel-analytics.md): Load the Mixpanel SDK on every page with the c15t mixpanelAnalytics helper, which switches Mixpanel tracking on and off with measurement consent, and check it in DevTools.
+- [OneDollarStats](./docs/integrations/one-dollar-stats.md): Load the OneDollarStats tracker only after measurement consent with the c15t oneDollarStats helper, forward its data-attribute settings, and check it in DevTools.
+- [OpenAI Pixel](./docs/integrations/openai-pixel.md): Load the ChatGPT Ads Measurement Pixel only after marketing consent with the c15t openaiPixel helper, guard oaiq conversion calls, and check it in DevTools.
+- [Integrations](./docs/integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, email and SMS, chat and embedded content.
+- [Pinterest Tag](./docs/integrations/pinterest-tag.md): Load the Pinterest Tag only after marketing consent with the c15t pinterestTag helper, guard pintrk event calls, and check it in DevTools.
+- [Pirsch](./docs/integrations/pirsch.md): Load Pirsch Analytics only after measurement consent with the c15t pirsch helper, keep custom event bindings working, and check it in DevTools.
+- [Plausible Analytics](./docs/integrations/plausible-analytics.md): Load the Plausible Analytics tracker only after measurement consent with the c15t plausibleAnalytics helper, and check it in DevTools.
+- [PostHog](./docs/integrations/posthog.md): Load PostHog before or after measurement consent with the c15t posthog helper, choose its cookieless behavior, turn off PostHog modules you do not use, and sync consent with an SDK you already initialize.
+- [Promptwatch](./docs/integrations/promptwatch.md): Load the Promptwatch attribution client only after measurement consent with the c15t promptwatch helper, and check it in DevTools.
+- [Reddit Pixel](./docs/integrations/reddit-pixel.md): Load the Reddit Pixel only after marketing consent with the c15t redditPixel helper, guard rdt conversion calls, and check it in DevTools.
+- [RudderStack](./docs/integrations/rudderstack.md): Load the RudderStack JavaScript SDK after measurement consent with the c15t rudderstack helper, or map c15t categories to destination consent IDs, and check each mode.
+- [Rybbit Analytics](./docs/integrations/rybbit-analytics.md): Load Rybbit Analytics only after measurement consent with the c15t rybbitAnalytics helper, map its tracking options to data attributes, and check it in DevTools.
+- [Segment](./docs/integrations/segment.md): Load Segment Analytics.js only after measurement consent with the c15t segment helper, guard your own track and identify calls, and check it in DevTools.
+- [Sentry](./docs/integrations/sentry.md): Configure Sentry's CDN or your own SDK with consent for error monitoring, Session Replay and user data.
+- [Snapchat Pixel](./docs/integrations/snapchat-pixel.md): Load the Snapchat Pixel only after marketing consent with the c15t snapchatPixel helper, guard snaptr event calls, and check it in DevTools.
+- [TikTok Pixel](./docs/integrations/tiktok-pixel.md): Load the TikTok Pixel only after marketing consent with the c15t tiktokPixel helper, guard ttq event calls, and check it in DevTools.
+- [Umami Analytics](./docs/integrations/umami-analytics.md): Load the Umami Analytics tracker only after measurement consent with the c15t umamiAnalytics helper, point it at a self-hosted instance, and check it in DevTools.
+- [Vercel Analytics](./docs/integrations/vercel-analytics.md): Load the Vercel Web Analytics script only after measurement consent with the c15t vercelAnalytics helper, choose the debug script, and check it in DevTools.
+- [X Pixel](./docs/integrations/x-pixel.md): Load the X Pixel only after marketing consent with the c15t xPixel helper, guard twq conversion events, and check it in DevTools.
 - [YouTube](./docs/integrations/youtube.md): Gate YouTube embeds with c15t v3 in Next.js, TanStack Start, React, Nuxt, Vue, Astro, Svelte, SvelteKit or JavaScript.
-
-## Reference
-
-- [Upgrade to v3 policies](./docs/upgrade-v3.md): Migrate policy configuration, consent records, callbacks, and custom transports to the v3 policy system.

package/README.md

@@ -28,8 +28,8 @@ React cookie banner, consent manager, preference center, and headless CMP compon
 - Headless hooks for custom consent flows
 - Minimal configuration with TypeScript-first design
 - Comprehensive Consent Management Platform (CMP)
-- IAB TCF 2.3 UI and hooks through the @c15t/react/iab subpath
-- Google Tag Manager, Google Consent Mode v2, Meta Pixel, and analytics integrations through @c15t/scripts
+- IAB TCF 2.4 UI and hooks through the @c15t/react/iab subpath
+- Google Tag Manager, Google Consent Mode v2, Meta Pixel, and analytics integrations through @c15t/integrations
 - Built-in internationalization support
 - Seamless consent storage and tracking
 
@@ -73,32 +73,36 @@ Then add the prebuilt stylesheet to your app-level CSS entrypoint:
 
 If you use the prebuilt IAB TCF UI, also import `@c15t/react/iab/styles.css`. It is published separately so non-IAB apps do not ship those component rules.
 
-To manually install, follow the guide in our [docs – manual setup](https://c15t.com/docs/frameworks/react/quickstart#manual-setup).
+To manually install, follow the [quickstart](https://c15t.com/docs/frameworks/react/quickstart).
 
 ## Usage
 
-1. Import `ConsentManagerProvider` in your app's root component
-2. Add `ConsentBanner` and `ConsentDialog` components
+1. Wrap your app in `ConsentProvider` with the backend URL from your Inth project
+2. Render `ConsentBanner`, `ConsentDialog` and `ConsentDialogLink` inside the provider, and mount it once for the life of the app
 3. Customize styling and behavior to fit your app
 4. For full implementation details, see the [React quickstart docs](https://c15t.com/docs/frameworks/react/quickstart)
 
 ```tsx
-// App.tsx
+// src/consent.tsx
 import {
-  ConsentManagerProvider,
   ConsentBanner,
   ConsentDialog,
+  ConsentDialogLink,
+  ConsentProvider,
+  hosted,
 } from '@c15t/react'
-
-function App() {
-  return (
-    <ConsentManagerProvider>
-      <YourApp />
-      <ConsentBanner />
-      <ConsentDialog />
-    </ConsentManagerProvider>
-  )
-}
+import type { ReactNode } from 'react'
+
+const mode = hosted({ backendURL: 'https://your-project.inth.app' })
+
+export const Consent = ({ children }: { children: ReactNode }) => (
+  <ConsentProvider options={{ mode }}>
+    {children}
+    <ConsentBanner />
+    <ConsentDialog />
+    <ConsentDialogLink>Privacy settings</ConsentDialogLink>
+  </ConsentProvider>
+)
 ```
 
 ## Documentation

package/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: c15t-react
+description: Set up, customize or debug c15t consent management with @c15t/react. Use when the project is a React app, such as Vite or React Router, or when a task mentions a cookie banner, consent dialog, GDPR or CCPA prompts, blocking analytics until consent, Google Consent Mode or IAB TCF.
+---
+
+# c15t with @c15t/react
+
+The Markdown under `./docs` matches the installed version. Read it before writing code: v3 renamed most v2 APIs, so remembered examples are usually wrong.
+
+## Before writing code
+
+1. Find the framework, router, rendering mode (server, static, cached or single-page) and host in the project. Check the framework config and route files for settings that prerender or cache pages.
+2. Pick the matching row in [Choose your setup](./docs/concepts/choose-your-setup.md).
+3. Follow that guide from start to finish: [React](./docs/frameworks/react/quickstart.md).
+
+## Rules
+
+- Install with the `alpha` tag: `npm install c15t@alpha` and import `c15t/react`. npm `latest` is still v2. Keep every c15t package on the same release. New apps install `c15t` and import its framework subpath. An app that already depends on this scoped package can keep importing from it, but should not install both.
+- The backend URL comes from the user's Inth project or self-hosted backend. It is public configuration. Never invent one; ask for it or read it from the environment.
+- Register analytics, pixels and embeds through c15t and remove the vendor's own loader or plugin. With a bundler, use `@c15t/integrations` helpers and `ConsentGate`. On a plain HTML page, change the vendor's `<script>` to `type="text/plain"` with `data-c15t-category`. A banner does not block code loaded elsewhere.
+- Gate features on the current permission. Never save a consent choice on page load or from code; only a visitor action records one.
+- Offline mode keeps policies in code and choices in the browser, with no consent records. Not recommended for production environments.
+- Keep one consent provider or root for the whole app, mounted outside route-level components.
+
+## Customize with the smallest change
+
+Copy and languages use i18n configuration. Position and layout use component props. Colors, type, radius and spacing use theme tokens. One part of a component uses slots. Different markup uses compound or headless components.
+Start at [Customization overview](./docs/customization/overview.md).
+
+## Finish with a check
+
+A visible banner proves nothing. In a production build, confirm vendor requests are absent before consent, a rejection survives a reload, and preferences reopen. Follow [Verify consent before shipping](./docs/guides/verify-consent.md). If something fails, start with [Troubleshooting](./docs/guides/troubleshooting.md).
+
+`./AGENTS.md` lists every bundled page.

package/dist/aggregate-components.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as o}from"react/jsx-runtime";import{Suspense as e,lazy as n}from"react";import{registerDialogChunkWarmer as t}from"./chunk-warming.js";import{useActiveUI as r}from"./hooks.js";let i=function(n){return t=>o(e,{fallback:null,children:o(n,{...t})})},c=function(o){return i(n(async()=>({default:(await import("./components/panel/index.js"))[o]})))};t(()=>{import("./components/panel/index.js")});let a=function(o){return i(n(async()=>({default:(await import("./components/preferences/index.js"))[o]})))},l=c("ConsentDialog"),s=a("ConsentWidget"),d=function(o,e,n){let t={};for(let r of e)Object.defineProperty(o,r,{configurable:!0,enumerable:!0,get:()=>(t[r]??=n(r),t[r])});return o},u=d(e=>{let n=r();return!0===e.open||"dialog"===n||e.showTrigger?o(l,{...e}):null},["Card","Header","HeaderTitle","HeaderDescription","Content","Footer","ConsentCustomizationCard","ConsentDialogFooter","ConsentDialogHeader","ConsentDialogHeaderTitle","ConsentDialogHeaderDescription","ConsentDialogContent","Overlay","Root"],c),m=d(e=>o(s,{...e}),["AccordionTrigger","AccordionTriggerInner","AccordionContent","AccordionArrow","Accordion","Switch","AccordionItems","AccordionItem","Root","AcceptAllButton","CustomizeButton","SaveButton","RejectButton","PolicyActions","Footer","FooterSubGroup"],a);export{u as ConsentDialog,m as ConsentWidget};
+import{jsx as o}from"react/jsx-runtime";import{registerDialogChunkWarmer as e,useIdleDialogWarming as n}from"./chunk-warming.js";import{useActiveUI as t}from"./hooks.js";import{createDeferredModule as r}from"./utils/deferred-module.js";let i=r(()=>import("./components/panel/index.js")),c=r(()=>import("./components/preferences/index.js"));e(()=>{i.preload()});let s=i.component(o=>o.ConsentDialog),l=c.component(o=>o.ConsentWidget),a=function(o,e,n){let t={};for(let r of e)Object.defineProperty(o,r,{configurable:!0,enumerable:!0,get:()=>(t[r]??=n(r),t[r])});return o},d=a(e=>{let r=t();return(n("banner"===r),!0===e.open||"dialog"===r||e.showTrigger)?o(s,{...e}):null},["Card","Header","HeaderTitle","HeaderDescription","Content","Footer","ConsentCustomizationCard","ConsentDialogFooter","ConsentDialogHeader","ConsentDialogHeaderTitle","ConsentDialogHeaderDescription","ConsentDialogContent","Overlay","Root"],o=>i.component(e=>e[o])),m=a(e=>o(l,{...e}),["AccordionTrigger","AccordionTriggerInner","AccordionContent","AccordionArrow","Accordion","Switch","AccordionItems","AccordionItem","VendorList","Root","AcceptAllButton","CustomizeButton","SaveButton","RejectButton","PolicyActions","Footer","FooterSubGroup"],o=>c.component(e=>e[o]));export{d as ConsentDialog,m as ConsentWidget};

package/dist/chunk-warming.js

@@ -1 +1 @@
-let r=new Set,e=!1,n=function(n){return r.add(n),e&&n(),()=>{r.delete(n)}},a=function(){if(!e)for(let n of(e=!0,r))n()};export{n as registerDialogChunkWarmer,a as warmDialogChunk};
+let e;import{useEffect as n}from"react";import{useUIConfig as t}from"./ui-config-context.js";let r=new Set,o=!1,i=function(e){return r.add(e),o&&e(),()=>{r.delete(e)}},a=function(){for(let e of(o=!0,r))e()},l=new Set(["slow-2g","2g"]),u=3e3,g=function(){if("u"<typeof navigator||!1===navigator.onLine)return!1;let{connection:e}=navigator;return e?.saveData!==!0&&!l.has(e?.effectiveType??"")},s=0,c=!1,f=function(){c=!1,s>0&&g()&&a()},m=function(){if(c||o||!g())return;c=!0;let n=()=>{"function"==typeof window.requestIdleCallback?window.requestIdleCallback(f):window.setTimeout(f,200)},t=()=>{e??=performance.now();let t=u-(performance.now()-e);t>0?window.setTimeout(n,t):n()};if("complete"===document.readyState){let[n]=performance.getEntriesByType("navigation");e??=n?.loadEventEnd||performance.now(),t()}else window.addEventListener("load",t,{once:!0})},d=function(e){let{preloadDialog:r="idle"}=t(),o=e&&"idle"===r;n(()=>{if(o)return s+=1,m(),()=>{s-=1}},[o])},w=function(n={}){o=!1,s=0,c=!1,e=void 0,u=n.idleWarmDelayMs??0};export{i as registerDialogChunkWarmer,w as resetDialogChunkWarmingForTests,d as useIdleDialogWarming,a as warmDialogChunk};

package/dist/component-hooks/use-headless-consent-ui.js

@@ -1,2 +1,2 @@
 "use client";
-import{resolveConsentPresentation as e}from"@c15t/core";import{useCallback as s,useContext as r,useEffect as o,useMemo as t}from"react";import{GlobalThemeContext as c}from"../context/theme-context.js";import{useConsentSaveAction as n}from"../draft.js";import{useActiveUI as i,useDismissNotice as a,usePolicyRule as p,useSetActiveUI as l}from"../hooks.js";import{useTheme as m}from"../hooks/use-theme.js";import{useUIConfig as u}from"../ui-config-context.js";let f=function(f){let d=i(),g=p(),{presentation:j}=u(),h=r(c),k=t(()=>({preferences:{scrollLock:h.scrollLock,trapFocus:h.trapFocus,...j?.preferences},prompt:{scrollLock:h.scrollLock,trapFocus:h.trapFocus,...j?.prompt}}),[j,h.scrollLock,h.trapFocus]),{theme:b}=m(),v=t(()=>{let e=b?.consentActions;if(e?.accept||e?.reject||e?.customize||e?.dismiss)return{accept:{...e.default,...e.accept},customize:{...e.default,...e.customize},dismiss:{...e.default,...e.dismiss},reject:{...e.default,...e.reject}}},[b]),A=n(),F=a(),L=l(),_=t(()=>({...e({actionAppearance:v,override:f?.prompt,policy:g,presentation:k,surface:"prompt"}),isVisible:"banner"===d}),[g,k,f?.prompt,d,v]),x=t(()=>({...e({actionAppearance:v,override:f?.preferences,policy:g,presentation:k,surface:"preferences"}),isVisible:"dialog"===d}),[g,k,f?.preferences,d,v]);o(()=>{if(globalThis.process?.env?.NODE_ENV!=="production")for(let e of[..._.diagnostics,...x.diagnostics])console.warn(`c15t presentation: ${e.message}`,e.actions)},[_.diagnostics,x.diagnostics]);let z=s(()=>L("banner"),[L]),C=s(()=>L("dialog"),[L]),V=s(()=>L("none"),[L]),w=s(e=>{switch(e){case"accept":return A("all");case"reject":return A("none");case"save":return A();case"dismiss":return F();case"customize":return L("dialog");default:return}},[A,F,L]);return{activeUI:d,banner:_,closeUI:V,dialog:x,openBanner:z,openDialog:C,performAction:w,performBannerAction:w,performDialogAction:w,saveCustomPreferences:A}};export{f as useHeadlessConsentUI};
+import{actionAppearanceFromTheme as e,resolveConsentPresentation as r}from"@c15t/core";import{useCallback as o,useContext as s,useEffect as t,useMemo as c}from"react";import{GlobalThemeContext as n}from"../context/theme-context.js";import{useConsentSaveAction as a}from"../draft-context.js";import{useActiveUI as i,useDismissNotice as p,usePolicyRule as l,useResolvedPresentation as m,useSetActiveUI as u}from"../hooks.js";import{useTheme as f}from"../hooks/use-theme.js";let d=function(d){let g=i(),k=l(),h=m(),j=s(n),v=c(()=>({preferences:{scrollLock:j.scrollLock,trapFocus:j.trapFocus,...h?.preferences},prompt:{scrollLock:j.scrollLock,trapFocus:j.trapFocus,...h?.prompt}}),[h,j.scrollLock,j.trapFocus]),{theme:F}=f(),L=c(()=>e(F),[F]),_=a(),b=p(),x=u(),A=c(()=>({...r({actionAppearance:L,override:d?.prompt,policy:k,presentation:v,surface:"prompt"}),isVisible:"banner"===g}),[k,v,d?.prompt,g,L]),C=c(()=>({...r({actionAppearance:L,override:d?.preferences,policy:k,presentation:v,surface:"preferences"}),isVisible:"dialog"===g}),[k,v,d?.preferences,g,L]);t(()=>{if("production"!==process.env.NODE_ENV)for(let e of[...A.diagnostics,...C.diagnostics])console.warn(`c15t presentation: ${e.message}`,e.actions)},[A.diagnostics,C.diagnostics]);let V=o(()=>x("banner"),[x]),w=o(()=>x("dialog"),[x]),D=o(()=>x("none"),[x]),E=o(e=>{switch(e){case"accept":return _("all");case"reject":return _("none");case"save":return _();case"dismiss":return b();case"customize":return x("dialog");default:return}},[_,b,x]);return{activeUI:g,banner:A,closeUI:D,dialog:C,openBanner:V,openDialog:w,performAction:E,performBannerAction:E,performDialogAction:E,saveCustomPreferences:_}};export{d as useHeadlessConsentUI};

package/dist/component-hooks/use-headless-iab-consent-ui.js

@@ -1,2 +1,2 @@
 "use client";
-import{resolveIABBannerSummary as e}from"@c15t/iab/headless";import{useCallback as a,useMemo as t}from"react";import{useIAB as r}from"../iab-context.js";import{useConsentManager as s}from"./use-manager.js";let c=function(){let c=r(),{activeUI:l,policyBanner:n,policyDialog:o,setActiveUI:i}=s(),f=t(()=>e(c),[c]),u=a(()=>{c?.setPreferenceCenterTab("vendors"),i("dialog")},[c,i]),d=a(()=>i("none"),[i]),m=a(e=>{e?.tab&&c?.setPreferenceCenterTab(e.tab),i("dialog")},[c,i]),p=a(async e=>{if("accept"===e){c?.acceptAll(),await c?.save();return}if("reject"===e){c?.rejectAll(),await c?.save();return}m()},[c,m]),b=a(async e=>{if("accept"===e){c?.acceptAll(),await c?.save();return}if("reject"===e){c?.rejectAll(),await c?.save();return}await c?.save()},[c]);return{activeUI:l,banner:{...f,scrollLock:n.scrollLock},closeUI:d,dialog:{isReady:!!(c?.gvl||c?.gvlReference),scrollLock:o.scrollLock},iab:c,openDialog:m,openVendorsDialog:u,performBannerAction:p,performDialogAction:b}};export{c as useHeadlessIABConsentUI};
+import{saveIABConsentSurface as e}from"@c15t/core/surface-actions";import{resolveIABBannerSummary as o}from"@c15t/iab/headless";import{useCallback as t,useContext as s,useMemo as r}from"react";import{KernelContext as c}from"../context.js";import{useActiveUI as a,usePreferencesPresentation as n,usePromptPresentation as l,useSetActiveUI as i}from"../hooks.js";import{useIAB as m}from"../iab-context.js";let f=function(){let f=m(),d=s(c),p=a()??"none",u=l(),b=n(),v=i(),g=r(()=>o(f),[f]),j=t(()=>{f?.setPreferenceCenterTab("vendors"),v("dialog")},[f,v]),k=t(()=>v("none"),[v]),_=t(e=>{e?.tab&&f?.setPreferenceCenterTab(e.tab),v("dialog")},[f,v]),A=t(async o=>{f&&("accept"===o?f.acceptAll():"reject"===o&&f.rejectAll(),await (d?e(d,f.save):f.save()))},[f,d]),C=t(async e=>{"customize"===e?_():await A(e)},[_,A]),I=t(e=>A("customize"===e?void 0:e),[A]);return{activeUI:p,banner:{...g,scrollLock:u.scrollLock},closeUI:k,dialog:{isReady:!!(f?.gvl||f?.gvlReference),scrollLock:b.scrollLock},iab:f,openDialog:_,openVendorsDialog:j,performBannerAction:C,performDialogAction:I}};export{f as useHeadlessIABConsentUI};

package/dist/component-hooks/use-panel-trigger.js

@@ -1,2 +1,2 @@
 "use client";
-import{useCallback as e}from"react";import{useActiveUI as r,useHasConsentUI as o,usePromptRequirement as i,useSetActiveUI as t}from"../hooks.js";let n=function(n={}){let{showWhen:s="always",onClick:a}=n,g=t(),l=r(),p=i(),m=o(),u=e(()=>{a?.(),g("dialog")},[a,g]),f="after-prompt"!==s||"none"===p.kind;return{isVisible:m&&"never"!==s&&"dialog"!==l&&f,openDialog:u}};export{n as useConsentDialogTrigger};
+import{useCallback as e}from"react";import{useActiveUI as r,useHasConsentPreferences as o,usePromptRequirement as i,useSetActiveUI as t}from"../hooks.js";let n=function(n={}){let{showWhen:s="always",onClick:a}=n,g=t(),l=r(),p=i(),m=o(),u=e(()=>{a?.(),g("dialog")},[a,g]),f="after-prompt"!==s||"none"===p.kind;return{isVisible:m&&"never"!==s&&"dialog"!==l&&f,openDialog:u}};export{n as useConsentDialogTrigger};

package/dist/components/consent-gate/atoms.js

@@ -0,0 +1 @@
+import{Fragment as t,jsx as e,jsxs as o}from"react/jsx-runtime";import s from"@c15t/ui/styles/components/consent-gate";import{forwardRef as r}from"react";import{useTranslations as n}from"../../component-hooks/use-translations.js";import{useUIConfig as a}from"../../ui-config-context.js";import{getSlotProps as i,mergeSlotProps as l}from"../../utils/merge-slot-props.js";import{FIRST_PAINT_SHEETS as m}from"../shared/first-paint-sheets.js";import{Box as c}from"../shared/primitives/box.js";import{ConsentButton as p}from"../shared/primitives/button.js";import{SurfaceStyles as d}from"../shared/surface-styles.js";let f=r(({children:r,...n},a)=>o(t,{children:[e(d,{sheets:m,noStyle:n.noStyle}),e(c,{ref:a,baseClassName:s.placeholder,"data-testid":"consent-gate-placeholder",slotKey:"consent-gate.root",...n,children:r})]})),u=r(({children:t,category:o,...r},a)=>{let{consentGate:i,consentTypes:l}=n(),m=o&&i?.title?i.title.replace("{category}",l?.[o]?.title??o):void 0;return e(c,{ref:a,baseClassName:s.title,"data-testid":"consent-gate-title",slotKey:"consent-gate.title",...r,children:t??m})}),g=r(({children:t,category:o,className:s,style:r,...m},c)=>{let{consentGate:d,consentTypes:f}=n(),{components:u}=a(),g=l(i(u,"consent-gate.button"),{className:s,style:r}),h=f?.[o]?.title??o,y=d?.actionButton?.replace("{category}",h);return e(p,{mode:"stroke",size:"small",variant:"primary",...g,...m,ref:c,action:"open-consent-dialog",category:o,"data-testid":"consent-gate-button",children:t??y})});f.displayName="ConsentGateRoot",u.displayName="ConsentGateTitle",g.displayName="ConsentGateButton";export{g as ConsentGateButton,f as ConsentGateRoot,u as ConsentGateTitle};

package/dist/components/consent-gate/consent-gate.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as r,useEffect as t}from"react";import{useTranslations as s}from"../../component-hooks/use-translations.js";import{usePolicyCategories as i,usePolicyScopeMode as l,useRegisterConsentCategories as n}from"../../hooks.js";import{useIsHydrated as c}from"../../hooks/use-is-hydrated.js";import{useCategoryAllowed as a}from"../../kernel-selector.js";import{ConsentGateButton as m,ConsentGateRoot as d,ConsentGateTitle as p}from"./atoms.js";let y=({category:r,policyBlocked:t,policyBlockedMessage:s})=>o(d,{children:[e(p,{category:r,children:t?s??"This content is unavailable under your region's consent policy.":void 0}),t?null:e(m,{category:r})]}),u=r(({children:o,category:r,placeholder:m,noStyle:d,className:p,theme:u,...h},f)=>{let k=a(r),j=c(),g=i(),v=l(),B=n(),{consentGate:x}=s(),C="necessary"!==r&&!g.includes("*")&&!g.includes(r);return t(()=>{B([r])},[r,B]),e("div",{ref:f,className:p,...h,children:k?j?o:null:m||e(y,{category:r,policyBlocked:"strict"===v&&C,policyBlockedMessage:x?.policyBlocked})})});u.displayName="ConsentGate";let h=u;export{h as ConsentGate};

package/dist/components/consent-gate/frame.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{ConsentGate as o}from"./consent-gate.js";import*as n from"./atoms.js";let a=new Set,r=function(t,e){"production"===process.env.NODE_ENV||a.has(t)||(a.add(t),console.warn(`c15t: \`${t}\` is deprecated and will be removed in a future major release. Use \`${e}\` instead.`))},s=function(o,n,a){let s=e((e,s)=>(r(n,a),t(o,{...e,ref:s})));return s.displayName=n,s},m=s(n.ConsentGateRoot,"FrameRoot","ConsentGate.Root"),i=s(n.ConsentGateTitle,"FrameTitle","ConsentGate.Title"),l=s(n.ConsentGateButton,"FrameButton","ConsentGate.Button"),u=Object.assign(s(o,"Frame","ConsentGate"),{Button:l,Root:m,Title:i});export{u as Frame,l as FrameButton,m as FrameRoot,i as FrameTitle};

package/dist/components/consent-gate/index.js

@@ -0,0 +1,2 @@
+"use client";
+import{ConsentGate as t}from"./consent-gate.js";import*as e from"./atoms.js";let o=Object.assign(t,{Button:e.ConsentGateButton,Root:e.ConsentGateRoot,Title:e.ConsentGateTitle});var n=e.ConsentGateButton,a=e.ConsentGateRoot,s=e.ConsentGateTitle;export{Frame,FrameButton,FrameRoot,FrameTitle}from"./frame.js";export{n as ConsentGateButton,a as ConsentGateRoot,s as ConsentGateTitle,o as ConsentGate};

package/dist/components/consent-preferences-link/consent-preferences-link.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{ConsentButton as i}from"../shared/primitives/button.js";import{useHasConsentUI as n,usePolicyRule as r}from"../../hooks.js";let e=o(({children:o,noStyle:e=!0,...a},s)=>{let l=r();return n()?t(i,{ref:s,action:"open-consent-dialog",noStyle:e,"data-testid":"consent-dialog-link","data-c15t-rights":l.rights.join(" "),...a,children:o}):null});e.displayName="ConsentDialogLink";export{e as ConsentDialogLink};
+import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{ConsentButton as i}from"../shared/primitives/button.js";import{useHasConsentPreferences as n,usePolicyRule as r}from"../../hooks.js";let e=o(({children:o,noStyle:e=!0,...a},s)=>{let l=r();return n()?t(i,{ref:s,action:"open-consent-dialog",noStyle:e,"data-testid":"consent-dialog-link","data-c15t-rights":l.rights.join(" "),...a,children:o}):null});e.displayName="ConsentDialogLink";export{e as ConsentDialogLink};

package/dist/components/iab-panel/atoms/card.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime";import e from"@c15t/ui/styles/components/iab-consent-dialog";import{forwardRef as r,useCallback as o,useEffect as i,useRef as a,useState as n}from"react";import{useFocusTrap as s}from"../../../hooks/use-focus-trap.js";import{useTheme as m}from"../../../hooks/use-theme.js";import{useUIConfig as l}from"../../../ui-config-context.js";import{cnExt as c}from"../../../utils/cn.js";import{mergeSlotProps as d}from"../../../utils/merge-slot-props.js";import{useIABTranslations as u}from"../use-iab-translations.js";let p=r(({children:r,className:p,"data-testid":f,...b},g)=>{let{trapFocus:j}=m(),{components:C}=l(),h=a(null),x=o(t=>{if(h.current=t,"function"==typeof g)return g(t);g&&(g.current=t)},[g]),A=u(),[y,I]=n(!1);return s(!!j,h),i(()=>{let t=requestAnimationFrame(()=>I(!0));return()=>cancelAnimationFrame(t)},[]),t("div",{ref:x,...d(C?.["iab-dialog"]?.card,{baseClassName:c(e.card,y?e.contentVisible:e.contentHidden),className:p,"data-testid":f??"iab-consent-dialog-card",...b}),"aria-label":A.preferenceCenter.title,"aria-modal":j?"true":void 0,role:"dialog",tabIndex:-1,children:r})});p.displayName="IABConsentDialogCard";export{p as IABConsentDialogCard};
+import{jsx as t}from"react/jsx-runtime";import e from"@c15t/ui/styles/components/iab-consent-dialog";import{forwardRef as r,useCallback as i,useEffect as o,useRef as a,useState as n}from"react";import{useFocusTrap as s}from"../../../hooks/use-focus-trap.js";import{useTheme as l}from"../../../hooks/use-theme.js";import{useUIConfig as m}from"../../../ui-config-context.js";import{cnExt as c}from"../../../utils/cn.js";import{mergeSlotProps as d}from"../../../utils/merge-slot-props.js";import{useIABTranslations as u}from"../use-iab-translations.js";let p=r(({children:r,className:p,"data-testid":f,...b},g)=>{let{trapFocus:j}=l(),{components:C}=m(),h=a(null),x=i(t=>{if(h.current=t,"function"==typeof g)return g(t);g&&(g.current=t)},[g]),y=u(),[A,F]=n(!1);return s(!!j,h,{initialFocus:"first-tabbable"}),o(()=>{let t=requestAnimationFrame(()=>F(!0));return()=>cancelAnimationFrame(t)},[]),t("div",{ref:x,"aria-describedby":"iab-consent-dialog-description",...d(C?.["iab-dialog"]?.card,{baseClassName:c(e.card,A?e.contentVisible:e.contentHidden),className:p,"data-testid":f??"iab-consent-dialog-card",...b}),"aria-label":y.preferenceCenter.title,"aria-modal":j?"true":void 0,role:"dialog",tabIndex:-1,children:r})});p.displayName="IABConsentDialogCard";export{p as IABConsentDialogCard};

package/dist/components/iab-panel/atoms/feature-item.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{iabDisplayTestId as t}from"@c15t/iab/headless";import o from"@c15t/ui/styles/components/iab-consent-dialog";import{useState as n}from"react";import{useTheme as i}from"../../../hooks/use-theme.js";import{useUIConfig as s}from"../../../ui-config-context.js";import{mergeSlotProps as l}from"../../../utils/merge-slot-props.js";import{useIABTranslations as a}from"../use-iab-translations.js";import*as p from"../../shared/ui/preference-item/index.js";let d=({feature:d,testId:m})=>{let{components:c}=s(),{noStyle:h}=i(),[u,g]=n(!1),[f,v]=n(!1),[y,C]=n(!1),S=a(),N=l(c?.["iab-purpose-item"]?.header,{baseClassName:o.purposeHeader,noStyle:h}),x=l(c?.["iab-purpose-item"]?.examples,{noStyle:h}),b=l(c?.["iab-purpose-item"]?.vendors,{noStyle:h});return r(p.Root,{className:h?void 0:o.purposeItem,"data-testid":m??t("feature",d.id),noStyle:!0,onOpenChange:g,open:u,slotKey:"iab-purpose-item.root",children:[e("div",{...N,children:r(p.Trigger,{className:h?void 0:o.purposeTrigger,noStyle:!0,slotKey:"iab-purpose-item.trigger",children:[e(p.Leading,{noStyle:!0,children:e("svg",{"aria-hidden":"true",className:o.purposeArrow,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:u?e("path",{d:"M19 9l-7 7-7-7"}):e("path",{d:"M9 5l7 7-7 7"})})}),r(p.Header,{className:o.purposeInfo,noStyle:!0,children:[e(p.Title,{className:o.purposeName,noStyle:!0,children:d.name}),e(p.Meta,{className:o.purposeMeta,noStyle:!0,children:S.preferenceCenter.purposeItem.partners.replace("{count}",String(d.vendors.length))})]})]})}),r(p.Content,{innerClassName:h?void 0:o.purposeContent,innerSlotKey:"iab-purpose-item.content",noStyle:h,children:[e("p",{className:o.purposeDescription,children:d.description}),d.illustrations.length>0&&e("div",{...x,children:r(p.Root,{noStyle:!0,onOpenChange:v,open:f,children:[r(p.Trigger,{className:o.examplesToggle,noStyle:!0,children:[e("svg",{"aria-hidden":"true",style:{height:"0.75rem",width:"0.75rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:f?e("path",{d:"M19 9l-7 7-7-7"}):e("path",{d:"M9 5l7 7-7 7"})}),S.preferenceCenter.purposeItem.examples," (",d.illustrations.length,")"]}),e(p.Content,{noStyle:h,children:e("ul",{className:o.examplesList,children:d.illustrations.map((r,t)=>e("li",{children:r},t))})})]})}),d.vendors.length>0&&e("div",{...b,children:r(p.Root,{noStyle:!0,onOpenChange:C,open:y,children:[r(p.Trigger,{className:o.vendorsToggle,noStyle:!0,children:[e("svg",{"aria-hidden":"true",style:{height:"0.75rem",width:"0.75rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:y?e("path",{d:"M19 9l-7 7-7-7"}):e("path",{d:"M9 5l7 7-7 7"})}),S.preferenceCenter.vendorList.iabVendorsHeading," (",d.vendors.length,")"]}),e(p.Content,{noStyle:h,children:e("ul",{className:o.examplesList,children:d.vendors.map(r=>e("li",{children:r.name},r.id))})})]})})]})]})};export{d as FeatureItem};

package/dist/components/iab-panel/atoms/header.js

@@ -1,2 +1,2 @@
 "use client";
-import{Fragment as e,jsx as t,jsxs as o}from"react/jsx-runtime";import r from"@c15t/ui/styles/components/iab-consent-dialog";import{forwardRef as i}from"react";import{useTranslations as n}from"../../../component-hooks/use-translations.js";import{useSetActiveUI as s}from"../../../hooks.js";import{useUIConfig as l}from"../../../ui-config-context.js";import{mergeSlotProps as a}from"../../../utils/merge-slot-props.js";import{useIABTranslations as c}from"../use-iab-translations.js";let m=i(({children:i,headerTitle:m,description:d,showCloseButton:p=!0,className:h},f)=>{let u=s(),{components:g}=l(),b=c(),{common:x}=n();return t("div",{ref:f,...a(g?.["iab-dialog"]?.header,{baseClassName:r.header,className:h}),children:i||o(e,{children:[o("div",{className:r.headerContent,children:[t("h2",{className:r.title,children:m??b.preferenceCenter.title}),t("p",{className:r.description,children:d??b.preferenceCenter.description})]}),p&&t("button",{type:"button",onClick:()=>{u("none")},className:r.closeButton,"aria-label":x.close,"data-testid":"iab-consent-dialog-close",children:o("svg",{style:{height:"1rem",width:"1rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})})});m.displayName="IABConsentDialogHeader";export{m as IABConsentDialogHeader};
+import{Fragment as e,jsx as o,jsxs as t}from"react/jsx-runtime";import r from"@c15t/ui/styles/components/iab-consent-dialog";import{forwardRef as i}from"react";import{useTranslations as n}from"../../../component-hooks/use-translations.js";import{useSetActiveUI as s}from"../../../hooks.js";import{useUIConfig as a}from"../../../ui-config-context.js";import{mergeSlotProps as l}from"../../../utils/merge-slot-props.js";import{useIABTranslations as c}from"../use-iab-translations.js";let m=i(({children:i,headerTitle:m,description:d,showCloseButton:p=!0,className:h},f)=>{let u=s(),{components:g}=a(),b=c(),{common:x}=n();return o("div",{ref:f,...l(g?.["iab-dialog"]?.header,{baseClassName:r.header,className:h}),children:i||t(e,{children:[t("div",{className:r.headerContent,children:[o("h2",{className:r.title,children:m??b.preferenceCenter.title}),o("p",{className:r.description,id:"iab-consent-dialog-description",children:d??b.preferenceCenter.description})]}),p&&o("button",{type:"button",onClick:()=>{u("none")},className:r.closeButton,"aria-label":x.close,"data-testid":"iab-consent-dialog-close",children:t("svg",{style:{height:"1rem",width:"1rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[o("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),o("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})})});m.displayName="IABConsentDialogHeader";export{m as IABConsentDialogHeader};

package/dist/components/iab-panel/atoms/purpose-item.js

@@ -1,2 +1,2 @@
 "use client";
-import{Fragment as e,jsx as t,jsxs as r}from"react/jsx-runtime";import{iabDisplayTestId as n}from"@c15t/iab/headless";import i from"@c15t/ui/styles/components/iab-consent-dialog";import{useState as o}from"react";import{useTheme as s}from"../../../hooks/use-theme.js";import{useUIConfig as l}from"../../../ui-config-context.js";import{mergeSlotProps as a}from"../../../utils/merge-slot-props.js";import{useIABTranslations as c}from"../use-iab-translations.js";import*as d from"../../shared/ui/preference-item/index.js";import*as p from"../../shared/ui/switch/index.js";let m={},h={},g=({vendor:e,isConsented:n,onToggle:o,onClick:s,isLegitimateInterest:l=!1,isLegitimateInterestAllowed:a=!0,onLegitimateInterestToggle:d})=>{let m=c(),h=l&&d;return r("div",{className:`${i.vendorRow} ${l?i.vendorRowLi:""}`,children:[r("div",{className:i.vendorInfo,children:[r("button",{type:"button",onClick:s,className:i.vendorName,children:[t("span",{children:e.name}),e.isCustom&&r("svg",{className:i.customVendorIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-label":m.common.customPartner,children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),t("path",{d:"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"})]})]}),r("div",{className:i.vendorDetails,children:[l&&t("span",{className:`${i.vendorDetail} ${i.vendorDetailLi}`,children:m.preferenceCenter.purposeItem.legitimateInterest}),e.usesCookies&&t("span",{className:i.vendorDetail,children:m.preferenceCenter.vendorList.usesCookies}),e.usesNonCookieAccess&&t("span",{className:i.vendorDetail,children:m.preferenceCenter.vendorList.nonCookieAccess})]})]}),h?t("button",{type:"button",onClick:()=>d(!a),className:`${i.objectButton} ${a?"":i.objectButtonActive}`,"aria-pressed":!a,children:a?m.preferenceCenter.purposeItem.objectButton:m.preferenceCenter.purposeItem.objected}):t(p.Root,{"aria-label":e.name,checked:n,onCheckedChange:o,size:"small"})]})},u=({purpose:u,testId:v,isEnabled:C,onToggle:f,vendorConsents:I,onVendorToggle:N,onVendorClick:k,isLocked:y=!1,vendorLegitimateInterests:b=m,onVendorLegitimateInterestToggle:x,purposeLegitimateInterests:S=h,onPurposeLegitimateInterestToggle:M})=>{let{components:L}=l(),{noStyle:w}=s(),[T,B]=o(!1),[j,W]=o(!1),[$,A]=o(!1),R=c(),D=u.vendors.filter(e=>e.usesLegitimateInterest),O=u.vendors.filter(e=>!e.usesLegitimateInterest),P=e=>I[String(e)]??!1,H=e=>b[String(e)]??!0,U=S[u.id]??!0,V=O.filter(e=>!e.isCustom),z=O.filter(e=>e.isCustom),K=D.filter(e=>!e.isCustom),E=D.filter(e=>e.isCustom),Y=a(L?.["iab-purpose-item"]?.header,{baseClassName:i.purposeHeader,noStyle:w}),q=a(L?.["iab-purpose-item"]?.legitimateInterest,{baseClassName:i.purposeLiSection,noStyle:w}),F=a(L?.["iab-purpose-item"]?.examples,{noStyle:w}),G=a(L?.["iab-purpose-item"]?.vendors,{noStyle:w});return r(d.Root,{className:w?void 0:i.purposeItem,"data-testid":v??n("purpose",u.id),noStyle:!0,onOpenChange:B,open:T,slotKey:"iab-purpose-item.root",children:[r("div",{...Y,children:[r(d.Trigger,{className:w?void 0:i.purposeTrigger,noStyle:!0,slotKey:"iab-purpose-item.trigger",children:[t(d.Leading,{noStyle:!0,children:t("svg",{className:i.purposeArrow,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:T?t("path",{d:"M19 9l-7 7-7-7"}):t("path",{d:"M9 5l7 7-7 7"})})}),r(d.Header,{className:i.purposeInfo,noStyle:!0,children:[r(d.Title,{className:i.purposeName,noStyle:!0,children:[u.name,y&&r("svg",{className:i.lockIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("rect",{x:"3",y:"11",width:"18",height:"11",rx:"2",ry:"2"}),t("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]})]}),t(d.Meta,{className:i.purposeMeta,noStyle:!0,children:R.preferenceCenter.purposeItem.partners.replace("{count}",String(u.vendors.length))}),D.length>0&&r(d.Auxiliary,{className:i.legitimateInterestBadge,noStyle:!0,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),R.preferenceCenter.purposeItem.vendorsUseLegitimateInterest.replace("{count}",String(D.length))]})]})]}),t(d.Control,{noStyle:!0,children:t(p.Root,{"aria-label":u.name,checked:C,onCheckedChange:e=>{for(let t of(f(e),O))N(t.id,e)},disabled:y})})]}),r(d.Content,{innerClassName:w?void 0:i.purposeContent,innerSlotKey:"iab-purpose-item.content",noStyle:w,children:[t("p",{className:i.purposeDescription,children:u.description}),D.length>0&&M&&r("div",{...q,children:[r("div",{className:i.purposeLiSectionHeader,children:[r("div",{className:i.purposeLiInfo,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),t("span",{children:R.preferenceCenter.purposeItem.vendorsUseLegitimateInterest.replace("{count}",String(D.length))})]}),t("button",{type:"button",onClick:()=>{let e=!U;if(M&&M(u.id,e),x)for(let t of D)x(t.id,e)},className:`${i.objectButton} ${U?"":i.objectButtonActive}`,"aria-pressed":!U,children:U?R.preferenceCenter.purposeItem.objectButton:R.preferenceCenter.purposeItem.objected})]}),t("p",{className:i.liExplanation,children:R.preferenceCenter.purposeItem.rightToObject})]}),D.length>0&&!M&&r("div",{className:i.legitimateInterestBadge,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),R.preferenceCenter.purposeItem.vendorsUseLegitimateInterest.replace("{count}",String(D.length))]}),u.illustrations&&u.illustrations.length>0&&t("div",{...F,children:r(d.Root,{noStyle:!0,onOpenChange:W,open:j,children:[r(d.Trigger,{className:i.examplesToggle,noStyle:!0,children:[t("svg",{style:{height:"0.75rem",width:"0.75rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:j?t("path",{d:"M19 9l-7 7-7-7"}):t("path",{d:"M9 5l7 7-7 7"})}),R.preferenceCenter.purposeItem.examples," (",u.illustrations.length,")"]}),t(d.Content,{noStyle:w,children:t("ul",{className:i.examplesList,children:u.illustrations.map((e,r)=>t("li",{children:e},r))})})]})}),t("div",{...G,children:r(d.Root,{noStyle:!0,onOpenChange:A,open:$,children:[r(d.Trigger,{className:i.vendorsToggle,noStyle:!0,children:[t("svg",{style:{height:"0.75rem",width:"0.75rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:$?t("path",{d:"M19 9l-7 7-7-7"}):t("path",{d:"M9 5l7 7-7 7"})}),R.preferenceCenter.purposeItem.partnersUsingPurpose," (",u.vendors.length,")"]}),r(d.Content,{innerClassName:i.vendorSection,noStyle:w,children:[V.length>0&&r(e,{children:[r("h5",{className:i.vendorSectionTitle,children:[R.preferenceCenter.purposeItem.withYourPermission," (",V.length,")"]}),V.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id)},e.id))]}),K.length>0&&r(e,{children:[r("h5",{className:`${i.vendorSectionTitle} ${i.vendorSectionTitleLi}`,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),R.preferenceCenter.purposeItem.legitimateInterest," (",K.length,")"]}),t("p",{className:i.liExplanation,children:R.preferenceCenter.purposeItem.rightToObject}),K.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id),isLegitimateInterest:!0,isLegitimateInterestAllowed:H(e.id),onLegitimateInterestToggle:x?t=>x(e.id,t):void 0},e.id))]}),(z.length>0||E.length>0)&&r("div",{className:i.customVendorPurposeSection,children:[r("h5",{className:i.vendorSectionTitleCustom,children:[r("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),t("path",{d:"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"})]}),R.preferenceCenter.vendorList.customVendorsHeading," (",z.length+E.length,")"]}),z.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id)},e.id)),E.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id),isLegitimateInterest:!0,isLegitimateInterestAllowed:H(e.id),onLegitimateInterestToggle:x?t=>x(e.id,t):void 0},e.id))]})]})]})})]})]})};export{u as PurposeItem};
+import{Fragment as e,jsx as t,jsxs as r}from"react/jsx-runtime";import{iabDisplayTestId as n}from"@c15t/iab/headless";import i from"@c15t/ui/styles/components/iab-consent-dialog";import{useState as o}from"react";import{useTheme as s}from"../../../hooks/use-theme.js";import{useUIConfig as l}from"../../../ui-config-context.js";import{mergeSlotProps as a}from"../../../utils/merge-slot-props.js";import{useIABTranslations as c}from"../use-iab-translations.js";import*as d from"../../shared/ui/preference-item/index.js";import*as p from"../../shared/ui/switch/index.js";let m={},h={},g=({vendor:e,isConsented:n,onToggle:o,onClick:s,isLegitimateInterest:l=!1,isLegitimateInterestAllowed:a=!0,onLegitimateInterestToggle:d})=>{let m=c(),h=l&&d;return r("div",{className:`${i.vendorRow} ${l?i.vendorRowLi:""}`,children:[r("div",{className:i.vendorInfo,children:[r("button",{type:"button",onClick:s,className:i.vendorName,children:[t("span",{children:e.name}),e.isCustom&&r("svg",{className:i.customVendorIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-label":m.common.customPartner,children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),t("path",{d:"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"})]})]}),r("div",{className:i.vendorDetails,children:[l&&t("span",{className:`${i.vendorDetail} ${i.vendorDetailLi}`,children:m.preferenceCenter.purposeItem.legitimateInterest}),e.usesCookies&&t("span",{className:i.vendorDetail,children:m.preferenceCenter.vendorList.usesCookies}),e.usesNonCookieAccess&&t("span",{className:i.vendorDetail,children:m.preferenceCenter.vendorList.nonCookieAccess})]})]}),h?t("button",{type:"button",onClick:()=>d(!a),className:`${i.objectButton} ${a?"":i.objectButtonActive}`,"aria-pressed":!a,children:a?m.preferenceCenter.purposeItem.objectButton:m.preferenceCenter.purposeItem.objected}):t(p.Root,{"aria-label":e.name,checked:n,onCheckedChange:o,size:"small"})]})},u=({purpose:u,testId:v,isEnabled:C,onToggle:f,vendorConsents:I,onVendorToggle:N,onVendorClick:k,isLocked:y=!1,vendorLegitimateInterests:b=m,onVendorLegitimateInterestToggle:x,purposeLegitimateInterests:S=h,onPurposeLegitimateInterestToggle:M})=>{let{components:L}=l(),{noStyle:w}=s(),[B,T]=o(!1),[j,W]=o(!1),[$,A]=o(!1),R=c(),D=u.vendors.filter(e=>e.usesLegitimateInterest),O=u.vendors.filter(e=>!e.usesLegitimateInterest),P=e=>I[String(e)]??!1,H=e=>b[String(e)]??!0,U=S[u.id]??!0,V=O.filter(e=>!e.isCustom),z=O.filter(e=>e.isCustom),K=D.filter(e=>!e.isCustom),E=D.filter(e=>e.isCustom),Y=!1!==u.hasConsentBasis||!M,q=a(L?.["iab-purpose-item"]?.header,{baseClassName:i.purposeHeader,noStyle:w}),F=a(L?.["iab-purpose-item"]?.legitimateInterest,{baseClassName:i.purposeLiSection,noStyle:w}),G=a(L?.["iab-purpose-item"]?.examples,{noStyle:w}),J=a(L?.["iab-purpose-item"]?.vendors,{noStyle:w});return r(d.Root,{className:w?void 0:i.purposeItem,"data-testid":v??n("purpose",u.id),noStyle:!0,onOpenChange:T,open:B,slotKey:"iab-purpose-item.root",children:[r("div",{...q,children:[r(d.Trigger,{className:w?void 0:i.purposeTrigger,noStyle:!0,slotKey:"iab-purpose-item.trigger",children:[t(d.Leading,{noStyle:!0,children:t("svg",{className:i.purposeArrow,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:B?t("path",{d:"M19 9l-7 7-7-7"}):t("path",{d:"M9 5l7 7-7 7"})})}),r(d.Header,{className:i.purposeInfo,noStyle:!0,children:[r(d.Title,{className:i.purposeName,noStyle:!0,children:[u.name,y&&r("svg",{className:i.lockIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("rect",{x:"3",y:"11",width:"18",height:"11",rx:"2",ry:"2"}),t("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]})]}),t(d.Meta,{className:i.purposeMeta,noStyle:!0,children:R.preferenceCenter.purposeItem.partners.replace("{count}",String(u.vendors.length))}),D.length>0&&r(d.Auxiliary,{className:i.legitimateInterestBadge,noStyle:!0,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),R.preferenceCenter.purposeItem.vendorsUseLegitimateInterest.replace("{count}",String(D.length))]})]})]}),Y&&t(d.Control,{noStyle:!0,children:t(p.Root,{"aria-label":u.name,checked:C,onCheckedChange:e=>{for(let t of(f(e),O))N(t.id,e)},disabled:y})})]}),r(d.Content,{innerClassName:w?void 0:i.purposeContent,innerSlotKey:"iab-purpose-item.content",noStyle:w,children:[t("p",{className:i.purposeDescription,children:u.description}),D.length>0&&M&&r("div",{...F,children:[r("div",{className:i.purposeLiSectionHeader,children:[r("div",{className:i.purposeLiInfo,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),t("span",{children:R.preferenceCenter.purposeItem.vendorsUseLegitimateInterest.replace("{count}",String(D.length))})]}),t("button",{type:"button",onClick:()=>{let e=!U;if(M&&M(u.id,e),x)for(let t of D)x(t.id,e)},className:`${i.objectButton} ${U?"":i.objectButtonActive}`,"aria-pressed":!U,children:U?R.preferenceCenter.purposeItem.objectButton:R.preferenceCenter.purposeItem.objected})]}),t("p",{className:i.liExplanation,children:R.preferenceCenter.purposeItem.rightToObject})]}),D.length>0&&!M&&r("div",{className:i.legitimateInterestBadge,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),R.preferenceCenter.purposeItem.vendorsUseLegitimateInterest.replace("{count}",String(D.length))]}),u.illustrations&&u.illustrations.length>0&&t("div",{...G,children:r(d.Root,{noStyle:!0,onOpenChange:W,open:j,children:[r(d.Trigger,{className:i.examplesToggle,noStyle:!0,children:[t("svg",{style:{height:"0.75rem",width:"0.75rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:j?t("path",{d:"M19 9l-7 7-7-7"}):t("path",{d:"M9 5l7 7-7 7"})}),R.preferenceCenter.purposeItem.examples," (",u.illustrations.length,")"]}),t(d.Content,{noStyle:w,children:t("ul",{className:i.examplesList,children:u.illustrations.map((e,r)=>t("li",{children:e},r))})})]})}),t("div",{...J,children:r(d.Root,{noStyle:!0,onOpenChange:A,open:$,children:[r(d.Trigger,{className:i.vendorsToggle,noStyle:!0,children:[t("svg",{style:{height:"0.75rem",width:"0.75rem"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:$?t("path",{d:"M19 9l-7 7-7-7"}):t("path",{d:"M9 5l7 7-7 7"})}),R.preferenceCenter.purposeItem.partnersUsingPurpose," (",u.vendors.length,")"]}),r(d.Content,{innerClassName:i.vendorSection,noStyle:w,children:[V.length>0&&r(e,{children:[r("h5",{className:i.vendorSectionTitle,children:[R.preferenceCenter.purposeItem.withYourPermission," (",V.length,")"]}),V.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id)},e.id))]}),K.length>0&&r(e,{children:[r("h5",{className:`${i.vendorSectionTitle} ${i.vendorSectionTitleLi}`,children:[t("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M12 3v18M3 12h18M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"})}),R.preferenceCenter.purposeItem.legitimateInterest," (",K.length,")"]}),t("p",{className:i.liExplanation,children:R.preferenceCenter.purposeItem.rightToObject}),K.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id),isLegitimateInterest:!0,isLegitimateInterestAllowed:H(e.id),onLegitimateInterestToggle:x?t=>x(e.id,t):void 0},e.id))]}),(z.length>0||E.length>0)&&r("div",{className:i.customVendorPurposeSection,children:[r("h5",{className:i.vendorSectionTitleCustom,children:[r("svg",{className:i.legitimateInterestIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("circle",{cx:"12",cy:"12",r:"10"}),t("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),t("path",{d:"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"})]}),R.preferenceCenter.vendorList.customVendorsHeading," (",z.length+E.length,")"]}),z.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id)},e.id)),E.map(e=>t(g,{vendor:e,isConsented:P(e.id),onToggle:t=>N(e.id,t),onClick:()=>k(e.id),isLegitimateInterest:!0,isLegitimateInterestAllowed:H(e.id),onLegitimateInterestToggle:x?t=>x(e.id,t):void 0},e.id))]})]})]})})]})]})};export{u as PurposeItem};

package/dist/components/iab-panel/atoms/root.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{isDialogDismissKey as t}from"@c15t/ui/primitives/dialog";import r from"@c15t/ui/styles/components/iab-consent-dialog";import{useEffect as i,useMemo as n,useState as m}from"react";import{createPortal as a}from"react-dom";import{ConsentTrackingContext as s}from"../../../context/consent-tracking-context.js";import{LocalThemeContext as l}from"../../../context/theme-context.js";import{useSetActiveUI as c}from"../../../hooks.js";import{useIABConsentManager as d}from"../../../hooks/use-iab-manager.js";import{useIsHydrated as u}from"../../../hooks/use-is-hydrated.js";import{useScrollLock as p}from"../../../hooks/use-scroll-lock.js";import{useTextDirection as f}from"../../../hooks/use-text-direction.js";import{useUIConfig as g}from"../../../ui-config-context.js";import{cnExt as b}from"../../../utils/cn.js";import{mergeSlotProps as j}from"../../../utils/merge-slot-props.js";import{IABConsentDialogOverlay as k}from"./overlay.js";let v=["iab"],h=({children:h,open:x,models:y=v,noStyle:A,disableAnimation:F,scrollLock:L,trapFocus:C,uiSource:D})=>{let{activeUI:q,translationConfig:w,iab:B,policyDialog:E,model:I}=d({preferences:{scrollLock:L,trapFocus:C}}),N=c(),{components:P}=g(),R=f(w.defaultLanguage),T=u(),[H,O]=m(!1),S=null!==I&&y.includes(I)&&(x??"dialog"===q),V=E.blocking,_=n(()=>({disableAnimation:F,noStyle:A,scrollLock:V,trapFocus:V}),[F,A,V]);p(!!(S&&V)),i(()=>{if(!S)return;let o=o=>{t(o.key)&&(o.preventDefault(),N("none"))};return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[S,N]),i(()=>{if(S){let o=requestAnimationFrame(()=>O(!0));return()=>cancelAnimationFrame(o)}if(F){let o=requestAnimationFrame(()=>O(!1));return()=>cancelAnimationFrame(o)}let o=setTimeout(()=>{O(!1)},150);return()=>clearTimeout(o)},[S,F]);let z=j(P?.["iab-dialog"]?.root,{baseClassName:b(r.root,F?void 0:H?r.dialogVisible:r.dialogHidden)}),G=n(()=>({uiSource:D??"iab_dialog"}),[D]);return T&&B?.config.enabled&&(S||H)?a(o(s.Provider,{value:G,children:e(l.Provider,{value:_,children:[o(k,{isOpen:S}),o("div",{...z,"data-testid":"iab-consent-dialog-root",dir:R,children:h})]})}),document.body):null};h.displayName="IABConsentDialogRoot";export{h as IABConsentDialogRoot};
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import{isDialogDismissKey as t}from"@c15t/ui/primitives/dialog";import r from"@c15t/ui/styles/components/iab-consent-dialog";import{useEffect as i,useMemo as n,useState as s}from"react";import{createPortal as m}from"react-dom";import{ConsentTrackingContext as a}from"../../../context/consent-tracking-context.js";import{LocalThemeContext as l}from"../../../context/theme-context.js";import{useSetActiveUI as c}from"../../../hooks.js";import{useIABConsentManager as d}from"../../../hooks/use-iab-manager.js";import{useIsHydrated as u}from"../../../hooks/use-is-hydrated.js";import{useScrollLock as p}from"../../../hooks/use-scroll-lock.js";import{useTextDirection as f}from"../../../hooks/use-text-direction.js";import{useUIConfig as g}from"../../../ui-config-context.js";import{cnExt as h}from"../../../utils/cn.js";import{mergeSlotProps as j}from"../../../utils/merge-slot-props.js";import{IAB_DIALOG_SHEETS as b}from"../../shared/iab-dialog-sheets.js";import{SurfaceStyles as k}from"../../shared/surface-styles.js";import{IABConsentDialogOverlay as v}from"./overlay.js";let y=["iab"],x=({children:x,open:A,models:F=y,noStyle:L,disableAnimation:C,scrollLock:D,trapFocus:q,uiSource:w})=>{let{activeUI:B,translationConfig:E,iab:I,policyDialog:N,model:P}=d({preferences:{scrollLock:D,trapFocus:q}}),R=c(),{components:S}=g(),T=f(E.defaultLanguage),H=u(),[O,V]=s(!1),_=null!==P&&F.includes(P)&&(A??"dialog"===B),z=N.blocking,G=n(()=>({disableAnimation:C,noStyle:L,scrollLock:z,trapFocus:z}),[C,L,z]);p(!!(_&&z)),i(()=>{if(!_)return;let o=o=>{t(o.key)&&(o.preventDefault(),R("none"))};return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[_,R]),i(()=>{if(_){let o=requestAnimationFrame(()=>V(!0));return()=>cancelAnimationFrame(o)}if(C){let o=requestAnimationFrame(()=>V(!1));return()=>cancelAnimationFrame(o)}let o=setTimeout(()=>{V(!1)},150);return()=>clearTimeout(o)},[_,C]);let J=j(S?.["iab-dialog"]?.root,{baseClassName:h(r.root,C?void 0:O?r.dialogVisible:r.dialogHidden)}),K=n(()=>({uiSource:w??"iab_dialog"}),[w]);return H&&I?.config.enabled&&(_||O)?m(o(a.Provider,{value:K,children:e(l.Provider,{value:G,children:[o(k,{sheets:b,noStyle:L}),o(v,{isOpen:_}),o("div",{...J,"data-testid":"iab-consent-dialog-root",dir:T,children:x})]})}),document.body):null};x.displayName="IABConsentDialogRoot";export{x as IABConsentDialogRoot};