@c15t/react 2.0.4 → 2.2.0-canary-20260727202135

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@c15t/react",
-	"version": "2.0.4",
-	"description": "Headless cookie banner, consent manager & preference center for React. RSC-compatible, GDPR/CCPA/LGPD/TCF, TypeScript-first.",
+	"version": "2.2.0-canary-20260727202135",
+	"description": "React cookie banner, consent manager, preference center, and headless CMP components with IAB TCF and Consent Mode support.",
 	"keywords": [
 		"react",
 		"react-consent",
@@ -27,7 +27,10 @@
 		"react-server-components",
 		"rsc",
 		"use-client",
-		"tracking-consent"
+		"tracking-consent",
+		"google-consent-mode",
+		"consent-mode-v2",
+		"react-cmp"
 	],
 	"homepage": "https://c15t.com/docs/frameworks/react/quickstart",
 	"bugs": {
@@ -103,6 +106,11 @@
 			"import": "./client/components/frame.js",
 			"require": "./dist/components/frame/index.cjs"
 		},
+		"./components/integrations": {
+			"types": "./dist-types/components/integrations/index.d.ts",
+			"import": "./client/components/integrations.js",
+			"require": "./dist/components/integrations/index.cjs"
+		},
 		"./iab": {
 			"types": "./dist-types/iab.d.ts",
 			"import": "./dist/iab.js",
@@ -124,8 +132,9 @@
 	"types": "./dist-types/index.d.ts",
 	"files": [
 		"dist",
-		"docs",
 		"dist-types",
+		"AGENTS.md",
+		"docs",
 		"client",
 		"styles.css",
 		"styles.tw3.css",
@@ -136,15 +145,16 @@
 	],
 	"scripts": {
 		"prebuild": "genversion --esm --semi src/version.ts",
-		"build": "bun prebuild && rslib build && bun ../../scripts/normalize-dist-types.mjs && bun scripts/generate-distribution-css.ts && bun run clean:dist:test-artifacts && bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/react",
-		"build:agent-docs": "bun ../../scripts/agent-docs/generate-package-docs.ts @c15t/react",
+		"build": "bun prebuild && rslib build && bun ../../scripts/normalize-dist-types.mjs && bun scripts/generate-distribution-css.ts && bun run clean:dist:test-artifacts && bun ../../scripts/generate-package-docs.ts @c15t/react",
+		"build:docs": "bun ../../scripts/generate-package-docs.ts @c15t/react",
 		"check-types": "bun prebuild && tsc --noEmit",
 		"clean:dist:test-artifacts": "bun --eval \"import { rmSync } from 'node:fs'; rmSync('dist/mockServiceWorker.js', { force: true });\"",
 		"dev": "sh -c 'bun prebuild && rslib build --no-dts --no-clean && bun scripts/generate-distribution-css.ts && rslib build --watch --no-dts --no-clean'",
 		"fmt": "bun biome format --write . && bun biome check --formatter-enabled=false --linter-enabled=false --write",
 		"lint": "bun biome lint ./src",
 		"prepack": "bun ../../scripts/verify-package-artifacts.ts",
-		"test": "bun prebuild && vitest run",
+		"test": "bun prebuild && bun run test:types && vitest run",
+		"test:types": "tsc --noEmit --project tsconfig.type-tests.json",
 		"test:watch": "bun prebuild && vitest"
 	},
 	"browserslist": [
@@ -153,17 +163,18 @@
 		"not op_mini all"
 	],
 	"dependencies": {
-		"@c15t/ui": "2.0.3",
-		"c15t": "2.0.4"
+		"@c15t/ui": "2.2.0-canary-20260727202135",
+		"@types/google.maps": "3.65.3",
+		"c15t": "2.2.0-canary-20260727202135"
 	},
 	"devDependencies": {
-		"@c15t/backend": "2.0.4",
-		"@c15t/iab": "2.0.4",
+		"@c15t/backend": "2.2.0-canary-20260727202135",
+		"@c15t/iab": "2.2.0-canary-20260727202135",
 		"@c15t/typescript-config": "0.0.1",
 		"@c15t/vitest-config": "1.0.0",
 		"@iabtechlabtcf/core": "^1.5.20",
 		"genversion": "3.2.0",
-		"msw": "^2.12.14"
+		"msw": "^2.14.6"
 	},
 	"peerDependencies": {
 		"react": "^19.0.0 || ^19.0.0-rc || ^18.0.0 || ^17.0.0 || ^16.8.0",

package/readme.json

@@ -1,21 +1,22 @@
 {
 	"title": "@c15t/react: React Consent Components",
-	"description": "Headless cookie banner, consent manager & preference center for React. RSC-compatible, GDPR/CCPA/LGPD/TCF, TypeScript-first.",
+	"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",
-		"Headless and fully customizable UI components",
-		"Automatic GDPR compliance",
+		"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)",
-		"Flexible Cookie Banner and Preference Center components",
+		"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 18.17.0 or later",
-		"A hosted [c15t instance](https://inth.com) (free sign-up) or [self-hosted deployment](https://c15t.com/docs/self-host/v2)"
+		"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": [
 		"",
@@ -32,12 +33,16 @@
 	"usage": [
 		"Import `ConsentManagerProvider` in your app's root component",
 		"Add `ConsentBanner` and `ConsentDialog` components",
-		"Customise styling and behaviour to fit your app",
+		"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
+	"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/docs/ai-agents.md

@@ -1,111 +0,0 @@
----
-title: AI Agents
-description: Integrate c15t with AI coding assistants using the docs bundled in each package and c15t agent skills. Give agents version-matched local docs for consent management, banners, script loading, callbacks, and integrations.
-lastModified: 2026-03-24
----
-## Bundled Docs
-
-Every supported c15t package now ships docs inside the installed package itself.
-
-### Where to find them
-
-* `node_modules/c15t/docs/README.md`
-* `node_modules/@c15t/react/docs/README.md`
-* `node_modules/@c15t/nextjs/docs/README.md`
-* `node_modules/@c15t/backend/docs/README.md`
-
-Start with the package `README.md`, then follow its linked pages for the relevant workflow.
-
-These docs are version-matched to the exact c15t package version in your project, including generated reference content like prop and type tables.
-
-### Why use them
-
-If your app uses multiple c15t packages, use the docs from each relevant installed package instead of relying on stale model knowledge.
-
-### Agent philosophy
-
-When an AI tool is helping with c15t behavior, it should read the installed c15t docs first and use model knowledge second. That keeps consent flows, script gating, banner behavior, and integrations aligned with the exact version you have installed.
-
-### Customization ladder for agents
-
-When an agent is working on consent UI, it should choose the lowest-power tool that solves the task:
-
-1. Start with the pre-built component and its existing props or provider options
-2. Use `theme` tokens for semantic visual changes
-3. Use `theme.slots` for targeted styling of specific parts
-4. Use CSS variables or className-level overrides only when integrating with external styles
-5. Use compound components only when the markup order must change
-6. Use `noStyle` only when c15t structure is still correct but all styling must be replaced
-7. Use headless hooks only when markup and behavior both need to be rebuilt
-
-For common tasks:
-
-* Banner footer background -> `theme.colors.surfaceHover`
-* Banner card background -> `theme.colors.surface`
-* Banner card/footer/title tweaks -> banner slots
-* Stock action styling -> `theme.consentActions`
-* Copy changes -> `ConsentManagerProvider.options.i18n`
-
-If a token appears not to work, the agent should verify the token-to-component mapping before suggesting CSS overrides, `!important`, `noStyle`, or headless mode.
-
-***
-
-## Agent Skills
-
-c15t publishes agent skills that give AI coding assistants deep knowledge of c15t's APIs, components, and configuration. Skills are reusable workflows and tool-specific guidance, not version-matched local docs.
-
-### Installation
-
-Via the c15t CLI:
-
-|Package manager|Command|
-|:--|:--|
-|npm|`npx @c15t/cli install-skills`|
-|pnpm|`pnpm dlx @c15t/cli install-skills`|
-|yarn|`yarn dlx @c15t/cli install-skills`|
-|bun|`bunx @c15t/cli install-skills`|
-
-Or directly:
-
-|Package manager|Command|
-|:--|:--|
-|npm|`npx skills add c15t/skills`|
-|pnpm|`pnpm dlx skills add c15t/skills`|
-|yarn|`yarn dlx skills add c15t/skills`|
-|bun|`bunx skills add c15t/skills`|
-
-### What skills provide
-
-* **Styling customization** — strict escalation guidance across props, tokens, slots, CSS variables, compound components, `noStyle`, and headless
-* **Internationalization** — translation setup, locale routing integration
-* **Script management** — configuring third-party scripts with consent categories
-* **Component setup** — ConsentBanner, ConsentDialog, provider configuration
-
-### Supported tools
-
-* Claude Code
-* Cursor
-* GitHub Copilot (via `.github/skills`)
-* Any agent that supports the skills format
-
-***
-
-## When to use which
-
-Use bundled docs when:
-
-* Your agent can read files in the local project
-* You want version-matched docs from the installed c15t packages
-* You want a package-local README that tells the agent which detailed docs to read first
-* You want concrete guidance for consent management, cookie banners, consent dialogs, preference centers, script loading, callbacks, and integrations
-
-Use agent skills when:
-
-* Your tool supports the skills ecosystem
-* You want reusable workflows and tool-specific guidance that can point back to the installed package README files
-
-Use both when:
-
-* Your tool supports both local file context and skills
-* You want local package docs plus reusable setup and configuration help
-* You want the bundled package docs as the source of truth plus a reusable decision tree for customization

package/docs/components/consent-dialog-trigger.md

@@ -1,103 +0,0 @@
----
-title: ConsentDialogTrigger
-description: A floating, draggable button that lets users re-open the consent dialog at any time.
----
-`ConsentDialogTrigger` is a floating button that opens the consent dialog when clicked. Users can drag it to any corner of the screen, and the position persists across sessions. Use it to give users a persistent way to manage their privacy settings.
-
-## Basic Usage
-
-Use standalone or via the `showTrigger` prop on `ConsentDialog`:
-
-```tsx
-import { ConsentDialogTrigger } from '@c15t/react';
-
-// Standalone
-<ConsentDialogTrigger />
-
-// Via ConsentDialog
-<ConsentDialog showTrigger />
-```
-
-For inline footer links (instead of a floating button), use [`ConsentDialogLink`](/docs/frameworks/react/components/consent-dialog-link).
-
-## Icon Options
-
-```tsx
-{/* Built-in icons */}
-<ConsentDialogTrigger icon="branding" />    {/* c15t logo (default) */}
-<ConsentDialogTrigger icon="fingerprint" /> {/* Privacy icon */}
-<ConsentDialogTrigger icon="settings" />    {/* Gear icon */}
-
-{/* Custom icon */}
-<ConsentDialogTrigger icon={<MyCustomIcon />} />
-```
-
-## Visibility
-
-Control when the trigger is visible:
-
-```tsx
-{/* Always visible (default) */}
-<ConsentDialogTrigger showWhen="always" />
-
-{/* Only after user has made a consent choice */}
-<ConsentDialogTrigger showWhen="after-consent" />
-
-{/* Hidden (control visibility programmatically) */}
-<ConsentDialogTrigger showWhen="never" />
-```
-
-## Position
-
-Set the default corner and control persistence:
-
-```tsx
-<ConsentDialogTrigger
-  defaultPosition="bottom-left"
-  persistPosition={true} // Remembers user's drag position
-  onPositionChange={(position) => console.log('Moved to:', position)}
-/>
-```
-
-## Size
-
-```tsx
-<ConsentDialogTrigger size="sm" /> {/* Small */}
-<ConsentDialogTrigger size="md" /> {/* Medium (default) */}
-<ConsentDialogTrigger size="lg" /> {/* Large */}
-```
-
-## Compound Components
-
-Build fully custom trigger layouts using sub-components:
-
-```tsx
-<ConsentDialogTrigger.Root defaultPosition="bottom-right">
-  <ConsentDialogTrigger.Button size="md">
-    <ConsentDialogTrigger.Icon icon="settings" />
-    <ConsentDialogTrigger.Text>Privacy</ConsentDialogTrigger.Text>
-  </ConsentDialogTrigger.Button>
-</ConsentDialogTrigger.Root>
-```
-
-* `ConsentDialogTrigger.Root` — Portal wrapper with drag handling and position persistence
-* `ConsentDialogTrigger.Button` — Draggable button element with size variants
-* `ConsentDialogTrigger.Icon` — Icon display (branding, fingerprint, settings, or custom)
-* `ConsentDialogTrigger.Text` — Optional text label
-
-## Props
-
-### ConsentDialogTriggerProps
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|icon|TriggerIcon|Icon to display in the trigger button.|'branding'|Optional|
-|defaultPosition|CornerPosition \|undefined|Default corner position for the trigger. User can drag to any corner and the position will be remembered.|'bottom-right'|Optional|
-|persistPosition|boolean \|undefined|Whether to persist the user's position preference in localStorage.|true|Optional|
-|ariaLabel|string \|undefined|Accessible label for the trigger button.|'Open privacy settings'|Optional|
-|className|string \|undefined|Additional CSS class names.|-|Optional|
-|noStyle|boolean \|undefined|When true, removes default styling.|false|Optional|
-|showWhen|TriggerVisibility \|undefined|Controls when the trigger is visible.|'always'|Optional|
-|size|TriggerSize \|undefined|Size of the trigger button.|'md'|Optional|
-|onClick|(() => void) \|undefined|Callback fired when the trigger is clicked (before opening dialog).|-|Optional|
-|onPositionChange|((position: CornerPosition) => void) \|undefined|Callback fired when the corner position changes.|-|Optional|