@c15t/react 3.1.0-canary.0 → 3.2.0-canary.0

package/dist-types/component-hooks/use-consent-text-direction.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The text direction of the language c15t shows consent copy in, for a
+ * custom banner or preference center.
+ *
+ * @remarks
+ * c15t can pick the copy's language from the visitor's browser, so an
+ * Arabic or Hebrew visitor can read right-to-left copy on a left-to-right
+ * page. The stock banner and dialog set `dir` on their root from this
+ * language. Set it on yours the same way.
+ *
+ * @returns `'rtl'` for a right-to-left language, otherwise `'ltr'`.
+ *
+ * @example
+ * ```tsx
+ * function Banner({ children }: { children: React.ReactNode }) {
+ *   const dir = useConsentTextDirection();
+ *   return <section dir={dir}>{children}</section>;
+ * }
+ * ```
+ * @public
+ */
+export declare const useConsentTextDirection: () => "ltr" | "rtl";

package/dist-types/component-hooks/use-vendors-listed-under.d.ts

@@ -0,0 +1,30 @@
+import type { AllConsentNames, ResolvedVendor } from '@c15t/core';
+/**
+ * The vendors the stock preference center lists under one category, for a
+ * custom preference center that shows the same rows.
+ *
+ * @remarks
+ * A vendor known only from a script's `vendor` slug gets no row until the
+ * site declares a vendor in `vendors` or on the backend, unless the visitor
+ * turned it off. Then it stays listed so the visitor can turn it on again.
+ * Under an `iab` policy the list is empty.
+ *
+ * @param category - The category row being rendered.
+ * @returns The vendors to list, in declared order.
+ *
+ * @example
+ * ```tsx
+ * function CategoryVendors({ category }: { category: AllConsentNames }) {
+ *   const vendors = useVendorsListedUnder(category);
+ *   return (
+ *     <ul>
+ *       {vendors.map((vendor) => (
+ *         <li key={vendor.id}>{vendor.name ?? vendor.id}</li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ * @public
+ */
+export declare const useVendorsListedUnder: (category: AllConsentNames) => ResolvedVendor[];

package/dist-types/components/prompt/atoms/root.d.ts

@@ -62,8 +62,8 @@ interface ConsentBannerRootProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Placement of the prompt. Overrides `presentation.prompt.position`.
      * @remarks Must be valid for the resolved variant; otherwise the variant
-     * default is used and a development diagnostic is logged. Host-chosen
-     * positions are never mirrored for right-to-left text.
+     * default is used and a development diagnostic is logged. Right-to-left
+     * text does not move the prompt.
      */
     position?: PromptPosition;
     /**
@@ -75,7 +75,7 @@ interface ConsentBannerRootProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * The banner, rendered where the server can stream it: see
- * `StreamedSurface`.
+ * `StreamedConsentSurface`.
  */
 declare const ConsentBannerRoot: FC<ConsentBannerRootProps>;
 declare const Root: FC<ConsentBannerRootProps>;

package/dist-types/components/prompt/prompt.d.ts

