@c15t/react 2.0.0-rc.9 → 2.0.2

package/dist-types/components/consent-dialog/atoms/overlay.d.ts

@@ -3,7 +3,7 @@
  * Provides the overlay backdrop component for the consent management interface.
  * Implements accessible modal behavior with animation support.
  */
-import { type FC, type PropsWithChildren } from 'react';
+import { type CSSProperties, type HTMLAttributes } from 'react';
 import type { ThemeValue } from '../../../types/theme';
 /**
  * Props for the Overlay component.
@@ -15,25 +15,17 @@ import type { ThemeValue } from '../../../types/theme';
  *
  * @public
  */
-/**
- * Props for the Overlay component.
- *
- * @remarks
- * Extends {@link PropsWithChildren} so that the overlay can optionally wrap
- * its compound components (e.g. `ConsentDialog.Card`). This resolves
- * TypeScript errors when consumers nest elements inside
- * `<ConsentDialog.Root>`.
- */
-export type OverlayProps = PropsWithChildren<{
+export interface OverlayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
     /**
      * Custom styles to override default overlay styling.
      *
      * @remarks
-     * - Can be a string class name or an object with className and style properties
+     * - Accepts normal React inline styles
+     * - Also accepts the legacy string class name or object with className and style properties
      * - Styles are merged with theme styles and default styles
      * - Useful for customizing overlay appearance while maintaining functionality
      */
-    style?: ThemeValue;
+    style?: CSSProperties | ThemeValue;
     /**
      * Disables default styling when true.
      *
@@ -43,7 +35,7 @@ export type OverlayProps = PropsWithChildren<{
      * - Maintains functionality without visual opinions
      */
     noStyle?: boolean;
-}>;
-declare const ConsentDialogOverlay: FC<OverlayProps>;
-declare const Overlay: FC<OverlayProps>;
+}
+declare const ConsentDialogOverlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export { ConsentDialogOverlay, Overlay };

package/dist-types/components/consent-dialog/index.d.ts

@@ -60,7 +60,8 @@ export interface ConsentDialogCompoundComponent extends FC<ConsentDialogProps> {
  *     theme: {
  *       slots: {
  *         consentDialogCard: 'rounded-3xl shadow-xl',
- *         consentDialogFooter: 'border-t border-black/10',
+ *         consentWidgetFooter: 'gap-3 pt-6',
+ *         consentDialogTag: 'shadow-none',
  *       },
  *     },
  *   }}

package/dist-types/components/consent-widget/atoms/root.d.ts

