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

package/docs/integrations/youtube.md

@@ -2,18 +2,22 @@
 title: YouTube
 description: Gate YouTube embeds with c15t v3 in Next.js, TanStack Start, React,
   Nuxt, Vue, Astro, Svelte, SvelteKit or JavaScript.
+icon: youtube
 group: integrations
 ---
 
 ## Configure the video
 
 Use the ID of an embeddable video and the category matching its purpose in your
-policy. The current v3 adapters use consent-gated iframes rather than the v2
+policy. This page uses `marketing` because the YouTube player can set
+advertising identifiers. The framework quickstarts gate their demo video on
+`measurement` instead; either works if your policy says so. The current v3 adapters use consent-gated iframes rather than the v2
 `YouTubeEmbed` convenience component.
 
 ```ts title="src/embed-config.ts"
 export const embedCategory = 'marketing' as const;
-export const embedURL = 'https://www.youtube-nocookie.com/embed/VIDEO_ID?playsinline=1';
+export const embedURL =
+	'https://www.youtube-nocookie.com/embed/VIDEO_ID?playsinline=1';
 export const embedTitle = 'Product walkthrough';
 export const embedAspectRatio = '16 / 9';
 ```
@@ -23,7 +27,7 @@ Replace `VIDEO_ID` before running the example.
 ## Add the embed to your framework
 
 Create `src/embed-config.ts` using the configuration on this page, then select