@@ -151,8 +151,8 @@ export interface ConsentBannerProps {
     /**
      * Placement of the prompt. Overrides `presentation.prompt.position`.
      * @remarks Must be valid for the resolved variant; otherwise the variant
-     * default is used and a development diagnostic is logged. Host-chosen
-     * positions are never mirrored for right-to-left text.
+     * default is used and a development diagnostic is logged. Right-to-left
+     * text does not move the prompt.
      */
     position?: PromptPosition;
     /**
@@ -164,7 +164,8 @@ export interface ConsentBannerProps {
 }
 /**
  * The stock banner. It reads the policy to choose its buttons, so all of
- * it renders where the server can stream it: see `StreamedSurface`.
+ * it renders where the server can stream it: see
+ * `StreamedConsentSurface`.
  */
 export declare const ConsentBanner: FC<ConsentBannerProps>;
 /**

package/dist-types/components/prompt/surface-context.d.ts

@@ -9,7 +9,7 @@ import type { PromptPosition, PromptVariant } from '@c15t/core';
 export interface ConsentBannerSurface {
     /** Shape of the first-layer prompt. */
     variant: PromptVariant;
-    /** Placement, already mirrored for right-to-left text when defaulted. */
+    /** Placement. It stays the same for right-to-left text. */
     position: PromptPosition;
     /** Whether the host chose the position or the resolver defaulted it. */
     positionSource: 'host' | 'default';
@@ -30,16 +30,3 @@ export declare const ConsentBannerSurfaceContext: import("react").Context<Consen
  * @public
  */
 export declare const useConsentBannerSurface: () => ConsentBannerSurface;
-/**
- * Mirror a defaulted corner for right-to-left text so the banner keeps
- * hugging the reading start. Host-chosen positions and edge or center
- * placements are returned unchanged.
- *
- * @param position - The resolved position.
- * @param positionSource - Whether the host chose it.
- * @param variant - The resolved variant; only corners of floating and widget mirror.
- * @param textDirection - Document text direction.
- * @returns The position to render.
- * @internal
- */
-export declare const mirrorDefaultPosition: (position: PromptPosition, positionSource: 'host' | 'default', variant: PromptVariant, textDirection: 'ltr' | 'rtl') => PromptPosition;

package/dist-types/components/prompt/use-banner-copy.d.ts

@@ -4,13 +4,18 @@
  * @remarks
  * A notice prompt reads the `noticeTitle` and `noticeDescription` copy so
  * it informs rather than asks. Languages that have not translated the notice
- * copy fall back to the choice copy rather than to English.
+ * copy fall back to their own choice copy, then to English.
  *
  * @returns The copy the banner should render when no props override it.
+ *
+ * @example
+ * ```tsx
+ * const { title, description } = useBannerCopy();
+ * ```
  * @public
  */
 export declare const useBannerCopy: () => {
-    title: string | undefined;
-    description: string | undefined;
+    title: string;
+    description: string;
     prompt: 'choice' | 'notice' | 'none';
 };

package/dist-types/components/shared/streamed-surface.d.ts

@@ -8,16 +8,53 @@ import type { ReactNode } from 'react';
  * @internal
  */
 export declare const readRecorded: <Value>(thenable: PromiseLike<Value>) => Value;
+/** Props for {@link StreamedConsentSurface}. */
+export interface StreamedConsentSurfaceProps {
+    /** The surface. Its consent hooks must run inside this component. */
+    children: ReactNode;
+}
 /**
- * Renders a consent surface the server can stream. While the provider's
- * `prefetch` is a promise, the surface waits for it in its own Suspense
- * boundary: the rest of the page streams at once, and the surface follows
- * in a later chunk of the same response, rendered from the resolved
- * config. It shows only when that config carries a policy that shows it.
- * Hydration reads the same config, so the surface hydrates in place.
+ * Renders a consent surface the server can stream, such as a banner built
+ * with the headless hooks. The stock `ConsentBanner` uses it too.
  *
- * @internal
+ * While the provider's `prefetch` is a promise, as with Next.js
+ * `<ConsentRoot state={resolveConsent()}>`, the surface waits for it in its
+ * own Suspense boundary: the rest of the page streams at once, and the
+ * surface follows in a later chunk of the same response, rendered from the
+ * resolved config. It shows only when that config carries a policy that
+ * shows it. Hydration reads the same config, so the surface hydrates in
+ * place. Without a pending `prefetch`, it renders its children as they are.
+ *
+ * Call the hooks in a component inside it. Hooks called above it read the
+ * snapshot from before consent resolved, which has no banner.
+ *
+ * @param props - The surface to stream.
+ * @returns The children, in a Suspense boundary while consent streams.
+ * @example
+ * ```tsx
+ * 'use client';
+ * import {
+ *   StreamedConsentSurface,
+ *   useHeadlessConsentUI,
+ * } from 'c15t/next/headless';
+ *
+ * function BannerContent() {
+ *   const { banner, performAction } = useHeadlessConsentUI();
+ *   if (!banner.isVisible) return null;
+ *   return (
+ *     <section aria-label="Cookie consent">
+ *       <button onClick={() => performAction('accept')}>Accept</button>
+ *     </section>
+ *   );
+ * }
+ *
+ * export function ConsentBanner() {
+ *   return (
+ *     <StreamedConsentSurface>
+ *       <BannerContent />
+ *     </StreamedConsentSurface>
+ *   );
+ * }
+ * ```
  */
-export declare const StreamedSurface: ({ children }: {
-    children: ReactNode;
-}) => string | number | bigint | boolean | React.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
+export declare const StreamedConsentSurface: ({ children, }: StreamedConsentSurfaceProps) => string | number | bigint | boolean | React.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;

package/dist-types/context.d.ts

@@ -1,5 +1,5 @@
 import type { AllConsentNames, ConsentKernel, ConsentPresentation, ConsentSnapshot } from '@c15t/core';
-import type { StreamedPrefetch } from '@c15t/core/runtime';
+import type { ConsentRuntime, StreamedPrefetch } from '@c15t/core/runtime';
 /**
  * React context carrying the kernel instance.
  *
@@ -16,6 +16,8 @@ export interface ProviderServices {
     getConsentCategories: () => readonly AllConsentNames[];
     /** Whether the runtime has started: records hydrated, prefetch adopted. */
     isStarted: () => boolean;
+    /** The runtime the provider renders, owned or borrowed. */
+    runtime: ConsentRuntime;
     /**
      * Store a language override and load its copy: init runs again on the
      * provider's own kernel while it is enabled, and a borrowed runtime

package/dist-types/event-dispatcher.d.ts

@@ -0,0 +1,24 @@
+import type { EventDispatcher, RuntimeEventDispatcherOptions } from '@c15t/core/events';
+/**
+ * Get the provider's event dispatcher.
+ *
+ * It delivers to the scripts the provider registered, plus any you pass, and
+ * checks consent when it sends, so a revoked category stops the next event.
+ * The returned object stays the same for the provider's lifetime, and
+ * pageview de-duplication survives navigation, consent changes and the
+ * `enabled` toggle.
+ *
+ * @param options - Extra `scripts`, SPA `pageviews` integrations and
+ * injectable `globals`. The latest committed options apply on each call.
+ * @returns A dispatcher with `track` and `pageview`.
+ * @throws {Error} When called outside `ConsentProvider`.
+ * @example
+ * ```tsx
+ * const events = useEventDispatcher({ pageviews: ['posthog'] });
+ * const pathname = usePathname();
+ * useEffect(() => events.pageview(pathname), [events, pathname]);
+ * ```
+ */
+export declare const useEventDispatcher: (options?: RuntimeEventDispatcherOptions) => EventDispatcher;
+export type { EventDispatcher, EventProperties } from '@c15t/core/events';
+export type { RuntimeEventDispatcherOptions as UseEventDispatcherOptions };

package/dist-types/headless.d.ts

@@ -4,10 +4,19 @@
  *
  * Pair with `ConsentProvider` from `@c15t/react` (or `@c15t/react/provider`).
  */
-export { defaultTranslationConfig, detectBrowserLanguage, mergeTranslationConfigs, prepareTranslationConfig, } from '@c15t/core';
+export { defaultTranslationConfig, detectBrowserLanguage, mergeTranslationConfigs, prepareTranslationConfig, resolveActionLabels, resolvePreferenceControlLabels, resolvePromptCopy, } from '@c15t/core';
+export type { PreferenceControl, PresentationAction, PromptCopy, ResolvedVendor, } from '@c15t/core';
+export { type ConsentLabels, useConsentLabels, } from './component-hooks/use-consent-labels.js';
+export { useConsentTextDirection } from './component-hooks/use-consent-text-direction.js';
+export { type ConsentGateState, type UseConsentGateResult, useConsentGate, } from './component-hooks/use-consent-gate.js';
 export { type ConsentDialogTriggerVisibility, type UseConsentDialogTriggerOptions, type UseConsentDialogTriggerResult, useConsentDialogTrigger, } from './component-hooks/use-panel-trigger.js';
 export { type HeadlessConsentBannerAction, type HeadlessConsentBannerState, type HeadlessConsentDialogAction, type HeadlessConsentDialogState, type HeadlessConsentSurface, type HeadlessConsentSurfaceAction, type HeadlessConsentSurfaceState, type HeadlessConsentWriteAction, useHeadlessConsentUI, } from './component-hooks/use-headless-consent-ui.js';
 export { useTranslations } from './component-hooks/use-translations.js';
+export { useVendorsListedUnder } from './component-hooks/use-vendors-listed-under.js';
+export { useBannerCopy } from './components/prompt/use-banner-copy.js';
+export { StreamedConsentSurface, type StreamedConsentSurfaceProps, } from './components/shared/streamed-surface.js';
 export { useColorScheme } from './hooks/use-color-scheme.js';
 export { useFocusTrap } from './hooks/use-focus-trap.js';
+export { useIABPolicyGuard } from './hooks/use-iab-policy-guard.js';
+export { useScrollLock } from './hooks/use-scroll-lock.js';
 export type { ReactUIOptions } from './types/manager.js';

package/dist-types/hooks/use-iab-policy-guard.d.ts

@@ -28,8 +28,24 @@ export declare const missingIABProviderError: () => IABUnavailableError;
  * around them, so a missing IAB context alone does not prove the app has
  * none. The check also passes once `@c15t/react/iab` has loaded.
  *
+ * A custom banner or preference center that only handles opt-in and
+ * opt-out should call this too, and render nothing when `useModel()` is
+ * `'iab'`, as the standard surfaces do.
+ *
  * @throws {IABUnavailableError} When the policy needs IAB and neither an
  * IAB context nor `@c15t/react/iab` is present.
- * @internal
+ *
+ * @example
+ * ```tsx
+ * function Banner() {
+ *   useIABPolicyGuard();
+ *   const model = useModel();
+ *   const { banner } = useHeadlessConsentUI();
+ *   const copy = useBannerCopy();
+ *   if (model === 'iab' || !banner.isVisible) return null;
+ *   return <section>{copy.title}</section>;
+ * }
+ * ```
+ * @public
  */
 export declare const useIABPolicyGuard: () => void;

package/dist-types/hooks/use-scroll-lock.d.ts

@@ -1,5 +1,19 @@
 /**
- * Hook to manage document scroll locking.
- * React wrapper for `@c15t/ui` setupScrollLock.
+ * Locks page scroll while `shouldLock` is true, as the stock banner does
+ * when its policy is blocking.
+ *
+ * @remarks
+ * Locks are counted, so a banner and a dialog can both hold one and the page
+ * scrolls again only when both release. Unmounting releases the lock.
+ *
+ * @param shouldLock - Whether the page should stop scrolling
+ *
+ * @example
+ * ```tsx
+ * const { banner } = useHeadlessConsentUI();
+ * useScrollLock(banner.isVisible && banner.blocking);
+ * ```
+ *
+ * @public
  */
 export declare const useScrollLock: (shouldLock: boolean) => void;

package/dist-types/index-parts/event-dispatcher.d.ts

@@ -0,0 +1,7 @@
+/**
+ * One group of `@c15t/react`'s public exports. The package index re-exports
+ * each group with `export *`, so a bundler that splits code by reachability
+ * (esbuild) does not treat every module the index names as part of an app
+ * that imports one hook: only the groups it uses are live.
+ */
+export { useEventDispatcher } from '../event-dispatcher.js';

package/dist-types/index-parts/offline.d.ts

@@ -4,4 +4,4 @@
  * (esbuild) does not treat every module the index names as part of an app
  * that imports one hook: only the groups it uses are live.
  */
-export { offline } from '../transports/offline.js';
+export { local, offline } from '../transports/offline.js';

package/dist-types/index.d.ts

@@ -40,6 +40,7 @@ export type { ConsentDialogTriggerProps, ConsentDialogTriggerToolbarAction, Cons
 export type { ConsentWidgetCompoundComponent, ConsentWidgetProps, } from './components/preferences/index.js';
 export type { ConsentGateProps, FrameProps } from './components/consent-gate/index.js';
 export type { ConsentDraftHandle, ConsentDraftProviderProps, VendorDraftHandle, } from './draft.js';
+export type { EventDispatcher, EventProperties, UseEventDispatcherOptions, } from './event-dispatcher.js';
 export type { UseIframeBlockerOptions, UseNetworkBlockerOptions, UsePersistenceOptions, UseScriptLoaderOptions, } from './module-hooks.js';
 export type { ConsentProviderOptions, ConsentProviderCallbacks, ConsentProviderPrefetch, ConsentProviderProps, ExternalRuntimeProviderOptions, ExternalRuntimeProviderProps, OwnedRuntimeProviderProps, } from './provider.js';
 export type { ConsentThemeProps } from './consent-theme.js';
@@ -58,6 +59,7 @@ export * from './index-parts/consent-dialog-trigger.js';
 export * from './index-parts/consent-gate.js';
 export * from './index-parts/frame.js';
 export * from './index-parts/draft.js';
+export * from './index-parts/event-dispatcher.js';
 export * from './index-parts/translations.js';
 export * from './index-parts/module-hooks.js';
 export * from './index-parts/provider.js';

package/dist-types/modes.d.ts

@@ -22,5 +22,5 @@ export { hosted } from './transports/hosted.js';
 export type { HostedOptions } from './transports/hosted.js';
 export { manifest } from './transports/manifest.js';
 export type { BrowserManifestModeFactory, ManifestModeOptions, } from './transports/manifest.js';
-export { offline } from './transports/offline.js';
+export { local, offline } from './transports/offline.js';
 export type { OfflineModeOptions } from './transports/offline.js';

package/dist-types/module-hooks/script-loader.d.ts

@@ -1,6 +1,15 @@
 import type { Script, ScriptLoaderDebugEvent, ScriptLoaderHandle } from '@c15t/core/modules/script-loader';
 export interface UseScriptLoaderOptions {
     onDebug?: (event: ScriptLoaderDebugEvent) => void;
+    /**
+     * Set `false` to start every `scripts` entry after hydration. By default
+     * `ConsentRoot` in `c15t/next` and `c15t/tanstack-start` starts the
+     * entries the visitor's consent already allows from the server HTML,
+     * before the page hydrates.
+     *
+     * @default true
+     */
+    serverStart?: boolean;
 }
 export declare const useScriptLoader: (scripts: Script[], options?: UseScriptLoaderOptions) => ScriptLoaderHandle;
 export type { Script, ScriptLoaderDebugEvent, ScriptLoaderHandle };

package/dist-types/provider.d.ts

@@ -66,20 +66,20 @@ export interface ConsentProviderOptions extends ConsentControlOptions, Pick<Reac
     /**
      * Transport factory the provider builds its kernel with. Required.
      *
-     * Pass `hosted()` to talk to a c15t backend, `offline()` to resolve
+     * Pass `hosted()` to talk to a c15t backend, `local()` to resolve
      * policies locally with no network, or `custom()` to supply your own
      * kernel transport. This is an initial-only
      * option: remount the provider to change it.
      *
      * @example
      * ```tsx
-     * import { ConsentProvider, hosted, offline } from '@c15t/react';
+     * import { ConsentProvider, hosted, local } from '@c15t/react';
      *
      * <ConsentProvider options={{ mode: hosted({ backendURL: '/api/c15t' }) }}>
      *   {children}
      * </ConsentProvider>
      *
-     * <ConsentProvider options={{ mode: offline() }}>{children}</ConsentProvider>
+     * <ConsentProvider options={{ mode: local() }}>{children}</ConsentProvider>
      * ```
      */
     mode: ProviderTransportFactory;

package/dist-types/transports/offline.d.ts

@@ -1,9 +1,9 @@
 /**
- * Offline mode for the React provider: core's `offline()`, which resolves
+ * Local mode for the React provider: core's `local()`, which resolves
  * policy rules locally and switches copy when `overrides.language` or
  * `useSetLanguage()` names a language the bundle or `i18n.messages` has.
  * The language a server prefetch detected from `Accept-Language` keeps the
  * startup copy.
  */
-export { offline } from '@c15t/core';
+export { local, offline } from '@c15t/core';
 export type { OfflineModeOptions } from '@c15t/core';

package/dist-types/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.1.0-canary.0";
+export declare const version = "3.2.0-canary.0";

package/docs/README.md

@@ -39,7 +39,7 @@ These docs describe c15t v3. Find your app's row in Choose your setup, then foll
 - [Customize](./frameworks/react/customize.md): Change the colors, fonts, layout, button styles and copy of the c15t banner and dialog in a React app with theme tokens, provider options and slots, and load the stylesheet yourself when you need to.
 - [Embeds](./frameworks/react/embeds.md): Keep YouTube videos, maps and other iframes out of a React page until their consent category is allowed, with ConsentGate or the iframe blocker in ConsentProvider.
 - [IAB GPP](./frameworks/react/gpp.md): Add the IAB Global Privacy Platform API (__gpp) to a React app with ConsentGPP from @c15t/react/gpp, so ad tech can read US state opt-outs and the TCF EU consent string.
-- [Headless](./frameworks/react/headless.md): Build a custom consent banner in React with the c15t/react/headless hooks inside your ConsentProvider.
+- [Headless](./frameworks/react/headless.md): Build a custom consent banner or embed gate in React with the c15t/react/headless hooks inside your ConsentProvider.
 - [Hooks](./frameworks/react/hooks.md): Gate features and save consent choices in React components with the focused hooks exported from c15t/react.
 - [IAB TCF](./frameworks/react/iab.md): Mount the IAB TCF banner and dialog inside a React ConsentProvider and configure the CMP ID, policy and vendor data.
 - [Network blocker](./frameworks/react/network-blocker.md): Hold fetch and XMLHttpRequest calls in a React app until their consent category is allowed, with networkBlocker rules in the ConsentProvider options.
@@ -56,9 +56,9 @@ These docs describe c15t v3. Find your app's row in Choose your setup, then foll
 - [Choose your setup](./concepts/choose-your-setup.md): Pick the c15t setup for your framework, rendering mode and hosting, and decide who runs the consent backend.
 - [Consent categories](./concepts/consent-categories.md): Assign scripts, embeds and features to c15t consent categories, and understand which categories the preference dialog shows.
 - [Consent state reference](./concepts/consent-state.md): How c15t saves choices, gates IAB vendors, hydrates server records and keeps browser tabs and storage in step.
-- [Data fetching](./concepts/data-fetching.md): Choose the recommended build-time policy snapshot or runtime manifest fetching, backend /init, browser resolution or offline rules, and understand where consent choices are saved.
+- [Data fetching](./concepts/data-fetching.md): Choose the recommended build-time policy snapshot or runtime manifest fetching, backend /init, browser resolution or local rules, and understand where consent choices are saved.
 - [How consent works](./concepts/how-consent-works.md): What c15t decides on each page load, the difference between a permission and a recorded choice, and what happens when a visitor saves.
-- [Consent modes](./concepts/modes.md): Reference for manifest(), hosted() and offline() in every c15t framework package, where each one resolves the visitor's policy, what it adds to first-load JavaScript, the build-time manifest fetch and its failure policy, and the backend URL variable each framework reads.
+- [Consent modes](./concepts/modes.md): Reference for manifest(), hosted() and local() in every c15t framework package, where each one resolves the visitor's policy, what it adds to first-load JavaScript, the build-time manifest fetch and its failure policy, and the backend URL variable each framework reads.
 - [Policies](./concepts/policies.md): How policy models, prompts and scope decide what c15t asks visitors, where to change the rules, and why a banner may not appear.
 
 ## Guides
@@ -86,6 +86,7 @@ These docs describe c15t v3. Find your app's row in Choose your setup, then foll
 - [Ahrefs Analytics](./integrations/ahrefs-analytics.md): Load Ahrefs Web Analytics only after measurement consent with the c15t ahrefsAnalytics helper, and check it in DevTools.
 - [Amplitude](./integrations/amplitude.md): Load the Amplitude Browser SDK 2 only after measurement consent with the c15t amplitude helper, which opts the SDK out on revocation and back in on a new grant.
 - [Custom integrations](./integrations/building-integrations.md): Gate a vendor that has no @c15t/integrations helper, or sync consent with an SDK your app already loads, using a c15t script configuration.
+- [Clay](./integrations/clay.md): Load Clay web intent only after marketing consent and understand its storage and revocation limits.
 - [Clearbit](./integrations/clearbit.md): Load the Clearbit enrichment tag only after marketing consent with the c15t clearbit helper, and check it in DevTools.
 - [Cloudflare Web Analytics](./integrations/cloudflare-web-analytics.md): Load the Cloudflare Web Analytics beacon only after measurement consent with the c15t cloudflareWebAnalytics helper, and check it in DevTools.
 - [Cloudflare Zaraz](./integrations/cloudflare-zaraz.md): Sync c15t permissions to Cloudflare Zaraz purposes with the c15t cloudflareZaraz bridge, which runs on every page without loading a script, and check the tools it controls.
@@ -110,7 +111,12 @@ These docs describe c15t v3. Find your app's row in Choose your setup, then foll
 - [Mixpanel](./integrations/mixpanel-analytics.md): Load the Mixpanel SDK on every page with the c15t mixpanelAnalytics helper, which switches Mixpanel tracking on and off with measurement consent, and check it in DevTools.
 - [OneDollarStats](./integrations/one-dollar-stats.md): Load the OneDollarStats tracker only after measurement consent with the c15t oneDollarStats helper, forward its data-attribute settings, and check it in DevTools.
 - [OpenAI Pixel](./integrations/openai-pixel.md): Load the ChatGPT Ads Measurement Pixel only after marketing consent with the c15t openaiPixel helper, guard oaiq conversion calls, and check it in DevTools.
-- [Integrations](./integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, email and SMS, chat and embedded content.
+- [Other ads and pixels](./integrations/other-ads-and-pixels.md): Consent-gated helpers for ad platforms and conversion pixels that don't need a full guide.
+- [Other analytics tools](./integrations/other-analytics.md): Consent-gated helpers for analytics tools that don't need a full guide.
+- [Other chat and support tools](./integrations/other-chat-and-support.md): Consent-gated helpers for chat and support tools that don't need a full guide.
+- [Other email, SMS and marketing automation tools](./integrations/other-email-and-sms.md): Consent-gated helpers for email, SMS and marketing automation tools that don't need a full guide.
+- [Experimentation and personalization tools](./integrations/other-experience.md): Consent-gated helpers for experimentation and personalization tools that don't need a full guide.
+- [Integrations](./integrations/overview.md): Find all c15t integrations for analytics, tag managers, advertising, experimentation and personalization, email and SMS, chat and embedded content.
 - [Pinterest Tag](./integrations/pinterest-tag.md): Load the Pinterest Tag only after marketing consent with the c15t pinterestTag helper, guard pintrk event calls, and check it in DevTools.
 - [Pirsch](./integrations/pirsch.md): Load Pirsch Analytics only after measurement consent with the c15t pirsch helper, keep custom event bindings working, and check it in DevTools.
 - [Plausible Analytics](./integrations/plausible-analytics.md): Load the Plausible Analytics tracker only after measurement consent with the c15t plausibleAnalytics helper, and check it in DevTools.
@@ -121,6 +127,7 @@ These docs describe c15t v3. Find your app's row in Choose your setup, then foll
 - [Rybbit Analytics](./integrations/rybbit-analytics.md): Load Rybbit Analytics only after measurement consent with the c15t rybbitAnalytics helper, map its tracking options to data attributes, and check it in DevTools.
 - [Segment](./integrations/segment.md): Load Segment Analytics.js only after measurement consent with the c15t segment helper, guard your own track and identify calls, and check it in DevTools.
 - [Sentry](./integrations/sentry.md): Configure Sentry's CDN or your own SDK with consent for error monitoring, Session Replay and user data.
+- [Shopify](./integrations/shopify.md): Send c15t consent to Shopify's Customer Privacy API from a Hydrogen storefront, so Shopify analytics wait for the visitor's choice and follow each later change.
 - [Snapchat Pixel](./integrations/snapchat-pixel.md): Load the Snapchat Pixel only after marketing consent with the c15t snapchatPixel helper, guard snaptr event calls, and check it in DevTools.
 - [TikTok Pixel](./integrations/tiktok-pixel.md): Load the TikTok Pixel only after marketing consent with the c15t tiktokPixel helper, guard ttq event calls, and check it in DevTools.
 - [Umami Analytics](./integrations/umami-analytics.md): Load the Umami Analytics tracker only after measurement consent with the c15t umamiAnalytics helper, point it at a self-hosted instance, and check it in DevTools.

package/docs/concepts/choose-your-setup.md

@@ -45,11 +45,11 @@ and subscribe to it from your components.
 The backend supplies policies and stores consent records. Every setup above
 works with each option; only the URL changes.
 
-| Option                                                               | Use it when                                                                                                                                                    |
-| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Inth](https://inth.com)                                             | You want hosted policies and consent records. The guides use this.                                                                                             |
-| [Self-hosted c15t backend](https://c15t.com/docs/self-host/overview) | You need to run the service and its database yourself.                                                                                                         |
-| Offline mode                                                         | Local development and tests. Policies live in your code and choices stay in the browser, with no consent records. Not recommended for production environments. |
+| Option                                                               | Use it when                                                                                                                                                                        |
+| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Inth](https://inth.com)                                             | You want hosted policies and consent records. The guides use this.                                                                                                                 |
+| [Self-hosted c15t backend](https://c15t.com/docs/self-host/overview) | You need to run the service and its database yourself.                                                                                                                             |
+| [Local mode](./modes.md#local)                                       | Local development and tests. Policies live in your code and choices stay in the browser. c15t keeps no server-side record of consent. Not recommended for production environments. |
 
 To use Inth, create a project, set its policy rules, add your site's origin to
 its trusted origins, and copy the backend URL. The guides use the placeholder
@@ -60,10 +60,10 @@ including any path prefix.
 
 Where consent resolves decides what the visitor's first HTML contains.
 
-| Rendering                                    | What the visitor gets                                                                                                                                                                   |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| The server resolves consent for each request | The server reads the visitor's cookie and location headers, so the browser starts with the answer. Gated scripts can run right after hydration, and the banner can be part of the HTML. |
-| The browser resolves consent                 | The HTML is the same for everyone. After the page loads, the browser requests the policy, then shows the banner or runs gated scripts.                                                  |
+| Rendering                                    | What the visitor gets                                                                                                                                                                                                                                       |
+| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| The server resolves consent for each request | The server reads the visitor's cookie and location headers, so the browser starts with the answer. The banner can be part of the HTML. In Next.js, TanStack Start, Nuxt and SvelteKit, scripts the visitor's consent already allows start before hydration. |
+| The browser resolves consent                 | The HTML is the same for everyone. After the page loads, the browser requests the policy, then shows the banner or runs gated scripts.                                                                                                                      |
 
 A static or prerendered page cannot contain one visitor's consent, because the
 same HTML goes to everyone. Static sites still use Inth; the browser talks to it