@@ -1,8 +1,3 @@
-/**
- * @packageDocumentation
- * Provides the root component for the consent management interface.
- * Implements context provider pattern with theme support and state management.
- */
 import type { FC, ReactNode } from 'react';
 import { type ThemeContextValue } from '../../../context/theme-context';
 /**

package/dist-types/components/shared/ui/branding.d.ts

@@ -1,11 +1,15 @@
 import type { Branding } from 'c15t';
 import type { SVGProps } from 'react';
+import type { CSSPropertiesWithVars } from '../../../types/theme';
 export type ResolvedBranding = 'c15t' | 'inth' | 'none';
 export type BrandingVariant = 'footer' | 'dialog-tag' | 'banner-tag';
+export type BrandingThemeKey = 'consentBannerTag' | 'consentDialogTag' | 'consentWidgetTag' | 'iabConsentBannerTag' | 'iabConsentDialogTag';
 type BrandingProps = {
     hideBranding: boolean;
     variant?: BrandingVariant;
+    themeKey?: BrandingThemeKey;
     className?: string;
+    style?: CSSPropertiesWithVars;
     'data-testid'?: string;
 };
 type BrandingFullLogoProps = {
@@ -19,5 +23,5 @@ export declare function resolveBranding(branding: Branding | string): ResolvedBr
 export declare function getBrandingHref(branding: Branding | string, refParam?: string): string;
 export declare function BrandingFullLogo({ branding, className, }: BrandingFullLogoProps): import("react/jsx-runtime").JSX.Element;
 export declare function BrandingCompactLogo({ branding, ...props }: BrandingCompactLogoProps): import("react/jsx-runtime").JSX.Element;
-export declare function BrandingLink({ hideBranding, variant, className, 'data-testid': testId, }: BrandingProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BrandingLink({ hideBranding, variant, themeKey, className, style, 'data-testid': testId, }: BrandingProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist-types/components/shared/ui/logo.d.ts

@@ -21,6 +21,16 @@ export declare const InthLogo: (props: SVGProps<SVGSVGElement> & IconProps) => i
  * INTH icon-only mark for compact placements like floating triggers.
  */
 export declare const InthIconOnly: (props: SVGProps<SVGSVGElement> & IconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Wordmark logo for the hosted consent product (inth.com).
+ *
+ * Used in marketing surfaces such as the optional banner attribution and
+ * the consent dialog footer. Render inside a flow where its native
+ * 595x97 viewBox can scale freely (e.g. an `inline-block` parent).
+ *
+ * @param title - Accessible title announced to screen readers. Defaults to "Consent".
+ * @param titleId - DOM id for the SVG `<title>` element. Must be unique on the page when rendered more than once.
+ */
 export declare const ConsentLogo: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & IconProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Consent icon only (without text).

package/dist-types/types/consent-manager.d.ts

@@ -16,7 +16,7 @@ export interface ReactUIOptions extends UIOptions {
  * In offline mode this also includes `offlinePolicy` configuration for
  * local policy previews.
  *
- * @see {@link https://v2.c15t.com/docs/frameworks/react/policy-packs}
+ * @see {@link https://c15t.com/docs/frameworks/react/policy-packs}
  */
 export type ConsentManagerOptions = BaseConsentManagerOptions & ReactUIOptions;
 /**
@@ -33,7 +33,7 @@ export interface ConsentManagerProviderProps {
      * Configuration options for the consent manager.
      * This includes core, React, store, and translation settings.
      *
-     * @see {@link https://v2.c15t.com/docs/frameworks/react/components/consent-manager-provider}
+     * @see {@link https://c15t.com/docs/frameworks/react/components/consent-manager-provider}
      */
     options: ConsentManagerOptions;
 }

package/dist-types/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.0.0-rc.9";
+export declare const version = "2.0.2";

package/docs/ai-agents.md

@@ -0,0 +1,111 @@
+---
+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/building-headless-components.md

@@ -4,11 +4,11 @@ description: Build policy-aware custom consent components in React using the hea
 ---
 Building custom consent UI is easier now because c15t exposes multiple layers of policy-aware primitives instead of forcing you to reconstruct banner rules by hand.
 
-The layering is:
+Think of customization as a ladder:
 
 * stock component props for the shortest path
-* `ConsentBanner.PolicyActions` and `ConsentWidget.PolicyActions` for custom structure with policy-aware actions
-* `useHeadlessConsentUI()` for fully manual action rendering and non-standard controls
+* `ConsentBanner.PolicyActions` and `ConsentWidget.PolicyActions` when you want custom structure but still want c15t to resolve policy-aware actions
+* `useHeadlessConsentUI()` when you need fully manual action rendering, custom controls, or non-standard flow
 
 > ⚠️ **Warning:**
 > Headless is the last step in the customization ladder. Use this guide only when pre-built components, tokens, slots, compound components, and noStyle are no longer sufficient.
@@ -26,6 +26,29 @@ The split is intentional: `@c15t/ui` owns pure policy-action resolution, while t
 > ℹ️ **Info:**
 > This guide is about building your own components while still respecting resolved policy-pack behavior. For the general headless overview, see Headless Mode.
 
+## Choose the Smallest Layer That Solves the Job
+
+Start with the smallest API surface that still gives you the behavior you need:
+
+* Stay with stock components when you only need theming, spacing, copy, or legal-link changes
+* Use `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions` when you want a custom compound-component layout but still want grouped actions, ordering, and primary emphasis to come from policy
+* Add `renderAction` when the grouping is still correct but you want to remap actions to stock c15t button compounds
+* Reach for `useHeadlessConsentUI()` only when you need custom button elements, need to map `actionGroups` yourself, wire non-button controls, or coordinate the consent UI with a more custom state machine
+
+This order matters because every step down the ladder gives you more control, but also makes it easier for your UI to drift away from the resolved policy if you stop using the provided state.
+
+## Before You Build Headless UI
+
+Do not use headless mode for problems that are still inside the stock component model:
+
+* Use `layout`, `direction`, `primaryButton`, and `legalLinks` before you rebuild banner markup
+* Use `theme.consentActions` before you swap out stock actions
+* Use tokens such as `colors.surface` and `colors.surfaceHover` before raw CSS overrides
+* Use slots such as `consentBannerCard`, `consentBannerFooter`, and `consentDialogCard` before compound components
+* Use `ConsentManagerProvider.options.i18n` before rebuilding UI just to change text
+
+A good rule: if the stock banner or dialog structure is still correct, you probably do not need headless mode.
+
 ## What the Headless Tooling Gives You
 
 The main win is that your custom UI can stay aligned with policy packs without duplicating policy logic in your components.
@@ -40,9 +63,63 @@ The main win is that your custom UI can stay aligned with policy packs without d
 * UI profile and scroll-lock hints
 * whether the banner or dialog should currently be visible
 
+The hook also gives you the policy-aware action helpers you are expected to call:
+
+* `performBannerAction('accept' | 'reject')`
+* `performDialogAction('accept' | 'reject')`
+* `saveCustomPreferences()` for the dialog `customize` action
+* `openDialog()`, `openBanner()`, and `closeUI()` for surface visibility
+
 That means your component mostly focuses on markup and design-system concerns instead of re-implementing policy interpretation.
 
-For most compound-component layouts, start with `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions`. They render stock c15t buttons and translations by default, and `renderAction` is only needed when you want to override the action mapping. Reach for manual `actionGroups` mapping when you need action rendering that no longer fits the stock button compounds.
+For most compound-component layouts, start with `ConsentBanner.PolicyActions` or `ConsentWidget.PolicyActions`. They render stock c15t buttons and translations by default, and `renderAction` is only needed when you want to override which stock compound renders for each action. Reach for manual `actionGroups` mapping when you need action rendering that no longer fits the stock button compounds.
+
+## Policy-Aware Compound Components First
+
+If your goal is "custom layout, same policy behavior", start here before dropping to manual `actionGroups` rendering:
+
+```tsx
+import { ConsentBanner } from '@c15t/react';
+
+export function BannerShell() {
+  return (
+    <ConsentBanner.Root>
+      <ConsentBanner.Card>
+        <ConsentBanner.Header>
+          <ConsentBanner.Title />
+          <ConsentBanner.Description />
+        </ConsentBanner.Header>
+        <ConsentBanner.PolicyActions />
+      </ConsentBanner.Card>
+    </ConsentBanner.Root>
+  );
+}
+```
+
+Use `renderAction` only when you want to remap actions to stock button compounds while keeping the same policy-driven grouping and ordering:
+
+```tsx
+import { ConsentBanner } from '@c15t/react';
+
+export function BannerActionsWithCustomMapping() {
+  return (
+    <ConsentBanner.PolicyActions
+      renderAction={(action, props) => {
+        const { key, ...buttonProps } = props;
+
+        switch (action) {
+          case 'accept':
+            return <ConsentBanner.AcceptButton key={key} {...buttonProps} />;
+          case 'reject':
+            return <ConsentBanner.RejectButton key={key} {...buttonProps} />;
+          case 'customize':
+            return <ConsentBanner.CustomizeButton key={key} {...buttonProps} />;
+        }
+      }}
+    />
+  );
+}
+```
 
 > ℹ️ **Info:**
 > For custom layouts built from c15t compound components, prefer ConsentBanner.PolicyActions and ConsentWidget.PolicyActions. The examples below intentionally use manual actionGroups mapping to show the fully headless escape hatch.
@@ -86,9 +163,20 @@ export function ConsentManager({ children }: { children: ReactNode }) {
 import { useHeadlessConsentUI, useTranslations } from '@c15t/react/headless';
 
 export function CustomConsentBanner() {
-  const { banner, openDialog, performAction } = useHeadlessConsentUI();
+  const { banner, openDialog, performBannerAction } = useHeadlessConsentUI();
   const translations = useTranslations();
 
+  function getActionLabel(action: (typeof banner.allowedActions)[number]) {
+    switch (action) {
+      case 'accept':
+        return translations.common.acceptAll;
+      case 'reject':
+        return translations.common.rejectAll;
+      case 'customize':
+        return translations.common.customize;
+    }
+  }
+
   if (!banner.isVisible) return null;
 
   return (
@@ -111,14 +199,10 @@ export function CustomConsentBanner() {
                     openDialog();
                     return;
                   }
-                  void performAction(action, { surface: 'banner' });
+                  void performBannerAction(action);
                 }}
               >
-                {action === 'accept'
-                  ? translations.common.acceptAll
-                  : action === 'reject'
-                    ? translations.common.rejectAll
-                    : translations.common.customize}
+                {getActionLabel(action)}
               </button>
             ))}
           </div>
@@ -149,6 +233,17 @@ export function CustomConsentDialog() {
   } = useConsentManager();
   const translations = useTranslations();
 
+  function getActionLabel(action: (typeof dialog.allowedActions)[number]) {
+    switch (action) {
+      case 'accept':
+        return translations.common.acceptAll;
+      case 'reject':
+        return translations.common.rejectAll;
+      case 'customize':
+        return translations.common.save;
+    }
+  }
+
   if (!dialog.isVisible) return null;
 
   const displayedTypes = consentTypes.filter(
@@ -197,11 +292,7 @@ export function CustomConsentDialog() {
                   void performDialogAction(action);
                 }}
               >
-                {action === 'accept'
-                  ? translations.common.acceptAll
-                  : action === 'reject'
-                    ? translations.common.rejectAll
-                    : translations.common.save}
+                {getActionLabel(action)}
               </button>
             ))}
           </div>
