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

package/docs/integrations/youtube.md

@@ -33,12 +33,12 @@ Render this component inside your existing consent boundary or provider.
 ```tsx title="src/consent-embed.tsx"
 'use client';
 
-import { Frame } from 'c15t/next';
+import { ConsentGate } from 'c15t/next';
 import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
 
 export function ConsentEmbed() {
   return (
-    <Frame category={embedCategory}>
+    <ConsentGate category={embedCategory}>
       <iframe
         src={embedURL}
         title={embedTitle}
@@ -46,12 +46,12 @@ export function ConsentEmbed() {
         allowFullScreen
         style={{ width: '100%', aspectRatio: embedAspectRatio, minHeight: 200, border: 0 }}
       />
-    </Frame>
+    </ConsentGate>
   );
 }
 ```
 
-`Frame` keeps the iframe absent while permission is denied and removes it
+`ConsentGate` keeps the iframe absent while permission is denied and removes it
 on revocation. Keep your existing consent styles and preferences dialog.
 
 **TanStack Start**
@@ -59,12 +59,12 @@ on revocation. Keep your existing consent styles and preferences dialog.
 Render this component inside your existing consent boundary or provider.
 
 ```tsx title="src/consent-embed.tsx"
-import { Frame } from 'c15t/tanstack-start';
+import { ConsentGate } from 'c15t/tanstack-start';
 import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
 
 export function ConsentEmbed() {
   return (
-    <Frame category={embedCategory}>
+    <ConsentGate category={embedCategory}>
       <iframe
         src={embedURL}
         title={embedTitle}
@@ -72,12 +72,12 @@ export function ConsentEmbed() {
         allowFullScreen
         style={{ width: '100%', aspectRatio: embedAspectRatio, minHeight: 200, border: 0 }}
       />
-    </Frame>
+    </ConsentGate>
   );
 }
 ```
 
-`Frame` keeps the iframe absent while permission is denied and removes it
+`ConsentGate` keeps the iframe absent while permission is denied and removes it
 on revocation. Keep your existing consent styles and preferences dialog.
 
 **React**
@@ -85,12 +85,12 @@ on revocation. Keep your existing consent styles and preferences dialog.
 Render this component inside your existing consent boundary or provider.
 
 ```tsx title="src/consent-embed.tsx"
-import { Frame } from 'c15t/react';
+import { ConsentGate } from 'c15t/react';
 import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
 
 export function ConsentEmbed() {
   return (
-    <Frame category={embedCategory}>
+    <ConsentGate category={embedCategory}>
       <iframe
         src={embedURL}
         title={embedTitle}
@@ -98,12 +98,12 @@ export function ConsentEmbed() {
         allowFullScreen
         style={{ width: '100%', aspectRatio: embedAspectRatio, minHeight: 200, border: 0 }}
       />
-    </Frame>
+    </ConsentGate>
   );
 }
 ```
 
-`Frame` keeps the iframe absent while permission is denied and removes it
+`ConsentGate` keeps the iframe absent while permission is denied and removes it
 on revocation. Keep your existing consent styles and preferences dialog.
 
 **Nuxt**
@@ -176,7 +176,7 @@ Add this component to pages using your consent-enabled base layout:
 <c15t-consent-embed style="display: block"></c15t-consent-embed>
 
 <script>
