@c15t/react 2.0.4 → 2.2.0-canary-20260727202135

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

@@ -0,0 +1,202 @@
+---
+title: ConsentDialogTrigger
+description: A floating, draggable button that lets users re-open the consent
+  dialog at any time.
+group: frameworks
+---
+`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 />} />
+```
+
+## Configurable Toolbar
+
+Use the separate `ConsentDialogTriggerToolbar` when you want to place app-owned controls beside the privacy trigger. It always renders exactly one built-in action that opens consent preferences, so `actions` only contains controls your app owns.
+
+```tsx
+<ConsentDialogTriggerToolbar
+  ariaLabel="Site controls"
+  actions={[
+    {
+      id: 'theme',
+      label: isDark ? 'Switch to light theme' : 'Switch to dark theme',
+      icon: isDark ? <SunIcon /> : <MoonIcon />,
+      pressed: isDark,
+      onSelect: toggleColorScheme,
+    },
+    {
+      id: 'support',
+      label: 'Open support chat',
+      icon: <ChatIcon />,
+      onSelect: openSupportChat,
+    },
+  ]}
+  preferences={{
+    icon: 'fingerprint',
+    label: 'Manage privacy settings',
+  }}
+/>
+```
+
+Each custom action requires a stable `id`, accessible `label`, `icon`, and `onSelect` callback. Use `pressed` for toggle actions and `disabled` for unavailable actions. Your app remains responsible for state, integrations, and changing the icon or label. The preferences action automatically moves to the edge nearest the toolbar's snapped corner while custom actions keep their configured order.
+
+Toolbars are horizontal by default. Set `orientation="vertical"` to stack the actions and enable Up/Down arrow-key navigation:
+
+```tsx
+<ConsentDialogTriggerToolbar
+  orientation="vertical"
+  actions={toolbarActions}
+/>
+```
+
+### Toolbar Styling
+
+The toolbar follows the standard styling precedence: internal CSS module styles, provider theme slots, then direct component overrides. Use `className` and `style` on the toolbar, or on an individual action, and use `noStyle` for a fully custom implementation.
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    theme: {
+      slots: {
+        consentDialogTriggerToolbar: 'my-toolbar',
+        consentDialogTriggerToolbarItem: 'my-toolbar-item',
+        consentDialogTriggerToolbarIcon: 'my-toolbar-icon',
+      },
+    },
+  }}
+>
+  <ConsentDialogTriggerToolbar
+    className="fixed-toolbar"
+    style={{ '--cdtt-offset': '24px' }}
+    actions={[
+      {
+        id: 'support',
+        label: 'Open support chat',
+        icon: <ChatIcon />,
+        onSelect: openSupportChat,
+        className: 'support-action',
+      },
+    ]}
+  />
+</ConsentManagerProvider>
+```
+
+Available toolbar theme slots are `consentDialogTriggerToolbar`, `consentDialogTriggerToolbarItem`, and `consentDialogTriggerToolbarIcon`.
+
+With `noStyle`, use `data-corner`, `data-dragging`, and `data-snapping` on the toolbar to style its current position and interaction state.
+
+## 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
+
+### ConsentDialogTrigger
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentDialogTriggerProps\`|
+|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|
+
+\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerProps" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
+
+### ConsentDialogTriggerToolbar
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentDialogTriggerToolbarProps\`|
+|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|
+
+\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarProps" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
+
+### Toolbar Actions
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentDialogTriggerToolbarAction\`|
+|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|
+
+\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarAction" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
+
+### Preferences Action
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentDialogTriggerToolbarPreferences\`|
+|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|
+
+\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarPreferences" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

package/docs/{components → frameworks/react/components}/consent-dialog.md

@@ -1,6 +1,7 @@
 ---
 title: ConsentDialog
 description: A modal dialog where users can toggle individual consent categories.
+group: frameworks
 ---
 `ConsentDialog` is a modal that shows toggles for each consent category. In **opt-in jurisdictions**, it typically opens when users click "Customize" on `ConsentBanner`. It can also be controlled programmatically for use on settings pages regardless of jurisdiction.
 
@@ -160,18 +161,9 @@ If the stock dialog structure still works, prefer tokens, slots, and provider co
 
 ## Props
 
-### ConsentDialogProps
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|theme|undefined|Theme configuration override (deprecated)|-|Optional|
-|disableAnimation|boolean \|undefined|Disables all animations when true|-|Optional|
-|noStyle|boolean \|undefined|Removes default styles when true|-|Optional|
-|scrollLock|boolean \|undefined|Locks the scroll when true|-|Optional|
-|trapFocus|boolean \|undefined|Traps keyboard focus within a dialog when true|-|Optional|
-|open|boolean \|undefined|Control the open state. If omitted the dialog follows \`useConsentManager().activeUI === 'dialog'\`.|-|Optional|
-|legalLinks|(keyof LegalLinksTranslations)\[] \|null \|undefined|Controls which legal links to display. Options: \`undefined\` (default): Shows all available legal links; \`null\`: Explicitly hides all legal links; Array of keys: Shows only the specified legal links|-|Optional|
-|hideBranding|boolean \|undefined|Controls whether to hide the branding in the dialog footer.|-|Optional|
-|showTrigger|ConsentDialogTriggerProps \|undefined|Show a floating trigger button to resurface the consent dialog. Useful for allowing users to re-open the dialog after dismissing. Options: \`true\` - Show trigger with default settings; \`false\` - Hide trigger (default); \`ConsentDialogTriggerProps\` - Show trigger with custom props|false|Optional|
-|models|Model \|undefined|Which consent models this dialog responds to.|\['opt-in', 'opt-out']|Optional|
-|uiSource|string \|undefined|Override the UI source identifier sent with consent API calls.|'dialog'|Optional|
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentDialogProps\`|
+|Source Path|\`./packages/react/src/components/consent-dialog/consent-dialog.tsx\`|
+
+\*ExtractedTypeTable: Could not extract "ConsentDialogProps" from "./packages/react/src/components/consent-dialog/consent-dialog.tsx" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

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

@@ -0,0 +1,228 @@
+---
+title: ConsentManagerProvider
+description: The root provider component that initializes the consent system and
+  makes consent state available to all child components.
+group: frameworks
+---
+`ConsentManagerProvider` is the root component for the c15t consent system. It initializes the consent store, detects the user's jurisdiction, resolves translations, and provides consent state to all child components via React context.
+
+Every other c15t component and hook must be rendered inside this provider.
+
+## Basic Usage
+
+```tsx
+import { type ReactNode } from 'react';
+import { ConsentManagerProvider, ConsentBanner, ConsentDialog } from '@c15t/react';
+
+export default function ConsentManager({ children }: { children: ReactNode }) {
+  return (
+    <ConsentManagerProvider
+      options={{
+        mode: 'hosted',
+        backendURL: 'https://your-instance.c15t.dev',
+        consentCategories: ['necessary', 'measurement', 'marketing'],
+      }}
+    >
+      <ConsentBanner />
+      <ConsentDialog />
+      {children}
+    </ConsentManagerProvider>
+  );
+}
+```
+
+## Options Reference
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`CommonInlineStoreOptions\`|
+|Source Path|\`./packages/ui/src/theme/options.ts\`|
+
+\*ExtractedTypeTable: Could not extract "CommonInlineStoreOptions" from "./packages/ui/src/theme/options.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentManagerContentOptions\`|
+|Source Path|\`./packages/ui/src/theme/options.ts\`|
+
+\*ExtractedTypeTable: Could not extract "ConsentManagerContentOptions" from "./packages/ui/src/theme/options.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`UIOptions\`|
+|Source Path|\`./packages/ui/src/theme/types.ts\`|
+
+\*ExtractedTypeTable: Could not extract "UIOptions" from "./packages/ui/src/theme/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*
+
+## Mode: hosted vs offline
+
+```tsx
+// Hosted mode — persists to hosted backend
+<ConsentManagerProvider
+  options={{
+    mode: 'hosted',
+    backendURL: 'https://your-instance.c15t.dev',
+  }}
+>
+
+// Offline mode — local cookie storage only
+<ConsentManagerProvider
+  options={{
+    mode: 'offline',
+  }}
+>
+```
+
+See [Client Modes](/docs/frameworks/react/concepts/client-modes) for a detailed comparison.
+
+## Legal Links
+
+`legalLinks` defines the URLs shown in consent UI text (banner, dialog, and widget where applicable).
+Configure only the links you want to expose.
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    backendURL: 'https://your-instance.c15t.dev',
+    legalLinks: {
+      privacyPolicy: {
+        href: '/privacy',
+        target: '_self',
+      },
+      cookiePolicy: {
+        href: '/cookies',
+        target: '_self',
+      },
+      termsOfService: {
+        href: 'https://example.com/terms',
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        label: 'Terms of Service',
+      },
+    },
+  }}
+>
+```
+
+Notes:
+
+* Omitting a key (for example `termsOfService`) hides that link.
+* `label` overrides the translated text for that single link.
+* Use `_self` for internal pages and `_blank` + `rel="noopener noreferrer"` for external pages.
+* Control which of the configured links render in each component via the component's `legalLinks` prop.
+
+## Overrides
+
+`overrides` lets you force location/language signals instead of browser or network detection.
+This is useful for QA, local development, and preview environments.
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    backendURL: 'https://your-instance.c15t.dev',
+    overrides: {
+      country: 'DE',
+      region: 'BY',
+      language: 'de-DE',
+    },
+  }}
+>
+```
+
+You can also override Global Privacy Control (GPC) behavior during testing:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    backendURL: 'https://your-instance.c15t.dev',
+    overrides: {
+      gpc: true,
+    },
+  }}
+>
+```
+
+> ⚠️ **Warning:**
+> Treat overrides as an environment/testing tool. Avoid hard-coding production overrides unless that behavior is intentional for your deployment.
+
+## Policy Packs
+
+In hosted mode (recommended), the backend resolves the correct policy automatically — no frontend policy config needed:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    backendURL: 'https://your-instance.c15t.dev',
+  }}
+>
+```
+
+### Fallback: Offline Policies
+
+When no backend is available, `ConsentManagerProvider` accepts `offlinePolicy.policyPacks` for local policy resolution during development, testing, previews, or temporary backend outages:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    mode: 'offline',
+    offlinePolicy: {
+      i18n: {
+        defaultProfile: 'default',
+        messages: {
+          default: {
+            translations: {
+              en: { cookieBanner: { title: 'Privacy choices' } },
+            },
+          },
+          qc: {
+            fallbackLanguage: 'fr',
+            translations: {
+              en: { cookieBanner: { title: 'Quebec Privacy Settings' } },
+              fr: { cookieBanner: { title: 'Paramètres de confidentialité du Québec' } },
+            },
+          },
+        },
+      },
+      policyPacks: [
+        {
+          id: 'qc_opt_in',
+          match: { regions: [{ country: 'CA', region: 'QC' }] },
+          i18n: { messageProfile: 'qc' },
+          consent: { model: 'opt-in', expiryDays: 365 },
+          ui: { mode: 'banner' },
+        },
+        {
+          id: 'default_world',
+          match: { isDefault: true },
+          consent: { model: 'none' },
+          ui: { mode: 'none' },
+        },
+      ],
+    },
+    overrides: {
+      country: 'CA',
+      region: 'QC',
+    },
+  }}
+>
+```
+
+Notes:
+
+* `offlinePolicy` is only used in `offline` mode.
+* Treat offline policies as a development/testing tool or resilience fallback, not the primary production source of truth.
+* `offlinePolicy.i18n` lets offline mode mirror hosted `messageProfile` and profile-local `fallbackLanguage` behavior.
+* Omitting `offlinePolicy.policyPacks` uses the built-in synthetic opt-in fallback banner. Hosted network fallback uses the same opt-in banner.
+* `offlinePolicy: { policyPacks: [] }` is explicit no-banner mode.
+* In hosted mode, backend `policyPacks` remain the source of truth — frontend offline policies never override a live backend decision.
+
+Read the full guide at [Policy Packs](/docs/frameworks/react/policy-packs) and the conceptual model at [Policy Packs Concept](/docs/frameworks/react/concepts/policy-packs).
+
+## Props
+
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentManagerProviderProps\`|
+|Source Path|\`./packages/react/src/types/consent-manager.ts\`|
+
+\*ExtractedTypeTable: Could not extract "ConsentManagerProviderProps" from "./packages/react/src/types/consent-manager.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

package/docs/{components → frameworks/react/components}/consent-widget.md

@@ -1,6 +1,8 @@
 ---
 title: ConsentWidget
-description: An inline consent management widget for embedding in settings or privacy pages. Shows category toggles with accordion layout.
+description: An inline consent management widget for embedding in settings or
+  privacy pages. Shows category toggles with accordion layout.
+group: frameworks
 ---
 `ConsentWidget` is a standalone, inline consent management widget. Unlike `ConsentDialog` (which is a modal), the widget embeds directly in your page layout - ideal for privacy settings pages, account preferences, or any page where users should be able to manage consent without a modal overlay.
 
@@ -128,9 +130,9 @@ If the stock widget structure is already correct, stay with tokens and slots ins
 
 ## Props
 
-### ConsentWidgetProps
+|Property|Value|
+|:--|:--|
+|Type Name|\`ConsentWidgetProps\`|
+|Source Path|\`./packages/react/src/components/consent-widget/types.ts\`|
 
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|hideBranding|boolean \|undefined|Controls whether to hide the branding in the widget footer.|-|Optional|
-|legalLinks|(keyof LegalLinksTranslations)\[] \|null \|undefined|Controls which legal links to display in the widget footer.|-|Optional|
+\*ExtractedTypeTable: Could not extract "ConsentWidgetProps" from "./packages/react/src/components/consent-widget/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

package/docs/{components → frameworks/react/components}/dev-tools.md

@@ -1,10 +1,12 @@
 ---
 title: DevTools
-description: A development tool for inspecting consent state, geolocation, loaded scripts, and consent events in real time.
+description: A development tool for inspecting consent state, geolocation,
+  loaded scripts, and consent events in real time.
+group: frameworks
 ---
 `DevTools` is a floating panel that shows the internal state of the consent manager. Use it during development to inspect consent values, geolocation results, loaded scripts, and debug consent flows. Also exported as `C15TDevTools` if you need to avoid naming conflicts with other devtools.
 
-> ℹ️ **Info:**
+> ⚠️ **Warning:**
 > DevTools should only be included in development builds. The component renders nothing to the React tree - it injects directly into document.body.
 
 ## Installation
@@ -89,8 +91,9 @@ export function AppDevtools() {
 
 ## Props
 
-### C15TDevToolsProps
+|Property|Value|
+|:--|:--|
+|Type Name|\`C15TDevToolsProps\`|
+|Source Path|\`./packages/dev-tools/src/react.ts\`|
 
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|disabled|boolean \|undefined|Whether the DevTools should be disabled Useful for production builds|false|Optional|
+\*ExtractedTypeTable: Could not extract "C15TDevToolsProps" from "./packages/dev-tools/src/react.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

package/docs/{components → frameworks/react/components}/frame.md

@@ -1,6 +1,8 @@
 ---
 title: Frame
-description: A consent-gated content wrapper - children only mount when the required consent category is granted.
+description: A consent-gated content wrapper - children only mount when the
+  required consent category is granted.
+group: frameworks
 ---
 `Frame` conditionally renders its children based on consent state. When consent for the specified category is not granted, a placeholder is shown instead. Children are not mounted at all until consent is given, preventing any network requests or script execution.
 
@@ -62,12 +64,9 @@ When `Frame` mounts, it automatically adds its `category` to the active `consent
 
 ## Props
 