@@ -212,6 +303,17 @@ export function CustomConsentDialog() {
 }
 ```
 
+## What Headless Is Not For
+
+Headless mode is not the recommended path for:
+
+* changing the banner footer background
+* rounding the stock banner card
+* restyling stock banner or dialog buttons
+* changing consent copy
+
+Those should stay in the pre-built stack with tokens, slots, `theme.consentActions`, and provider `i18n`.
+
 ## What a Policy-Aware Headless Component Should Respect
 
 When you build custom banner or dialog components, make sure they use:

package/docs/components/consent-banner.md

@@ -241,36 +241,7 @@ renderAction={(action, props) => {
 />
 ```
 
-Use `useTranslations()` only when you are replacing the button markup entirely:
-
-```tsx
-import { ConsentBanner, useTranslations } from '@c15t/react';
-
-export function CustomBannerActions() {
-  const { common } = useTranslations();
-
-  return (
-    <ConsentBanner.PolicyActions
-      renderAction={(action, props) => (
-        <button
-          key={props.key}
-          type="button"
-          className={props.isPrimary ? 'btn-primary' : 'btn-secondary'}
-          style={props.style}
-        >
-          {action === 'accept'
-            ? common.acceptAll
-            : action === 'reject'
-              ? common.rejectAll
-              : common.customize}
-        </button>
-      )}
-    />
-  );
-}
-```
-
-For maximum control, use `useHeadlessConsentUI()` and render `banner.actionGroups` manually.
+`renderAction` is still meant for stock button compounds. If you want completely custom button elements and click handling, use `useHeadlessConsentUI()` and render `banner.actionGroups` manually instead of `ConsentBanner.PolicyActions`.
 
 If you only need styling changes, stay with tokens and slots instead of rebuilding the banner layout.
 

