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

package/docs/integrations/pirsch.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/plausible-analytics.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/posthog.md

@@ -206,7 +206,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/promptwatch.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/reddit-pixel.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/rudderstack.md

@@ -203,7 +203,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/rybbit-analytics.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/segment.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/snapchat-pixel.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/tiktok-pixel.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/umami-analytics.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/vercel-analytics.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/x-pixel.md

@@ -194,7 +194,7 @@ clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)
 Export the scripts from that module:
 
 ```ts title="src/c15t.client.ts"
-import type { C15tClientOptionsExtension } from '@c15t/astro';
+import type { C15tClientOptionsExtension } from 'c15t/astro';
 import { scripts } from './consent-scripts';
 
 export default { scripts } satisfies C15tClientOptionsExtension;

package/docs/integrations/youtube.md

@@ -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 {

package/docs/upgrade-v3.md

@@ -87,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
@@ -191,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" />
@@ -277,6 +386,25 @@ 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`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/react",
-	"version": "3.0.0-alpha.2",
+	"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",
@@ -243,16 +243,16 @@
 		"test:watch": "bun prebuild && vitest"
 	},
 	"dependencies": {
-		"@c15t/core": "3.0.0-alpha.2",
-		"@c15t/dev-tools": "3.0.0-alpha.2",
-		"@c15t/iab": "3.0.0-alpha.2",
-		"@c15t/schema": "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.2",
+		"@c15t/ui": "3.0.0-alpha.3",
 		"@types/google.maps": "3.65.3"
 	},
 	"devDependencies": {
-		"@c15t/backend": "3.0.0-alpha.2",
+		"@c15t/backend": "3.0.0-alpha.3",
 		"@c15t/conformance": "0.0.1",
 		"@c15t/typescript-config": "0.0.1",
 		"@c15t/vitest-config": "1.0.0",

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

@@ -1,2 +0,0 @@
-"use client";
-import{evaluateConsent as e,vendorsListedUnder as a}from"@c15t/core";import{useCallback as i,useMemo as t}from"react";import{useConsentManagerDraft as n}from"../draft.js";import{useActiveUI as s,useBranding as r,useConsents as o,useDeclaredVendors as l,useModel as c,usePolicyCategories as p,usePolicyScopeMode as d,usePreferencesPresentation as u,usePromptPresentation as m,useRegisterConsentCategories as y,useSetActiveUI as f,useSnapshot as g,useSubscribeToConsentChanges as v,useTranslations as h}from"../hooks.js";import{defaultTranslationConfig as C}from"../utils/default-translation-config.js";let S={},T=[{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"}],V=function(){let V=g(),b=o(),D=s(),x=r(),R=c(),P=m(),j=p(),k=u(),q=d(),{draft:w,save:I}=n(),A=l(),M=f(),O=v(),_=h(),B=t(()=>_?{...C,defaultLanguage:_.language,translations:{...C.translations,[_.language]:_.translations}}:C,[_]),E=t(()=>["necessary",...j],[j]),L=t(()=>["necessary",...V.evaluationPolicy.choiceScope??j],[V.evaluationPolicy.choiceScope,j]),U=i(()=>{let e=new Set(L);return T.filter(a=>e.has(a.name)).map(e=>({...e,display:!0}))},[L]),z=i(a=>e({category:a},V),[V]),F=i(e=>{M(e)},[M]),G=i(async(e,a)=>{"custom"===e?await I():await I("all"===e?"all":"none")},[I]),H=i((e,a)=>{L.includes(e)&&w.set(e,a)},[w,L]),J=i((e,a)=>{w.setVendor(e,a)},[w]),K=i(e=>a(A,e),[A]),N=y(),Q=i(e=>O(e),[O]);return{activeUI:D??"none",branding:x??"c15t",consentCategories:L,consentTypes:U(),consents:b,draftIsStale:w.isStale,effectivePermissions:V.effectivePermissions,explicitChoice:V.explicitChoice,getDisplayedConsents:U,getDisplayedVendors:K,has:z,iab:V.iab,manager:null,model:R??"opt-in",noticeDismissal:V.noticeDismissal,optOutDirectives:V.optOutDirectives,policyBanner:P??S,policyCategories:E,policyDialog:k??S,policyRule:V.policyRule,policyScopeMode:q,privacySignals:V.privacySignals,promptRequirement:V.promptRequirement,resetDraft:w.reset,resolution:V.resolution,restrictions:V.restrictions,saveConsents:G,selectedConsentTypes:w.values,selectedConsents:w.values,selectedVendors:w.vendors,setActiveUI:F,setSelectedConsent:H,setSelectedVendor:J,subscribeToConsentChanges:Q,translationConfig:B,updateConsentCategories:N,vendorChoice:V.vendorChoice,vendors:A}};export{V as useConsentManager};

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

@@ -1,45 +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[];
-    getDisplayedVendors: (category: AllConsentNames) => import("@c15t/core").ResolvedVendor[];
-    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>;
-    selectedVendors: Readonly<Record<string, boolean>>;
-    setActiveUI: (ui: ActiveUI) => void;
-    setSelectedConsent: (name: AllConsentNames, value: boolean) => void;
-    setSelectedVendor: (vendorId: string, granted: boolean) => void;
-    subscribeToConsentChanges: (listener: (state: ConsentState) => void) => () => void;
-    translationConfig: TranslationConfig;
-    updateConsentCategories: (categories: readonly AllConsentNames[]) => void;
-    vendorChoice: Readonly<import("@c15t/core").VendorChoice> | null;
-    vendors: readonly import("@c15t/core").ResolvedVendor[];
-};
-export {};