-### FrameProps
+|Property|Value|
+|:--|:--|
+|Type Name|\`FrameProps\`|
+|Source Path|\`./packages/react/src/components/frame/types.ts\`|
 
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|children|ReactNode|Content rendered when consent is granted. Children are not mounted until consent is given, preventing unnecessary network requests.|-|✅ Required|
-|category|AllConsentNames|Consent category required to render children.|-|✅ Required|
-|placeholder|ReactNode|A custom placeholder component to display when consent is not met. If not provided, a default placeholder will be displayed.|-|Optional|
-|noStyle|boolean \|undefined|When true, removes all default styling from the component|false|Optional|
-|theme|any|Custom theme to override default styles while maintaining structure and accessibility. Merges with defaults. Ignored when \`noStyle=\{true}\`.|undefined|Optional|
+\*ExtractedTypeTable: Could not extract "FrameProps" from "./packages/react/src/components/frame/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

package/docs/{concepts → frameworks/react/concepts}/client-modes.md

@@ -1,6 +1,8 @@
 ---
 title: Client Modes
-description: Choose how c15t connects to its backend - full hosted integration, offline-only, or bring your own backend.
+description: Choose how c15t connects to its backend - full hosted integration,
+  offline-only, or bring your own backend.
+group: frameworks
 ---
 c15t supports three client modes that determine how consent data is stored and synchronized. Choose the mode that matches your infrastructure:
 
@@ -8,7 +10,7 @@ c15t supports three client modes that determine how consent data is stored and s
 * **Offline mode** - Browser-only storage with no network requests. Best for local development, demos, static deployments, or controlled fallback scenarios.
 * **Custom mode** - Bring your own backend with custom endpoint handlers
 
-> ℹ️ **Info:**
+> ⚠️ **Warning:**
 > If you need durable consent records, server-side enforcement, or automatic jurisdiction detection, use hosted mode. Offline mode cannot provide those guarantees because consent lives only in the browser.
 
 <span id="c15t-mode" />

package/docs/{concepts → frameworks/react/concepts}/consent-categories.md

@@ -1,6 +1,7 @@
 ---
 title: Consent Categories
 description: How c15t organizes tracking technologies into five consent categories.
+group: frameworks
 ---
 c15t organizes tracking technologies into five consent categories that align with GDPR and ePrivacy Directive requirements. Rather than asking users to approve or deny individual cookies or scripts, each category groups related tracking purposes together so users can make meaningful, informed choices about how their data is used.
 

package/docs/{concepts → frameworks/react/concepts}/consent-models.md

@@ -1,6 +1,7 @@
 ---
 title: Consent Models
 description: How c15t determines consent behavior based on legal jurisdiction.
+group: frameworks
 ---
 c15t supports four consent models that control how consent defaults, banner visibility, and category gating behave:
 

package/docs/{concepts → frameworks/react/concepts}/cookie-management.md

@@ -1,7 +1,7 @@
 ---
 title: Cookie Management
 description: How c15t manages cookies through script, iframe, and network gating
-lastModified: 2026-02-10
+group: frameworks
 ---
 Cookie management is the most commonly misunderstood part of consent. A critical distinction: **c15t does not manage all cookies on your site.** It controls what scripts, iframes, and network requests are allowed to load - and those third-party resources are what set most cookies.
 
@@ -23,7 +23,7 @@ YouTube embeds, social media widgets, and other iframes can set cookies via thei
 **4. Network requests**
 Server responses can include `Set-Cookie` headers. If your page makes requests to third-party APIs or CDNs, those responses may set cookies. c15t's network blocker can intercept `fetch` and `XMLHttpRequest` calls to prevent these requests from happening without consent.
 
-> ℹ️ **Info:**
+> ⚠️ **Warning:**
 > Don't list these cookies in your banner. The cookie names above (\_ga, \_gid, \_fbp, \_fbc) are implementation details — they matter for developers understanding how tracking works, but they should not be exposed to end users in your consent UI. Users don't know what \_ga means, and listing it doesn't help them make an informed choice. Instead, use purpose-based consent categories like "measurement" or "marketing" that communicate why data is collected, not how it is stored.
 
 ## Why Revoking Consent Requires a Page Reload
@@ -76,7 +76,7 @@ function ConsentManager({ children }: { children: ReactNode }) {
 > ℹ️ **Info:**
 > The reload and deferred sync are part of the broader initialization flow. See Initialization Flow for the full sequence.
 >
-> ℹ️ **Info:**
+> ⚠️ **Warning:**
 > Setting reloadOnConsentRevoked: false means previously-loaded scripts will continue running after consent is revoked. Only disable this if you have a specific strategy for handling script cleanup.
 
 ## The Revocation Flow

package/docs/{concepts → frameworks/react/concepts}/glossary.md

@@ -1,6 +1,7 @@
 ---
 title: Glossary
 description: Key terms used throughout the c15t documentation.
+group: frameworks
 ---
 ### Core Terms
 

package/docs/{concepts → frameworks/react/concepts}/initialization-flow.md

@@ -1,6 +1,7 @@
 ---
 title: Initialization Flow
 description: What happens from provider mount to first render — the full consent lifecycle.
+group: frameworks
 ---
 When the consent provider mounts, it creates a cached consent runtime, reads any stored consent from the browser, fetches the resolved policy from the backend (or uses SSR/offline data), and decides whether to show the banner. This entire sequence completes before the first meaningful consent-aware render.
 

package/docs/{concepts → frameworks/react/concepts}/policy-packs.md

@@ -1,6 +1,7 @@
 ---
 title: Policy Packs
 description: How c15t resolves regional consent policies and what a policy pack controls.
+group: frameworks
 ---
 Different countries need different consent experiences. Policy packs let you define those rules once — c15t picks the right one automatically based on where the visitor is.
 

package/docs/{headless.md → frameworks/react/headless.md}

@@ -1,6 +1,8 @@
 ---
 title: Headless Mode
-description: Build fully custom consent UI using only hooks - no pre-built components required.
+description: Build fully custom consent UI using only hooks - no pre-built
+  components required.
+group: frameworks
 ---
 c15t's headless mode means using the hooks (`useConsentManager`, `useTranslations`, etc.) without any pre-built UI components. This gives you complete control over the consent experience.
 

package/docs/{hooks → frameworks/react/hooks}/use-color-scheme.md

@@ -1,6 +1,7 @@
 ---
 title: useColorScheme
 description: Manage light/dark mode preferences for consent components.
+group: frameworks
 ---
 `useColorScheme()` manages the color scheme preference for c15t components. It sets up the appropriate CSS class and media query listeners.
 

package/docs/{hooks → frameworks/react/hooks}/use-consent-manager/checking-consent.md

@@ -1,6 +1,8 @@
 ---
 title: Checking Consent
-description: Use has() for flexible consent checks with AND, OR, and NOT logic. Check if any consent exists with hasConsented().
+description: Use has() for flexible consent checks with AND, OR, and NOT logic.
+  Check if any consent exists with hasConsented().
+group: frameworks
 ---
 ## has(condition)