package/docs/components/consent-dialog.md

@@ -75,7 +75,7 @@ Add a floating button that lets users re-open the dialog after dismissing the ba
 
 ## Branding
 
-Hide the c15t branding in the dialog footer:
+Hide the c15t branding tag:
 
 ```tsx
 <ConsentDialog hideBranding />
@@ -84,7 +84,7 @@ Hide the c15t branding in the dialog footer:
 ## Styling First
 
 > ℹ️ **Info:**
-> If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentDialogHeader, and consentDialogFooter. See Styling Overview.
+> If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentWidgetFooter, and consentDialogTag. See Styling Overview.
 
 ```tsx
 <ConsentManagerProvider
@@ -97,7 +97,8 @@ Hide the c15t branding in the dialog footer:
       slots: {
         consentDialogCard: 'rounded-[32px] shadow-xl',
         consentDialogHeader: 'gap-3',
-        consentDialogFooter: 'border-t border-black/10 px-6',
+        consentWidgetFooter: 'gap-3 pt-6',
+        consentDialogTag: 'shadow-none',
       },
     },
   }}

package/docs/components/consent-manager-provider.md

@@ -36,15 +36,15 @@ export default function ConsentManager({ children }: { children: ReactNode }) {
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
 |enabled|boolean \|undefined|Whether c15t should be active.|true|Optional|
-|callbacks|[Callbacks \|undefined](https://v2.c15t.com/docs/frameworks/react/callbacks)|Event callbacks for consent actions.|-|Optional|
-|scripts|[Script \|undefined](https://v2.c15t.com/docs/frameworks/react/script-loader)|Dynamically load scripts based on consent state.|-|Optional|
+|callbacks|[Callbacks \|undefined](https://c15t.com/docs/frameworks/react/callbacks)|Event callbacks for consent actions.|-|Optional|
+|scripts|[Script \|undefined](https://c15t.com/docs/frameworks/react/script-loader)|Dynamically load scripts based on consent state.|-|Optional|
 |legalLinks|Object \|undefined|Configuration for the legal links.|-|Optional|
 |storageConfig|StorageConfig \|undefined|Storage configuration for consent persistence.|-|Optional|
 |user|User \|undefined|The user's information. Usually your own internal ID for the user from your auth provider.|-|Optional|
 |overrides|Overrides \|undefined|Forcefully set values like country, region, language for the consent manager. These values will override the values detected from the browser.|-|Optional|
-|networkBlocker|[NetworkBlockerConfig \|undefined](https://v2.c15t.com/docs/frameworks/react/network-blocker)|Configuration for the network request blocker.|-|Optional|
-|iab|[IABConfig \|undefined](https://v2.c15t.com/docs/frameworks/react/iab/overview)|IAB TCF 2.3 configuration.|-|Optional|
-|ssrData|[Object \|undefined](https://v2.c15t.com/docs/frameworks/react/server-side)|SSR-prefetched data for hydration.|-|Optional|
+|networkBlocker|[NetworkBlockerConfig \|undefined](https://c15t.com/docs/frameworks/react/network-blocker)|Configuration for the network request blocker.|-|Optional|
+|iab|[IABConfig \|undefined](https://c15t.com/docs/frameworks/react/iab/overview)|IAB TCF 2.3 configuration.|-|Optional|
+|ssrData|[Object \|undefined](https://c15t.com/docs/frameworks/react/server-side)|SSR-prefetched data for hydration.|-|Optional|
 
 #### `callbacks` Callbacks
 
@@ -146,9 +146,9 @@ IAB TCF 2.3 configuration.
 
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
-|enabled|boolean|Enable IAB TCF 2.3 mode. Note: Only works in 'hosted' client mode (legacy alias: 'c15t') because it requires a backend. Options: Fetch GVL from gvl.consent.io; Initialize \_\_tcfapi CMP API; Generate TC Strings for IAB compliance|-|✅ Required|
+|enabled|boolean|Enable IAB TCF 2.3 mode. Note: Only works in 'hosted' client mode (legacy alias: 'c15t') because it requires a backend. Options: Fetch GVL from gvl.inth.app; Initialize \_\_tcfapi CMP API; Generate TC Strings for IAB compliance|-|✅ Required|
 |\_module|IABModule \|undefined|IAB runtime module injected by \`@c15t/iab\`.|-|Optional|
-|cmpId|number \|undefined|CMP ID registered with IAB Europe. When using consent.io as the backend, this is automatically provided via the \`/init\` endpoint — no client-side configuration needed. Only set this if you self-host and have your own CMP registration. A valid (non-zero) CMP ID is required for IAB TCF compliance.|-|Optional|
+|cmpId|number \|undefined|CMP ID registered with IAB Europe. When using inth.com as the backend, this is automatically provided via the \`/init\` endpoint — no client-side configuration needed. Only set this if you self-host and have your own CMP registration. A valid (non-zero) CMP ID is required for IAB TCF compliance.|-|Optional|
 |cmpVersion|string \|number \|undefined|CMP version. When omitted, defaults to package version from \`\~/cmp-defaults\` (which uses \~/version).|-|Optional|
 |vendors|number\[] \|undefined|IAB-registered vendor IDs to include (optional). Used to scope the vendor list when fetching GVL or when hosted fallback paths are used (e.g. if GVL fetch fails).|-|Optional|
 |customVendors|NonIABVendor \|undefined|Custom vendors not registered with IAB. These are displayed separately in the consent UI with a note that they have different privacy practices than IAB vendors.|-|Optional|
@@ -171,8 +171,8 @@ SSR-prefetched data for hydration.
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
 |i18n|I18nConfig \|undefined|Preferred i18n configuration in c15t v2.|-|Optional|
-|translations|[TranslationConfig \|undefined](https://v2.c15t.com/docs/frameworks/react/internationalization)|Translation configuration to seed the store with.|-|Optional|
-|consentCategories|[AllConsentNames \|undefined](https://v2.c15t.com/docs/frameworks/react/concepts/consent-categories)|Consent categories to show in the consent banner.|-|Optional|
+|translations|[TranslationConfig \|undefined](https://c15t.com/docs/frameworks/react/internationalization)|Translation configuration to seed the store with.|-|Optional|
+|consentCategories|[AllConsentNames \|undefined](https://c15t.com/docs/frameworks/react/concepts/consent-categories)|Consent categories to show in the consent banner.|-|Optional|
 
 #### `i18n` I18nConfig
 
@@ -198,12 +198,12 @@ Translation configuration to seed the store with.
 
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
-|theme|[Theme \|undefined](https://v2.c15t.com/docs/frameworks/react/styling/tokens)|Visual theme to apply.|-|Optional|
+|theme|[Theme \|undefined](https://c15t.com/docs/frameworks/react/styling/tokens)|Visual theme to apply.|-|Optional|
 |disableAnimation|boolean \|undefined|Whether to disable animations.|false|Optional|
 |scrollLock|boolean \|undefined|Whether to lock scroll when dialogs are open.|false|Optional|
 |trapFocus|boolean \|undefined|Whether to trap focus within dialogs.|true|Optional|
-|colorScheme|["light" \|"dark" \|"system" \|undefined](https://v2.c15t.com/docs/frameworks/react/styling/color-scheme)|Color scheme preference. With this option, you can force the theme to be light, dark or system. Otherwise, the theme will be detected if you have '.dark' classname in your document.|-|Optional|
-|noStyle|[boolean \|undefined](https://v2.c15t.com/docs/frameworks/react/headless)|Whether to disable default styles.|false|Optional|
+|colorScheme|["light" \|"dark" \|"system" \|undefined](https://c15t.com/docs/frameworks/react/styling/color-scheme)|Color scheme preference. With this option, you can force the theme to be light, dark or system. Otherwise, the theme will be detected if you have '.dark' classname in your document.|-|Optional|
+|noStyle|[boolean \|undefined](https://c15t.com/docs/frameworks/react/headless)|Whether to disable default styles.|false|Optional|
 
 #### `theme` Theme
 
@@ -392,7 +392,7 @@ Read the full guide at [Policy Packs](/docs/frameworks/react/policy-packs) and t
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
 |children|ReactNode|React children to render within the provider.|-|✅ Required|
-|options|[ConsentManagerOptions](https://v2.c15t.com/docs/frameworks/react/components/consent-manager-provider)|Configuration options for the consent manager. This includes core, React, store, and translation settings.|-|✅ Required|
+|options|[ConsentManagerOptions](https://c15t.com/docs/frameworks/react/components/consent-manager-provider)|Configuration options for the consent manager. This includes core, React, store, and translation settings.|-|✅ Required|
 
 #### `options` ConsentManagerOptions
 

package/docs/components/consent-widget.md

@@ -117,34 +117,7 @@ renderAction={(action, props) => {
 />
 ```
 
-Use `useTranslations()` only when you are replacing the button markup entirely:
-
-```tsx
-import { ConsentWidget, useTranslations } from '@c15t/react';
-
-export function CustomWidgetActions() {
-  const { common } = useTranslations();
-
-  return (
-    <ConsentWidget.PolicyActions
-      renderAction={(action, props) => (
-        <button
-          key={props.key}
-          type="button"
-          className={props.isPrimary ? 'btn-primary' : 'btn-secondary'}
-          style={props.style}
-        >
-          {action === 'accept'
-            ? common.acceptAll
-            : action === 'reject'
-              ? common.rejectAll
-              : common.save}
-        </button>
-      )}
-    />
-  );
-}
-```
+`renderAction` is still meant for stock button compounds. If you want completely custom button elements and handlers, use `useHeadlessConsentUI()` and render `dialog.actionGroups` manually instead of `ConsentWidget.PolicyActions`.
 
 For a fixed footer layout, render `ConsentWidget.Footer` and `ConsentWidget.FooterSubGroup` manually instead of using `ConsentWidget.PolicyActions`.
 

package/docs/components/dev-tools.md

@@ -54,6 +54,39 @@ export function ConsentManager({ children }: { children: ReactNode }) {
 |**Events**|Timeline of consent events and state changes|
 |**Actions**|Buttons to trigger consent actions (accept all, reject all, reset)|
 
+## TanStack Devtools
+
+`@c15t/dev-tools/tanstack` exposes a panel component and plugin factory that match TanStack Devtools' plugin API, so c15t can sit beside Query and Router without a custom mount adapter:
+
+```tsx
+import * as React from 'react';
+import { useRouter } from '@tanstack/react-router';
+import { TanStackDevtools } from '@tanstack/react-devtools';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import { c15tDevtools } from '@c15t/dev-tools/tanstack';
+
+export function AppDevtools() {
+  const router = useRouter();
+
+  return (
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'TanStack Query',
+          render: <ReactQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: <TanStackRouterDevtoolsPanel router={router} />,
+        },
+        c15tDevtools(),
+      ]}
+    />
+  );
+}
+```
+
 ## Props
 
 ### C15TDevToolsProps