-  import { getConsentClient } from '@c15t/astro/client';
+  import { getConsentClient } from 'c15t/astro/client';
   import { mountConsentEmbed } from '../consent-embed';
 
   class ConsentEmbed extends HTMLElement {
@@ -223,11 +223,11 @@ The provider from your quickstart supplies its consent state.
 
 ```svelte title="src/ConsentEmbed.svelte"
 <script lang="ts">
-  import { Frame } from '@c15t/svelte';
+  import { ConsentGate } from '@c15t/svelte';
   import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
 </script>
 
-<Frame category={embedCategory}>
+<ConsentGate category={embedCategory}>
   <iframe
     src={embedURL}
     title={embedTitle}
@@ -238,10 +238,10 @@ The provider from your quickstart supplies its consent state.
     style:min-height="200px"
     style:border="0"
   ></iframe>
-</Frame>
+</ConsentGate>
 ```
 
-The Svelte `Frame` waits until the browser is mounted and the category is
+The Svelte `ConsentGate` waits until the browser is mounted and the category is
 allowed. Its default placeholder opens preferences. Revocation removes the
 iframe.
 
@@ -252,11 +252,11 @@ Keep the SvelteKit root provider and its server prefetch unchanged.
 
 ```svelte title="src/lib/ConsentEmbed.svelte"
 <script lang="ts">
-  import { Frame } from '@c15t/svelte';
+  import { ConsentGate } from '@c15t/svelte';
   import { embedCategory, embedURL, embedTitle, embedAspectRatio } from '../embed-config';
 </script>
 
-<Frame category={embedCategory}>
+<ConsentGate category={embedCategory}>
   <iframe
     src={embedURL}
     title={embedTitle}
@@ -267,10 +267,10 @@ Keep the SvelteKit root provider and its server prefetch unchanged.
     style:min-height="200px"
     style:border="0"
   ></iframe>
-</Frame>
+</ConsentGate>
 ```
 
-The Svelte `Frame` waits until the browser is mounted and the category is
+The Svelte `ConsentGate` waits until the browser is mounted and the category is
 allowed. Its default placeholder opens preferences. Revocation removes the
 iframe.
 
@@ -380,7 +380,7 @@ Set playback options in the iframe URL. For example, append `start=36` to begin
 [YouTube player parameters](https://developers.google.com/youtube/player_parameters)
 and reserve at least a 200-by-200-pixel player area.
 
-React and Svelte `Frame` components provide a blocked-state placeholder and
+React and Svelte `ConsentGate` components provide a blocked-state placeholder and
 consent action. Their `placeholder` APIs differ: React takes a node, Svelte
 takes a snippet. Keep a clear way to reopen preferences when customizing them.
 The Vue and browser examples show that action explicitly. `loading="lazy"` delays an
@@ -388,6 +388,11 @@ allowed iframe for performance; it does not implement consent gating.
 
 ## Consent behavior
 
+Add `data-vendor="youtube"` next to `data-category` and declare a `youtube`
+vendor in the runtime's `vendors` option or the backend manifest to let visitors
+turn YouTube off while keeping the rest of the category on. See
+[granular consent](./granular-consent.md).
+
 Each example keeps the iframe absent until the category is allowed. After
 permission, the iframe can load. Revoking permission removes the iframe and its
 embedded document. Requests already sent cannot be recalled.

package/docs/upgrade-v3.md

@@ -5,6 +5,13 @@ description: Migrate policy configuration, consent records, callbacks, and
 group: reference
 ---
 
+## React version requirement
+
+The v3 React and Next.js adapters require React and React DOM 18 or newer.
+Upgrade both packages together before installing v3. Earlier alpha peer ranges
+incorrectly allowed React 16 and 17 even though v3 already uses `useId` and
+`useSyncExternalStore`, which those versions do not provide.
+
 ## Start with a policy rule
 
 ```ts
@@ -80,6 +87,115 @@ be true before a visitor acts. A notice dismissal updates `noticeDismissal` and
 does not record consent. Global Privacy Control updates privacy signals and
 configured opt-out directives without turning a browser signal into a choice.
 
+## Replace `useConsentManager()`
+
+`useConsentManager()` is gone from `c15t/react`, `c15t/next`,
+`c15t/tanstack-start` and their `/headless` entries. It subscribed to the whole
+consent snapshot, so every component that called it re-rendered on every
+change, including changes to categories it never read. Call one hook per field
+instead; each re-renders only when its own value changes.
+
+Before, in v2 and earlier v3 alphas:
+
+```tsx title="components/marketing-banner.tsx"
+import { useConsentManager } from 'c15t/react';
+
+export function MarketingBanner() {
+  const { activeUI, has, saveConsents } = useConsentManager();
+  if (activeUI !== 'banner' || has('marketing')) {
+    return null;
+  }
+  return <button type="button" onClick={() => void saveConsents('all')}>Accept</button>;
+}
+```
+
+After:
+
+```tsx title="components/marketing-banner.tsx"
+import { useActiveUI, useConsent } from 'c15t/react';
+import { useHeadlessConsentUI } from 'c15t/react/headless';
+
+export function MarketingBanner() {
+  const activeUI = useActiveUI();
+  const marketing = useConsent('marketing');
+  const { performAction } = useHeadlessConsentUI();
+  if (activeUI !== 'banner' || marketing) {
+    return null;
+  }
+  return <button type="button" onClick={() => void performAction('accept')}>Accept</button>;
+}
+```
+
+Import hooks from the same entry you used for `useConsentManager()`:
+`c15t/next` and `c15t/next/headless` in Next.js, `c15t/tanstack-start` and
+`c15t/tanstack-start/headless` in TanStack Start.
+
+| `useConsentManager()` field                                   | v3 replacement                                                                                         |
+| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `activeUI`                                                    | `useActiveUI()`. It returns `null` before the kernel picks a surface; the old field reported `'none'`. |
+| `setActiveUI(ui)`                                             | `useSetActiveUI()`                                                                                     |
+| `has(category)`                                               | `useConsent(category)`, one call per category at the top of the component                              |
+| `consents`                                                    | `useConsents()`                                                                                        |
+| `effectivePermissions`                                        | `useEffectivePermissions()`                                                                            |
+| `explicitChoice`                                              | `useExplicitChoice()`                                                                                  |
+| `promptRequirement`                                           | `usePromptRequirement()`                                                                               |
+| `noticeDismissal`                                             | `useNoticeDismissal()`                                                                                 |
+| `privacySignals`                                              | `usePrivacySignals()`                                                                                  |
+| `optOutDirectives`                                            | `useOptOutDirectives()`                                                                                |
+| `restrictions`                                                | `useRestrictions()`                                                                                    |
+| `resolution`                                                  | `usePolicyResolution()`                                                                                |
+| `policyRule`                                                  | `usePolicyRule()`                                                                                      |
+| `policyCategories`                                            | `usePolicyCategories()`. The old list started with `'necessary'`; this one does not.                   |
+| `policyScopeMode`                                             | `usePolicyScopeMode()`                                                                                 |
+| `policyBanner`                                                | `usePromptPresentation()`                                                                              |
+| `policyDialog`                                                | `usePreferencesPresentation()`                                                                         |
+| `model`                                                       | `useModel()`. It returns `null` while no policy matches; the old field reported `'opt-in'`.            |
+| `branding`                                                    | `useBranding()`. It returns `null` when unset; the old field reported `'c15t'`.                        |
+| `iab`                                                         | `useIABSnapshot()`                                                                                     |
+| `vendors`                                                     | `useDeclaredVendors()`                                                                                 |
+| `vendorChoice`                                                | `useVendorChoice()`                                                                                    |
+| `getDisplayedVendors(category)`                               | `useDeclaredVendors()`, filtered to vendors whose category condition names the category                |
+| `subscribeToConsentChanges(listener)`                         | `useSubscribeToConsentChanges()`, or the provider's `onPermissionsChanged` callback                    |
+| `updateConsentCategories(categories)`                         | `useRegisterConsentCategories()`                                                                       |
+| `translationConfig`                                           | `useTranslations()` for the active strings                                                             |
+| `selectedConsents`, `selectedConsentTypes`                    | `useConsentDraft().values`                                                                             |
+| `setSelectedConsent(name, value)`                             | `useConsentDraft().set(name, value)`                                                                   |
+| `selectedVendors`                                             | `useConsentDraft().vendors`, or `useVendorDraft().vendors`                                             |
+| `setSelectedVendor(id, granted)`                              | `useConsentDraft().setVendor(id, granted)`                                                             |
+| `resetDraft()`                                                | `useConsentDraft().reset()`                                                                            |
+| `draftIsStale`                                                | `useConsentDraft().isStale`                                                                            |
+| `consentCategories`, `consentTypes`, `getDisplayedConsents()` | `useConsentDraft().displayedCategories`, with labels from `useTranslations().consentTypes`             |
+| `saveConsents('all')`                                         | `useHeadlessConsentUI().performAction('accept')`                                                       |
+| `saveConsents('necessary')`                                   | `useHeadlessConsentUI().performAction('reject')`                                                       |
+| `saveConsents('custom')`                                      | `useHeadlessConsentUI().performAction('save')`                                                         |
+| `manager`                                                     | Nothing. It was always `null` in v3.                                                                   |
+
+The old hook kept one private draft per component, shared by its selection and
+its save. `useConsentDraft()` and `useHeadlessConsentUI()` read the nearest
+`ConsentDraftProvider` instead. When one component stages choices and another
+saves them, or one component calls both hooks, render them inside the same
+`ConsentDraftProvider`; without one, each hook keeps its own draft and a custom
+save commits nothing you staged. `ConsentWidget` already provides one.
+
+`useHeadlessConsentUI()` saves the way the stock buttons do: it closes the
+surface after a successful save and refuses a draft that the policy made stale.
+`useSaveConsents()` calls the kernel directly and does neither.
+
+The CLI rewrites the common destructuring forms for you:
+
+```bash
+c15t codemods use-consent-manager-to-hooks --dry-run --json
+```
+
+It replaces each field that has a one-hook equivalent, turns `has('marketing')`
+calls with a literal category into `useConsent('marketing')`, and maps
+`saveConsents('all' | 'necessary' | 'custom')` calls to
+`useHeadlessConsentUI().saveCustomPreferences()`. Fields it cannot rewrite stay
+on a `useConsentManager()` call under a `TODO(c15t v3)` comment that names the
+replacement, so the build fails at each place that needs manual work. It also
+marks components that now need a shared `ConsentDraftProvider`. Review the
+result, then run it without `--dry-run`.
+
 ## Replace choice callbacks
 
 ```tsx
@@ -184,7 +300,7 @@ Notice acknowledgement uses `common.acknowledge`, falling back to
 
 ```astro
 ---
-import ConsentBanner from '@c15t/astro/components/consent-banner.astro';
+import ConsentBanner from 'c15t/astro/components/consent-banner.astro';
 ---
 
 <ConsentBanner dismissButtonText="Got it" />
@@ -252,6 +368,43 @@ TanStack Start (`c15t/tanstack-start`, `c15t/tanstack-start/server`):
 `consentLoaderOptions`, `backendURL`, `initRoute` and `DEFAULT_INIT_ROUTE` are
 unchanged.
 
+## `Frame` is now `ConsentGate`
+
+The component that mounts an embed only while its category is allowed is now
+`ConsentGate` in React, Next.js, TanStack Start, Svelte and Vue. The old names
+still work as deprecated aliases and will be removed in a later major release.
+
+| v2                                                                   | v3                                                                           |
+| -------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `Frame`, `Frame.Root`, `Frame.Title`, `Frame.Button`                 | `ConsentGate`, `ConsentGate.Root`, `ConsentGate.Title`, `ConsentGate.Button` |
+| `FrameProps`, `FrameCompoundComponent`                               | `ConsentGateProps`, `ConsentGateCompoundComponent`                           |
+| `c15t/react/frame`, `c15t/react/components/frame`                    | `c15t/react/consent-gate`, `c15t/react/components/consent-gate`              |
+| Vue `ConsentFrame`, `@c15t/vue/runtime/components/consent-frame.vue` | `ConsentGate`, `@c15t/vue/runtime/components/consent-gate.vue`               |
+
+Props and behavior are unchanged. The placeholder keeps its `frame.*`
+translation keys, `--frame-*` CSS custom properties and
+`data-testid="frame-placeholder"`, so custom copy, styles and tests continue
+to apply.
+
+## Split dialog and widget entries are deferred
+
+`c15t/react/consent-dialog` and `c15t/react/consent-widget` (and their
+`@c15t/react/*` equivalents) now export the same deferred `ConsentDialog` and
+`ConsentWidget` as `c15t/react`. The dialog's code loads when it first opens
+instead of with every page. `<ConsentDialog />`, `<ConsentWidget />` and the
+`ConsentDialog.<Part>` properties need no change.
+
+The two entries no longer export the individual parts. Import those from the
+component entries, which keep the old, eagerly bundled exports:
+
+| Before                                                          | After                                                                      |
+| --------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| `import { Card, Header } from 'c15t/react/consent-dialog'`      | `import { Card, Header } from 'c15t/react/components/consent-dialog'`      |
+| `import { Accordion, Switch } from 'c15t/react/consent-widget'` | `import { Accordion, Switch } from 'c15t/react/components/consent-widget'` |
+
+To keep the dialog in the first load so its first open needs no download,
+import `ConsentDialog` from `c15t/react/components/consent-dialog`.
+
 ## Next.js RSC banner removal
 
 The `@c15t/nextjs/rsc` entry (`c15t/next/rsc`) and its `RscConsentBanner`,
@@ -332,3 +485,25 @@ export function Banner() {
   );
 }
 ```
+
+## Session reports in manifest mode
+
+A host that resolves init from a cached manifest never calls `/init`, so a v3
+backend could not count the visitors it served. From this release every
+server-side resolution sends `POST /sessions` to the backend after the fact,
+server-to-server and detached from the response: the Next.js, TanStack Start,
+SvelteKit, Nuxt and Astro init routes, and the Next.js, TanStack Start and
+Astro render-time prefetches. The browser makes no request.
+
+This is a new outbound data flow from your server to the consent backend. The
+report carries the manifest revision, the matched policy, the jurisdiction,
+country, region, language and GPC signal, plus the visitor's user agent and
+address as request headers. It carries no cookies and no identifier. Nothing is
+stored on the backend; the report reaches a `sessions.onReport` sink and the
+request log.
+
+Reporting is on by default and needs an absolute backend URL. Set
+`reportSessions: false` on the adapter to send none. Each report is one
+resolution, not one visitor: a page view can produce a `render` report and a
+`route` report, and nothing in them links the two. A consumer counting sessions
+groups reports by the forwarded address and user agent within a window.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/react",
-	"version": "3.0.0-alpha.1",
+	"version": "3.0.0-alpha.3",
 	"description": "React cookie banner, consent manager, preference center, and headless CMP components with IAB TCF and Consent Mode support.",
 	"keywords": [
 		"ccpa",
@@ -131,10 +131,15 @@
 			"import": "./dist/panel-trigger.js",
 			"default": "./dist/panel-trigger.js"
 		},
+		"./consent-gate": {
+			"types": "./dist-types/consent-gate.d.ts",
+			"import": "./dist/consent-gate.js",
+			"default": "./dist/consent-gate.js"
+		},
 		"./frame": {
-			"types": "./dist-types/frame.d.ts",
-			"import": "./dist/frame.js",
-			"default": "./dist/frame.js"
+			"types": "./dist-types/consent-gate.d.ts",
+			"import": "./dist/consent-gate.js",
+			"default": "./dist/consent-gate.js"
 		},
 		"./iab": {
 			"types": "./dist-types/iab.d.ts",
@@ -190,10 +195,15 @@
 			"import": "./dist/components/preferences/index.js",
 			"default": "./dist/components/preferences/index.js"
 		},
+		"./components/consent-gate": {
+			"types": "./dist-types/components/consent-gate/index.d.ts",
+			"import": "./dist/components/consent-gate/index.js",
+			"default": "./dist/components/consent-gate/index.js"
+		},
 		"./components/frame": {
-			"types": "./dist-types/components/frame/index.d.ts",
-			"import": "./dist/components/frame/index.js",
-			"default": "./dist/components/frame/index.js"
+			"types": "./dist-types/components/consent-gate/index.d.ts",
+			"import": "./dist/components/consent-gate/index.js",
+			"default": "./dist/components/consent-gate/index.js"
 		},
 		"./context": {
 			"types": "./dist-types/context/index.d.ts",
@@ -233,16 +243,16 @@
 		"test:watch": "bun prebuild && vitest"
 	},
 	"dependencies": {
-		"@c15t/core": "3.0.0-alpha.1",
-		"@c15t/dev-tools": "3.0.0-alpha.1",
-		"@c15t/iab": "3.0.0-alpha.1",
-		"@c15t/schema": "3.0.0-alpha.0",
-		"@c15t/translations": "3.0.0-alpha.0",
-		"@c15t/ui": "3.0.0-alpha.1",
+		"@c15t/core": "3.0.0-alpha.3",
+		"@c15t/dev-tools": "3.0.0-alpha.3",
+		"@c15t/iab": "3.0.0-alpha.3",
+		"@c15t/schema": "3.0.0-alpha.2",
+		"@c15t/translations": "3.0.0-alpha.2",
+		"@c15t/ui": "3.0.0-alpha.3",
 		"@types/google.maps": "3.65.3"
 	},
 	"devDependencies": {
-		"@c15t/backend": "3.0.0-alpha.1",
+		"@c15t/backend": "3.0.0-alpha.3",
 		"@c15t/conformance": "0.0.1",
 		"@c15t/typescript-config": "0.0.1",
 		"@c15t/vitest-config": "1.0.0",
@@ -252,8 +262,8 @@
 		"typescript": "7.0.2"
 	},
 	"peerDependencies": {
-		"react": "^19.0.0 || ^19.0.0-rc || ^18.0.0 || ^17.0.0 || ^16.8.0",
-		"react-dom": "^19.0.0 || ^19.0.0-rc || ^18.0.0 || ^17.0.0 || ^16.8.0"
+		"react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+		"react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
 	},
 	"peerDependenciesMeta": {
 		"react": {

package/dist/component-hooks/use-manager.js

@@ -1,2 +0,0 @@
-"use client";
-import{evaluateConsent as e}from"@c15t/core";import{useCallback as t,useContext as a,useMemo as i}from"react";import{ProviderServicesContext as n}from"../context.js";import{useConsentManagerDraft as s}from"../draft.js";import{useActiveUI as r,useBranding as o,useConsents as l,useModel as p,usePolicyCategories as c,usePolicyScopeMode as u,usePreferencesPresentation as m,usePromptPresentation as d,useSetActiveUI as f,useSnapshot as y,useSubscribeToConsentChanges as g,useTranslations as v}from"../hooks.js";import{defaultTranslationConfig as C}from"../utils/default-translation-config.js";let T={},b=[{defaultValue:!0,description:"Required for basic site functionality",disabled:!0,display:!0,gdprType:1,name:"necessary"},{defaultValue:!1,description:"Enables enhanced features",display:!0,gdprType:2,name:"functionality"},{defaultValue:!1,description:"Analytics and performance measurement",display:!0,gdprType:4,name:"measurement"},{defaultValue:!1,description:"Improves your experience",display:!0,gdprType:3,name:"experience"},{defaultValue:!1,description:"Advertising and marketing",display:!0,gdprType:5,name:"marketing"}],x=function(){let x=y(),D=a(n),h=l(),R=r(),S=o(),V=p(),j=d(),k=c(),q=m(),w=u(),{draft:I,save:A}=s(),M=f(),O=g(),P=v(),_=i(()=>P?{...C,defaultLanguage:P.language,translations:{...C.translations,[P.language]:P.translations}}:C,[P]),B=i(()=>["necessary",...k],[k]),E=i(()=>[...D?.getConsentCategories()??B],[D,B]),L=t(()=>{let e=new Set(E);return b.filter(t=>e.has(t.name)).map(e=>({...e,display:!0}))},[E]),U=t(t=>e({category:t},x),[x]),z=t(e=>{M(e)},[M]),F=t(async(e,t)=>{"custom"===e?await A():await A("all"===e?"all":"none")},[A]),G=t((e,t)=>{E.includes(e)&&I.set(e,t)},[I,E]),H=t(e=>{},[]),J=t(e=>O(e),[O]);return{activeUI:R??"none",branding:S??"c15t",consentCategories:E,consentTypes:L(),consents:h,draftIsStale:I.isStale,effectivePermissions:x.effectivePermissions,explicitChoice:x.explicitChoice,getDisplayedConsents:L,has:U,iab:x.iab,manager:null,model:V??"opt-in",noticeDismissal:x.noticeDismissal,optOutDirectives:x.optOutDirectives,policyBanner:j??T,policyCategories:B,policyDialog:q??T,policyRule:x.policyRule,policyScopeMode:w,privacySignals:x.privacySignals,promptRequirement:x.promptRequirement,resetDraft:I.reset,resolution:x.resolution,restrictions:x.restrictions,saveConsents:F,selectedConsentTypes:I.values,selectedConsents:I.values,setActiveUI:z,setSelectedConsent:G,subscribeToConsentChanges:J,translationConfig:_,updateConsentCategories:H}};export{x as useConsentManager};

package/dist/components/frame/atoms.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import t from"@c15t/ui/styles/components/frame";import{forwardRef as r}from"react";import{useTranslations as a}from"../../component-hooks/use-translations.js";import{Box as o}from"../shared/primitives/box.js";import{ConsentButton as i}from"../shared/primitives/button.js";let m=r(({children:r,...a},i)=>e(o,{ref:i,baseClassName:t.placeholder,"data-testid":"frame-placeholder",...a,children:r})),l=r(({children:r,category:i,...m},l)=>{let{frame:s,consentTypes:n}=a(),p=i&&s?.title?s.title.replace("{category}",n?.[i]?.title??i):void 0;return e(o,{ref:l,baseClassName:t.title,...m,children:r??p})}),s=r(({children:t,category:r,...o},m)=>{let{frame:l,consentTypes:s}=a(),n=s?.[r]?.title??r,p=l?.actionButton?.replace("{category}",n);return e(i,{mode:"stroke",size:"small",variant:"primary",...o,ref:m,action:"open-consent-dialog",category:r,"data-testid":"frame-open-dialog",children:t??p})});m.displayName="FrameRoot",l.displayName="FrameTitle",s.displayName="FrameButton";export{s as FrameButton,m as FrameRoot,l as FrameTitle};

package/dist/components/frame/frame.js

@@ -1,2 +0,0 @@
-"use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as r,useEffect as t}from"react";import{useConsentManager as i}from"../../component-hooks/use-manager.js";import{useTranslations as l}from"../../component-hooks/use-translations.js";import{FrameButton as n,FrameRoot as s,FrameTitle as c}from"./atoms.js";let a=({category:r,policyBlocked:t,policyBlockedMessage:i})=>o(s,{children:[e(c,{category:r,children:t?i??"This content is unavailable under your region's consent policy.":void 0}),t?null:e(n,{category:r})]}),m=r(({children:o,category:r,placeholder:n,noStyle:s,className:c,theme:m,...d},p)=>{let{has:y,updateConsentCategories:u,consentCategories:h,policyCategories:g,policyScopeMode:f}=i(),{frame:k}=l(),j=y(r),v=Array.isArray(g)&&g.length>0&&!g.includes("*")&&!g.includes(r);return t(()=>{h.includes(r)||u([...h,r])},[r,h,u]),e("div",{ref:p,className:c,...d,children:j?o:n||e(a,{category:r,policyBlocked:"strict"===f&&v,policyBlockedMessage:k?.policyBlocked})})});m.displayName="Frame";let d=m;export{d as Frame};

package/dist/components/frame/index.js

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

package/dist/frame.js

@@ -1,2 +0,0 @@
-"use client";
-export*from"./components/frame/index.js";

package/dist-types/component-hooks/use-manager.d.ts

@@ -1,40 +0,0 @@
-import type { ActiveUI, AllConsentNames, ConsentState, ConsentType, HasCondition, Model, PromptPresentation, TranslationConfig } from '@c15t/core';
-type SaveType = 'all' | 'custom' | 'necessary';
-export declare const useConsentManager: () => {
-    activeUI: ActiveUI;
-    branding: import("@c15t/core").KernelBranding;
-    consentCategories: AllConsentNames[];
-    consentTypes: ConsentType[];
-    consents: ConsentState;
-    draftIsStale: boolean;
-    effectivePermissions: Readonly<ConsentState>;
-    explicitChoice: Readonly<import("@c15t/core").ExplicitChoice> | null;
-    getDisplayedConsents: () => ConsentType[];
-    has: (condition: HasCondition<AllConsentNames>) => boolean;
-    iab: Readonly<import("@c15t/core").KernelIABState> | null;
-    manager: null;
-    model: Model;
-    noticeDismissal: Readonly<import("@c15t/core").NoticeDismissal> | null;
-    optOutDirectives: readonly import("@c15t/core").PrivacyOptOut[];
-    policyBanner: PromptPresentation;
-    policyCategories: AllConsentNames[];
-    policyDialog: import("@c15t/core").PreferencesPresentation;
-    policyRule: Readonly<import("@c15t/core").ResolvedPolicyRule>;
-    policyScopeMode: import("@c15t/core").PolicyScopeMode;
-    privacySignals: import("@c15t/core").KernelPrivacySignals;
-    promptRequirement: Readonly<import("@c15t/core").PromptRequirement>;
-    resetDraft: () => void;
-    resolution: Readonly<import("@c15t/core").PolicyResolution>;
-    restrictions: Readonly<Partial<Record<import("@c15t/core").OptionalConsentCategory, readonly import("@c15t/core").RestrictionReason[]>>>;
-    saveConsents: (type: SaveType, _options?: {
-        uiSource?: string;
-    }) => Promise<void>;
-    selectedConsentTypes: Readonly<ConsentState>;
-    selectedConsents: Readonly<ConsentState>;
-    setActiveUI: (ui: ActiveUI) => void;
-    setSelectedConsent: (name: AllConsentNames, value: boolean) => void;
-    subscribeToConsentChanges: (listener: (state: ConsentState) => void) => () => void;
-    translationConfig: TranslationConfig;
-    updateConsentCategories: (_names: AllConsentNames[]) => void;
-};
-export {};

package/dist-types/components/frame/atoms.d.ts

@@ -1,11 +0,0 @@
-import type { AllConsentNames } from '@c15t/core';
-import type { BoxProps } from '../shared/primitives/box';
-import type { ConsentButtonProps } from '../shared/primitives/button.types';
-declare const FrameRoot: import("react").ForwardRefExoticComponent<Omit<BoxProps, "slotKey"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const FrameTitle: import("react").ForwardRefExoticComponent<Omit<BoxProps, "slotKey"> & {
-    category?: AllConsentNames;
-} & import("react").RefAttributes<HTMLDivElement>>;
-declare const FrameButton: import("react").ForwardRefExoticComponent<Omit<ConsentButtonProps, "slotKey"> & {
-    category: AllConsentNames;
-} & import("react").RefAttributes<HTMLButtonElement>>;
-export { FrameButton, FrameRoot, FrameTitle };

package/dist-types/components/frame/frame.d.ts

@@ -1,2 +0,0 @@
-import type { FrameProps } from './types';
-export declare const Frame: import("react").ForwardRefExoticComponent<Omit<FrameProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,24 +0,0 @@
-import type { FrameCompoundComponent } from './types';
-/**
- * The Frame component that provides consent-gated content rendering
- *
- * @remarks
- * Acts as a consent boundary for embedded content (iframes, videos, third-party widgets).
- * Conditionally renders children based on user consent, displaying a placeholder when
- * permission is not granted.
- * Supports custom styling via `theme` or complete style override with `noStyle` as well as a custom placeholder.
- *
- * @example
- * ```tsx
- * <Frame category="marketing">
- *   <iframe src="https://www.youtube.com/embed/MtN1YnoL46Q?si=JYIFKdENwls43H-r" />
- * </Frame>
- * ```
- *
- * @see {@link FrameTheme} for theme options
- * @see {@link AllConsentNames} for consent categories
- */
-declare const Frame: FrameCompoundComponent;
-export { FrameButton, FrameRoot, FrameTitle } from './atoms';
-export type { FrameCompoundComponent, FrameProps } from './types';
-export { Frame };

package/dist-types/frame.d.ts

@@ -1 +0,0 @@
-export * from './components/frame';

package/readme.json

@@ -1,48 +0,0 @@
-{
-	"title": "@c15t/react: React Consent Components",
-	"description": "React cookie banner, consent manager, preference center, and headless CMP components for modern React apps.",
-	"features": [
-		"Works with React 19, 18, 17, and 16.8",
-		"Full 'use client' support for React Server Components",
-		"Prebuilt and fully customizable cookie banner, consent dialog, and preference center UI",
-		"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",
-		"Built-in internationalization support",
-		"Seamless consent storage and tracking"
-	],
-	"prerequisites": [
-		"React 16.8 or later",
-		"Node.js 20.19 or later",
-		"A hosted [c15t instance](https://inth.com) (free sign-up), [self-hosted deployment](https://c15t.com/docs/self-host/quickstart), or offline mode for local-only storage"
-	],
-	"manualInstallation": [
-		"",
-		"```bash\npnpm add @c15t/react\n```",
-		"",
-		"Then add the prebuilt stylesheet to your app-level CSS entrypoint:",
-		"",
-		"```css\n/* src/index.css */\n@import \"@c15t/react/styles.css\";\n```",
-		"",
-		"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)."
-	],
-	"usage": [
-		"Import `ConsentManagerProvider` in your app's root component",
-		"Add `ConsentBanner` and `ConsentDialog` components",
-		"Customize styling and behavior to fit your app",
-		"For full implementation details, see the [React quickstart docs](https://c15t.com/docs/frameworks/react/quickstart)",
-
-		"```tsx\n// App.tsx\nimport {\n  ConsentManagerProvider,\n  ConsentBanner,\n  ConsentDialog,\n} from '@c15t/react'\n\nfunction App() {\n  return (\n    <ConsentManagerProvider>\n      <YourApp />\n      <ConsentBanner />\n      <ConsentDialog />\n    </ConsentManagerProvider>\n  )\n}\n```"
-	],
-	"docsLink": "https://c15t.com/docs/frameworks/react/quickstart",
-	"quickStartLink": "https://c15t.com/docs/frameworks/react/quickstart",
-	"showCLIGeneration": true,
-	"customSections": {
-		"Deployment Modes": "- **Hosted on inth.com**: Hosted c15t backend for policy storage, audit history, and hosted infrastructure\n- **Self-hosted backend**: Use @c15t/backend when you need full infrastructure control\n- **Offline mode**: Browser-only consent storage for local development, demos, previews, static sites, or fallback scenarios",
-		"Popular Integrations": "- Google Tag Manager with Google Consent Mode v2\n- Google Analytics 4 and Google Ads through gtag.js\n- Meta Pixel, TikTok Pixel, LinkedIn Insights, Microsoft UET, X Pixel, Reddit Pixel, and Snapchat Pixel\n- PostHog, Segment, Mixpanel, Microsoft Clarity, Hotjar, Plausible, Fathom, Matomo, Umami, and Vercel Analytics\n- Intercom and Crisp chat widgets"
-	}
-}

package/src/iab/styles.css

@@ -1,11 +0,0 @@
-/**
- * @c15t/react — IAB TCF component styles.
- *
- * Add this stylesheet to the same global CSS entrypoint as your base c15t styles
- * when using IAB consent components. Do not import either stylesheet from JS/TSX.
- *
- * Usage (src/index.css):
- *   @import "@c15t/react/styles.css";
- *   @import "@c15t/react/iab/styles.css";
- */
-@import '@c15t/ui/iab/styles.css';