-your framework. Keep the existing [consent setup](https://c15t.com/docs/frameworks), its policy
+your framework. Keep the existing [consent setup](https://v3.c15t.com/docs/frameworks), its policy
 and preferences UI. These examples do not create a second consent provider.
 
 **Next.js**
@@ -33,12 +37,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 +50,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 +63,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 +76,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 +89,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,74 +102,75 @@ 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**
 
-Use the reactive snapshot from the existing consent runtime. The Nuxt module auto-imports the consent composables.
+The Nuxt module registers `ConsentGate` and `ConsentDialogLink`, so
+this component imports only the embed configuration.
 
 ```vue title="app/components/ConsentEmbed.vue"
 <script setup lang="ts">
 import { embedCategory, embedURL, embedTitle, embedAspectRatio } from '../../src/embed-config';
-
-const snapshot = useConsentSnapshot();
-const activeUI = useConsentActiveUI();
 </script>
 
 <template>
-  <iframe
-    v-if="snapshot.effectivePermissions[embedCategory]"
-    :src="embedURL"
-    :title="embedTitle"
-    loading="lazy"
-    allowfullscreen
-    :style="{ width: '100%', aspectRatio: embedAspectRatio, minHeight: '200px', border: 0 }"
-  />
-  <button v-else type="button" @click="activeUI = 'manager'">
-    Open privacy settings to view this content
-  </button>
+  <ConsentGate :category="embedCategory">
+    <iframe
+      :src="embedURL"
+      :title="embedTitle"
+      loading="lazy"
+      allowfullscreen
+      :style="{ width: '100%', aspectRatio: embedAspectRatio, minHeight: '200px', border: 0 }"
+    />
+    <template #placeholder>
+      <p>Allow {{ embedCategory }} to load this content.</p>
+      <ConsentDialogLink>Open privacy settings</ConsentDialogLink>
+    </template>
+  </ConsentGate>
 </template>
 ```
 
-Use `v-if` so a denied iframe is removed from the DOM. Hiding an existing
-iframe with `v-show` or CSS does not prevent its requests.
+`ConsentGate` keeps the iframe out of the server HTML and the DOM while
+permission is denied, and removes it on revocation. See
+[Nuxt scripts and embeds](https://v3.c15t.com/docs/frameworks/nuxt/scripts).
 
 **Vue**
 
-Use the reactive snapshot from the existing consent runtime. The c15t Vue plugin must already be installed on this app.
+Render this component inside the app that installed the c15t Vue plugin.
 
 ```vue title="src/ConsentEmbed.vue"
 <script setup lang="ts">
-import { useConsentSnapshot, useConsentActiveUI } from 'c15t/vue/vue-plugin';
+import { ConsentDialogLink, ConsentGate } from 'c15t/vue/vue-plugin';
 import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
-
-const snapshot = useConsentSnapshot();
-const activeUI = useConsentActiveUI();
 </script>
 
 <template>
-  <iframe
-    v-if="snapshot.effectivePermissions[embedCategory]"
-    :src="embedURL"
-    :title="embedTitle"
-    loading="lazy"
-    allowfullscreen
-    :style="{ width: '100%', aspectRatio: embedAspectRatio, minHeight: '200px', border: 0 }"
-  />
-  <button v-else type="button" @click="activeUI = 'manager'">
-    Open privacy settings to view this content
-  </button>
+  <ConsentGate :category="embedCategory">
+    <iframe
+      :src="embedURL"
+      :title="embedTitle"
+      loading="lazy"
+      allowfullscreen
+      :style="{ width: '100%', aspectRatio: embedAspectRatio, minHeight: '200px', border: 0 }"
+    />
+    <template #placeholder>
+      <p>Allow {{ embedCategory }} to load this content.</p>
+      <ConsentDialogLink>Open privacy settings</ConsentDialogLink>
+    </template>
+  </ConsentGate>
 </template>
 ```
 
-Use `v-if` so a denied iframe is removed from the DOM. Hiding an existing
-iframe with `v-show` or CSS does not prevent its requests.
+`ConsentGate` keeps the iframe out of the DOM while permission is denied,
+and removes it on revocation. See
+[Vue scripts and embeds](https://v3.c15t.com/docs/frameworks/vue/scripts).
 
 **Astro**
 
@@ -176,7 +181,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 {
@@ -218,16 +223,16 @@ runtime for this embed.
 
 **Svelte**
 
-Render this component inside the existing `ConsentManagerProvider`.
+Render this component inside the existing `ConsentProvider`.
 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,25 +243,25 @@ 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.
 
 **SvelteKit**
 
-Render this component inside the existing `ConsentManagerProvider`.
-Keep the SvelteKit root provider and its server prefetch unchanged.
+Render this component inside the existing `ConsentRoot`.
+Keep the SvelteKit root and its server-resolved state 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,23 +272,44 @@ 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.
 
+**HTML**
+
+The c15t script tag gates iframes that name a category. Put the embed's URL
+in `data-src` instead of `src`, using the values from the configuration on
+this page:
+
+```html
+<iframe
+  data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?playsinline=1"
+  data-category="measurement"
+  title="Product video"
+  loading="lazy"
+  allowfullscreen
+></iframe>
+```
+
+c15t sets `src` once the category is allowed and removes it on revocation.
+Without `src` the iframe loads nothing, so hide it with CSS and show a link
+to `#c15t-preferences` in its place. See
+[HTML embeds](https://v3.c15t.com/docs/frameworks/html/embeds).
+
 **JavaScript**
 
-Use the shared browser helper below with your existing kernel. Put an
+Use the shared browser helper below with your existing client. Put an
 empty container where the embed should appear:
 
 ```html
 <div id="consent-embed"></div>
 ```
 
-In your browser entry point, after creating the kernel:
+In your browser entry point, after `init()`:
 
 ```ts
 import { mountConsentEmbed } from './consent-embed';
@@ -291,13 +317,16 @@ import { mountConsentEmbed } from './consent-embed';
 const container = document.querySelector<HTMLElement>('#consent-embed');
 if (!container) throw new Error('Missing consent embed container');
 
-const disposeEmbed = mountConsentEmbed(container, kernel, openPreferences);
+const disposeEmbed = mountConsentEmbed(container, consent.kernel, () =>
+  consent.openDialog(),
+);
 ```
 
-`kernel` is the instance from your quickstart. `openPreferences` is your
-application's function for showing its consent preferences UI. Call
-`disposeEmbed()` when the page or component is destroyed. The helper observes
-both the current snapshot and later changes.
+`consent` is the client from `init()` in your quickstart. With
+`createConsentRuntime`, pass `runtime.kernel` and your own function that
+opens preferences. Call `disposeEmbed()` when the page or component is
+destroyed. Iframe markup with `data-src` and `data-category` also works
+without the helper, because both setups gate iframes by default.
 
 ## Browser helper for Astro and JavaScript
 
@@ -306,51 +335,56 @@ when permission allows it, keeps an existing player mounted across unrelated
 snapshot updates, and removes it on revocation.
 
 ```ts title="src/consent-embed.ts"
-import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
+import {
+	embedCategory,
+	embedURL,
+	embedTitle,
+	embedAspectRatio,
+} from './embed-config';
 
 type EmbedKernel = {
-  getSnapshot: () => {
-    effectivePermissions: Record<typeof embedCategory, boolean>;
-  };
-  subscribe: (listener: () => void) => () => void;
+	getSnapshot: () => {
+		effectivePermissions: Record<typeof embedCategory, boolean>;
+	};
+	subscribe: (listener: () => void) => () => void;
 };
 
 export function mountConsentEmbed(
-  container: HTMLElement,
-  kernel: EmbedKernel,
-  openPreferences: () => void,
+	container: HTMLElement,
+	kernel: EmbedKernel,
+	openPreferences: () => void
 ) {
-  const render = () => {
-    if (kernel.getSnapshot().effectivePermissions[embedCategory]) {
-      if (container.querySelector('iframe')) return;
-      const frame = document.createElement('iframe');
-      frame.src = embedURL;
-      frame.title = embedTitle;
-      frame.loading = 'lazy';
-      frame.allowFullscreen = true;
-      Object.assign(frame.style, {
-        width: '100%',
-        aspectRatio: embedAspectRatio,
-        minHeight: '200px',
-        border: '0',
-      });
-      container.replaceChildren(frame);
-    } else {
-      if (container.querySelector('button')) return;
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.textContent = 'Open privacy settings to view this content';
-      button.onclick = openPreferences;
-      container.replaceChildren(button);
-    }
-  };
-
-  render();
-  const unsubscribe = kernel.subscribe(render);
-  return () => {
-    unsubscribe();
-    container.replaceChildren();
-  };
+	const render = () => {
+		if (kernel.getSnapshot().effectivePermissions[embedCategory]) {
+			if (container.querySelector('iframe')) return;
+			const frame = document.createElement('iframe');
+			frame.src = embedURL;
+			frame.title = embedTitle;
+			frame.loading = 'lazy';
+			frame.allowFullscreen = true;
+			Object.assign(frame.style, {
+				width: '100%',
+				aspectRatio: embedAspectRatio,
+				minHeight: '200px',
+				border: '0',
+			});
+			container.replaceChildren(frame);
+		} else {
+			if (container.querySelector('button')) return;
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.textContent = 'Open privacy settings to view this content';
+			button.onclick = openPreferences;
+			container.replaceChildren(button);
+		}
+	};
+
+	render();
+	const unsubscribe = kernel.subscribe(render);
+	return () => {
+		unsubscribe();
+		container.replaceChildren();
+	};
 }
 ```
 
@@ -380,14 +414,19 @@ 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
-consent action. Their `placeholder` APIs differ: React takes a node, Svelte
-takes a snippet. Keep a clear way to reopen preferences when customizing them.
+React and Svelte `ConsentGate` components provide a blocked-state placeholder and
+consent action. Their `placeholder` APIs differ. React takes a node, and
+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
 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
+[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
+
 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/react",
-	"version": "3.0.0-alpha.1",
+	"version": "3.0.0-alpha.11",
 	"description": "React cookie banner, consent manager, preference center, and headless CMP components with IAB TCF and Consent Mode support.",
 	"keywords": [
 		"ccpa",
@@ -46,6 +46,7 @@
 		"dist",
 		"dist-types",
 		"AGENTS.md",
+		"SKILL.md",
 		"docs",
 		"styles.css",
 		"styles.tw3.css",
@@ -66,6 +67,11 @@
 			"import": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
+		"./modes": {
+			"types": "./dist-types/modes.d.ts",
+			"import": "./dist/modes.js",
+			"default": "./dist/modes.js"
+		},
 		"./provider": {
 			"types": "./dist-types/provider.d.ts",
 			"import": "./dist/provider.js",
@@ -81,6 +87,11 @@
 			"import": "./dist/draft.js",
 			"default": "./dist/draft.js"
 		},
+		"./theme": {
+			"types": "./dist-types/index-parts/theme.d.ts",
+			"import": "./dist/index-parts/theme.js",
+			"default": "./dist/index-parts/theme.js"
+		},
 		"./module-hooks": {
 			"types": "./dist-types/module-hooks.d.ts",
 			"import": "./dist/module-hooks.js",
@@ -131,20 +142,35 @@
 			"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",
 			"import": "./dist/iab.js",
 			"default": "./dist/iab.js"
 		},
+		"./gpp": {
+			"types": "./dist-types/gpp.d.ts",
+			"import": "./dist/gpp.js",
+			"default": "./dist/gpp.js"
+		},
 		"./styles.css": "./dist/styles.css",
 		"./styles.tw3.css": "./dist/styles.tw3.css",
 		"./iab/styles.css": "./dist/iab/styles.css",
 		"./iab/styles.tw3.css": "./dist/iab/styles.tw3.css",
+		"./postcss-tailwind3": {
+			"types": "./dist-types/postcss-tailwind3.d.ts",
+			"import": "./dist/postcss-tailwind3.js",
+			"default": "./dist/postcss-tailwind3.js"
+		},
 		"./primitives": {
 			"types": "./dist-types/primitives.d.ts",
 			"import": "./dist/primitives.js",
@@ -190,10 +216,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,27 +264,27 @@
 		"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.11",
+		"@c15t/dev-tools": "3.0.0-alpha.11",
+		"@c15t/iab": "3.0.0-alpha.11",
+		"@c15t/schema": "3.0.0-alpha.9",
+		"@c15t/translations": "3.0.0-alpha.6",
+		"@c15t/ui": "3.0.0-alpha.11",
 		"@types/google.maps": "3.65.3"
 	},
 	"devDependencies": {
-		"@c15t/backend": "3.0.0-alpha.1",
+		"@c15t/backend": "3.0.0-alpha.11",
 		"@c15t/conformance": "0.0.1",
 		"@c15t/typescript-config": "0.0.1",
 		"@c15t/vitest-config": "1.0.0",
-		"@iabtechlabtcf/core": "^1.5.20",
+		"@iabtechlabtcf/core": "^1.5.22",
 		"genversion": "3.2.0",
 		"msw": "^2.14.6",
 		"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/ui-save.js

@@ -1 +0,0 @@
-let e=new WeakMap,t=t=>{e.set(t,{})},n=async(n,a,i)=>{let o={};e.set(n,o);let l="dialog"===n.getSnapshot().activeUI,s=a();l&&e.get(n)===o&&n.set.activeUI("dialog");let g=n.subscribe(a=>{l&&"dialog"!==a.activeUI&&e.get(n)===o&&t(n)});try{let t=await s;if(t.ok&&i()&&l&&e.get(n)===o){let e=n.getSnapshot();n.set.activeUI(e.policyPending||"failed"===e.resolution.status||"none"===e.promptRequirement.kind?"none":"banner")}return t}finally{g()}};export{t as invalidateConsentUIAction,n as saveConsentUI};