@c15t/react 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist-types/chunk-warming.d.ts

@@ -1,19 +1,52 @@
 /**
- * Chunk-warming registry (Vue-parity perf work, item #2).
+ * Chunk-warming registry for the deferred `ConsentDialog`.
  *
- * The aggregate `ConsentDialog` is lazy-loaded and — since the interaction
- * fix — deferred until it can actually render. That leaves one cold path:
- * the user's *first* "customize" click pays the chunk network+parse cost
- * under throttle. Surfaces register their lazy import here, and intent
- * signals (pointerenter/focus on the customize button) warm the chunk
- * before the click.
+ * The aggregate `ConsentDialog` is lazy-loaded and deferred until it can
+ * render, so the first open would otherwise wait for its chunk. Surfaces
+ * register their lazy import here, and two signals start it early:
+ *
+ * - Intent: pointerenter or focus on any `ConsentButton` that opens the
+ *   dialog, including the stock banner's Customize button.
+ * - Idle: once the page has loaded and the browser is idle, while the banner
+ *   is shown or a dialog trigger is mounted. This covers an immediate tap or
+ *   focus-and-Enter, which leaves no lead time for intent warming.
  *
  * Module-level registry keeps banner components decoupled from the
  * aggregate exports (no context change, tree-shakes with the aggregate).
  */
 type Warmer = () => void;
+/**
+ * When the deferred consent dialog starts loading before it opens.
+ *
+ * - `'idle'`: after the page's load event, in browser idle time, while the
+ *   banner is shown or a button that opens the dialog is mounted. Also on
+ *   hover or focus of such a button.
+ * - `'intent'`: only on hover or focus of a button that opens the dialog.
+ *
+ * @public
+ */
+export type DialogPreload = 'idle' | 'intent';
 /** Register a lazy chunk's import trigger. Returns an unregister fn. */
 export declare const registerDialogChunkWarmer: (warmer: Warmer) => () => void;
-/** Fire all registered warmers once (idempotent). */
+/**
+ * Fire every registered warmer. Warmers share one in-flight import, so
+ * repeated calls are cheap, and a call after a failed import retries it.
+ */
 export declare const warmDialogChunk: () => void;
+/**
+ * Hold an idle-warming gate open while `active`: the dialog loads in the next
+ * idle period after the page's load event, if a gate is still open then.
+ * Consumers opt out with `preloadDialog: 'intent'`.
+ *
+ * @param active - Whether the dialog can be opened soon from this component,
+ * for example because the banner is shown or a trigger is mounted.
+ * @internal
+ */
+export declare const useIdleDialogWarming: (active: boolean) => void;
+/**
+ * Reset module state between tests.
+ *
+ * @internal
+ */
+export declare const resetDialogChunkWarmingForTests: () => void;
 export {};

package/dist-types/component-hooks/use-headless-consent-ui.d.ts

@@ -64,5 +64,5 @@ export declare const useHeadlessConsentUI: (overrides?: ConsentPresentation) =>
     performAction: (action: PresentationAction) => void | Promise<import("@c15t/core").SaveResult> | Promise<import("@c15t/core").NoticeDismissResult>;
     performBannerAction: (action: PresentationAction) => void | Promise<import("@c15t/core").SaveResult> | Promise<import("@c15t/core").NoticeDismissResult>;
     performDialogAction: (action: PresentationAction) => void | Promise<import("@c15t/core").SaveResult> | Promise<import("@c15t/core").NoticeDismissResult>;
-    saveCustomPreferences: (input?: import("@c15t/core").SaveInput) => Promise<import("@c15t/core").SaveResult>;
+    saveCustomPreferences: (input?: import("@c15t/core").SaveInput, uiSource?: import("@c15t/core").SaveUISource) => Promise<import("@c15t/core").SaveResult>;
 };

package/dist-types/component-hooks/use-headless-iab-consent-ui.d.ts

@@ -1,5 +1,5 @@
 export declare const useHeadlessIABConsentUI: () => {
-    activeUI: import("@c15t/core").ActiveUI;
+    activeUI: "banner" | "dialog" | "none";
     banner: {
         isReady: boolean;
         vendorCount: number;

package/dist-types/components/iab-panel/atoms/feature-item.d.ts

@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+import type { ProcessedFeature } from '../types.js';
+/** Props for {@link FeatureItem}. */
+export interface FeatureItemProps {
+    /** The feature, as a display-model row or processed GVL feature. */
+    feature: ProcessedFeature;
+    /**
+     * The row's `data-testid`. Comes from the shared display model, which
+     * namespaces it by row kind.
+     */
+    testId?: string;
+}
+/**
+ * One informational IAB Feature row.
+ *
+ * TCF Policies v5.0.b forbid showing Features next to a control that
+ * cannot be disabled, so this row has no switch, no lock and no per-vendor
+ * toggles. It shows the name, the description, the illustrations and the
+ * names of the vendors that use the feature.
+ *
+ * @param props - The feature and its test id.
+ * @returns The collapsible feature row.
+ * @example
+ * ```tsx
+ * <FeatureItem feature={row} testId={row.testId} />
+ * ```
+ */
+export declare const FeatureItem: FC<FeatureItemProps>;

package/dist-types/components/iab-panel/atoms/purpose-item.d.ts

@@ -1,7 +1,10 @@
 import type { FC } from 'react';
 import type { ProcessedPurpose, VendorId } from '../types.js';
 interface PurposeItemProps {
-    purpose: ProcessedPurpose;
+    /** A purpose, or a display-model row carrying `hasConsentBasis`. */
+    purpose: ProcessedPurpose & {
+        hasConsentBasis?: boolean;
+    };
     /**
      * The row's `data-testid`. Comes from the shared display model, which
      * namespaces it by row kind — a purpose, a special purpose and a

package/dist-types/components/iab-panel/atoms/stack-item.d.ts

@@ -1,7 +1,12 @@
 import type { FC } from 'react';
 import type { ProcessedStack, VendorId } from '../types.js';
 interface StackItemProps {
-    stack: ProcessedStack;
+    /** A stack, or a display-model stack row whose purposes carry `hasConsentBasis`. */
+    stack: Omit<ProcessedStack, 'purposes'> & {
+        purposes: (ProcessedStack['purposes'][number] & {
+            hasConsentBasis?: boolean;
+        })[];
+    };
     consents: Record<number, boolean>;
     onToggle: (purposeId: number, value: boolean) => void;
     vendorConsents: Record<string, boolean>;

package/dist-types/components/iab-panel/iab-panel.d.ts

@@ -64,10 +64,10 @@ export interface IABConsentDialogProps {
     uiSource?: string;
 }
 /**
- * IAB TCF 2.3 compliant consent dialog dialog.
+ * IAB TCF 2.4 compliant consent dialog dialog.
  *
  * @remarks
- * This component implements the required IAB TCF 2.3 UI elements:
+ * This component implements the required IAB TCF 2.4 UI elements:
  * - Tabbed interface for Purposes and Vendors
  * - Purpose grouping with stacks
  * - Individual purpose and vendor consent toggles

package/dist-types/components/iab-panel/index.d.ts

@@ -6,9 +6,11 @@
  * It follows the compound components pattern, allowing for flexible composition
  * of the consent dialog's parts.
  */
+import '@c15t/ui/styles/dialog';
 import type { FC } from 'react';
 import { IABConsentDialogCard } from './atoms/card.js';
 import { IABConsentDialogContent } from './atoms/content.js';
+import { FeatureItem } from './atoms/feature-item.js';
 import { IABConsentDialogFooter } from './atoms/footer.js';
 import { IABConsentDialogHeader } from './atoms/header.js';
 import { IABConsentDialogOverlay } from './atoms/overlay.js';
@@ -31,19 +33,20 @@ export interface IABConsentDialogCompoundComponent extends FC<IABConsentDialogPr
     Content: typeof IABConsentDialogContent;
     Footer: typeof IABConsentDialogFooter;
     Overlay: typeof IABConsentDialogOverlay;
+    FeatureItem: typeof FeatureItem;
     PurposeItem: typeof PurposeItem;
     StackItem: typeof StackItem;
     VendorList: typeof VendorList;
 }
 /**
- * IAB TCF 2.3 compliant consent dialog dialog component.
+ * IAB TCF 2.4 compliant consent dialog dialog component.
  *
  * @remarks
  * This component serves as the main entry point for rendering an IAB-compliant consent dialog.
  * It provides a structured layout with required IAB TCF elements.
  *
  * Key features:
- * - IAB TCF 2.3 compliant
+ * - IAB TCF 2.4 compliant
  * - Fully accessible by default
  * - Customizable appearance
  * - Compound component pattern support
@@ -78,6 +81,7 @@ declare const IABConsentDialog: IABConsentDialogCompoundComponent;
 export default IABConsentDialog;
 export { IABConsentDialogCard } from './atoms/card.js';
 export { IABConsentDialogContent } from './atoms/content.js';
+export { FeatureItem, type FeatureItemProps } from './atoms/feature-item.js';
 export { IABConsentDialogFooter } from './atoms/footer.js';
 export { IABConsentDialogHeader } from './atoms/header.js';
 export { IABConsentDialogOverlay } from './atoms/overlay.js';

package/dist-types/components/iab-panel/use-iab-translations.d.ts

@@ -45,6 +45,10 @@ interface IABTranslations {
             title: string;
             tooltip: string;
         };
+        features: {
+            title: string;
+            description: string;
+        };
         vendorList: {
             search: string;
             showingCount: string;

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

@@ -42,10 +42,10 @@ export interface IABConsentBannerProps {
     uiSource?: string;
 }
 /**
- * IAB TCF 2.3 compliant cookie consent banner.
+ * IAB TCF 2.4 compliant cookie consent banner.
  *
  * @remarks
- * This component implements the required IAB TCF 2.3 UI elements:
+ * This component implements the required IAB TCF 2.4 UI elements:
  * - Partner count disclosure
  * - Purpose summary
  * - Legitimate interest notice

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

@@ -32,14 +32,14 @@ export interface IABConsentBannerCompoundComponent extends FC<IABConsentBannerPr
     Overlay: typeof IABConsentBannerOverlay;
 }
 /**
- * IAB TCF 2.3 compliant cookie consent banner component.
+ * IAB TCF 2.4 compliant cookie consent banner component.
  *
  * @remarks
  * This component serves as the main entry point for rendering an IAB-compliant consent banner.
  * It provides a structured layout with required IAB TCF elements.
  *
  * Key features:
- * - IAB TCF 2.3 compliant
+ * - IAB TCF 2.4 compliant
  * - Fully accessible by default
  * - Customizable appearance
  * - Compound component pattern support

package/dist-types/components/panel/atoms/card.d.ts

@@ -25,6 +25,7 @@ declare const ConsentDialogHeader: import("react").ForwardRefExoticComponent<Omi
  * - Uses proper heading semantics for accessibility
  * - Should be used within ConsentDialogHeader
  * - Supports theme customization
+ * - Renders an `h2`; with `asChild` the child element takes its place
  */
 declare const ConsentDialogHeaderTitle: import("react").ForwardRefExoticComponent<Omit<BoxProps, "slotKey"> & import("react").RefAttributes<HTMLDivElement>>;
 /**

package/dist-types/components/panel/index.d.ts

@@ -6,6 +6,7 @@
  * It follows the compound components pattern, allowing for flexible composition
  * of the dialog's parts.
  */
+import '@c15t/ui/styles/dialog';
 import type { FC } from 'react';
 import { Card, ConsentCustomizationCard, ConsentDialogContent, ConsentDialogFooter, ConsentDialogHeader, ConsentDialogHeaderDescription, ConsentDialogHeaderTitle, Content, Footer, Header, HeaderDescription, HeaderTitle } from './atoms/card.js';
 import { Overlay } from './atoms/overlay.js';

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

@@ -37,7 +37,7 @@ export interface ConsentDialogProps {
     trapFocus?: boolean;
     /**
      * Control the open state. If omitted the dialog follows
-     * `useConsentManager().activeUI === 'dialog'`.
+     * `useActiveUI() === 'dialog'`.
      */
     open?: boolean;
     /**

package/dist-types/components/panel-trigger/atoms/trigger-icons.d.ts

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+/**
+ * Dialog-trigger icons, kept apart from the branding logos: the banner renders
+ * the logos on every page, while these only ship with the dialog trigger.
+ */
+interface IconProps {
+    title?: string;
+    titleId?: string;
+}
+/**
+ * Fingerprint icon for privacy/consent contexts.
+ * A generic icon representing user identity and privacy.
+ */
+export declare const FingerprintIcon: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & IconProps) => import("react").JSX.Element;
+/**
+ * Settings/gear icon for preference contexts.
+ * A generic icon representing configuration and settings.
+ */
+export declare const SettingsIcon: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & IconProps) => import("react").JSX.Element;
+export {};

package/dist-types/components/preferences/index.d.ts

@@ -7,6 +7,7 @@
  * of the widget's parts.
  *
  */
+import '@c15t/ui/styles/dialog';
 import type { FC } from 'react';
 import { Accordion, AccordionArrow, AccordionContent, AccordionItem, AccordionItems, AccordionTrigger, AccordionTriggerInner, Switch, VendorList } from './atoms/accordion.js';
 import { AcceptAllButton, CustomizeButton, RejectButton, SaveButton } from './atoms/button.js';

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

@@ -16,12 +16,18 @@ export type ConsentBannerRight = Exclude<PolicyRight, 'disclosure'>;
  * @remarks
  * Provides the main heading for the consent notice.
  * Implements proper heading semantics and supports theming.
+ * Renders an `h2`. With `asChild`, the child element, such as an `h1`,
+ * takes its place and receives the title's class and attributes.
  *
  * @example
  * ```tsx
  * <ConsentBannerTitle>
  *   Cookie Preferences
  * </ConsentBannerTitle>
+ *
+ * <ConsentBannerTitle asChild>
+ *   <h1>Cookie Preferences</h1>
+ * </ConsentBannerTitle>
  * ```
  */
 declare const ConsentBannerTitle: import("react").ForwardRefExoticComponent<Omit<BoxProps, "slotKey"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/components/shared/libs/compose-refs.d.ts

@@ -0,0 +1,20 @@
+import type { Ref, RefCallback } from 'react';
+/**
+ * Combine refs so one element fills all of them.
+ *
+ * @param refs - Callback refs, object refs, or `undefined`.
+ * @returns A callback ref that calls or assigns each ref in order.
+ * @internal
+ */
+export declare const composeRefs: <ElementType>(...refs: (Ref<ElementType> | undefined)[]) => RefCallback<ElementType>;
+/**
+ * {@link composeRefs} for two refs, with a stable identity while they stay
+ * the same, so React does not detach and reattach the element on every
+ * render.
+ *
+ * @param first - A callback ref, object ref, or `undefined`.
+ * @param second - A callback ref, object ref, or `undefined`.
+ * @returns A memoized callback ref.
+ * @internal
+ */
+export declare const useComposedRefs: <ElementType>(first: Ref<ElementType> | undefined, second: Ref<ElementType> | undefined) => RefCallback<ElementType>;

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

@@ -1,4 +1,5 @@
 import type { AccordionType } from '@c15t/ui/primitives/accordion';
+import '@c15t/ui/styles/dialog';
 import type { ButtonHTMLAttributes, ElementType, HTMLAttributes } from 'react';
 import type { PolymorphicComponentProps } from '../../libs/polymorphic.js';
 import type { ThemeValue } from '../../../../types/theme/index.js';

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

@@ -1,3 +1,4 @@
+import '@c15t/ui/styles/dialog';
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 export declare const collapsibleVariants: () => {
     content: (options?: {

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

@@ -1,6 +1,7 @@
 import type { ElementType, JSX, SVGProps } from 'react';
 type LucideIconProps = SVGProps<SVGSVGElement> & {
-    title: string;
+    /** Omit for a decorative icon that must add nothing to an accessible name. */
+    title?: string;
     iconPath: JSX.Element;
 };
 export declare const LucideIcon: ({ title, iconPath }: LucideIconProps) => ElementType;

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

@@ -16,14 +16,4 @@ 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.Element;
-/**
- * Fingerprint icon for privacy/consent contexts.
- * A generic icon representing user identity and privacy.
- */
-export declare const FingerprintIcon: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & IconProps) => import("react").JSX.Element;
-/**
- * Settings/gear icon for preference contexts.
- * A generic icon representing configuration and settings.
- */
-export declare const SettingsIcon: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & IconProps) => import("react").JSX.Element;
 export {};

package/dist-types/components/shared/ui/preference-item/preference-item.d.ts

@@ -1,4 +1,5 @@
 import type { ConsentComponentSlotKey } from '@c15t/schema/config';
+import '@c15t/ui/styles/dialog';
 import type { HTMLAttributes, ReactNode } from 'react';
 export type PreferenceItemVariantsProps = Record<never, never>;
 export declare const preferenceItemVariants: () => {
@@ -66,6 +67,19 @@ export interface PreferenceItemTitleProps extends HTMLAttributes<HTMLHeadingElem
 }
 declare const PreferenceItemTitle: import("react").ForwardRefExoticComponent<PreferenceItemTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export interface PreferenceItemContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Render the children while the item has never been opened.
+     *
+     * By default the content element is always rendered, so the trigger's
+     * `aria-controls` target exists, but its children mount the first time
+     * the item opens and then stay mounted, so the close transition and any
+     * state inside them survive. Collapsed content is `inert` and
+     * `aria-hidden` either way. Set this when collapsed children must be in
+     * the DOM, for example when custom CSS shows them.
+     *
+     * @defaultValue false
+     */
+    forceMount?: boolean;
     innerClassName?: string;
     innerSlotKey?: ConsentComponentSlotKey;
     noStyle?: boolean;

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

@@ -1,3 +1,4 @@
+import '@c15t/ui/styles/dialog';
 import type { ButtonHTMLAttributes } from 'react';
 import type { ThemeValue } from '../../../../types/theme/index.js';
 export type SwitchSize = 'medium' | 'small';

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

@@ -1,4 +1,5 @@
 import type { TabsOrientation } from '@c15t/ui/primitives/tabs';
+import '@c15t/ui/styles/dialog';
 import type { HTMLAttributes, ReactNode } from 'react';
 export interface TabsVariantsProps {
     orientation?: TabsOrientation;

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

@@ -0,0 +1,38 @@
+import type { Theme } from './types/theme/index.js';
+/** Props for {@link ConsentTheme}. */
+export interface ConsentThemeProps {
+    /**
+     * Theme tokens: colors, dark colors, typography, spacing, radius,
+     * shadows and motion. Defaults to the built-in theme, which the package
+     * stylesheet already contains, so omit it only to pick a `colorScheme`
+     * before hydration.
+     */
+    theme?: Theme;
+    /**
+     * Color scheme to apply before hydration. `'dark'` makes the dark
+     * tokens the default, and `'system'` follows `prefers-color-scheme`.
+     * Omit it to follow the `dark` / `c15t-dark` class on `<html>`. Pass the
+     * same value as the provider's `colorScheme` option.
+     */
+    colorScheme?: 'light' | 'dark' | 'system' | null;
+    /** Content Security Policy nonce for the `<style>` element. */
+    nonce?: string;
+}
+/**
+ * Renders the `--c15t-*` CSS variables for a theme as a `<style>` element.
+ *
+ * Render it once, next to the consent provider, where your framework renders
+ * on the server. The provider does not generate theme CSS itself.
+ *
+ * @param props - The theme, color scheme and CSP nonce.
+ * @returns A `<style id="c15t-theme">` element.
+ * @example
+ * ```tsx
+ * // app/layout.tsx (Server Component)
+ * import { ConsentTheme } from '@c15t/nextjs';
+ * import { theme } from './consent-theme';
+ *
+ * <ConsentTheme theme={theme} colorScheme="system" />
+ * ```
+ */
+export declare const ConsentTheme: ({ theme, colorScheme, nonce, }: ConsentThemeProps) => import("react").JSX.Element;

package/dist-types/context/consent-tracking-context.d.ts

@@ -1,3 +1,4 @@
+import type { SaveUISource } from '@c15t/core';
 /**
  * Value provided by the ConsentTrackingContext.
  *
@@ -30,3 +31,12 @@ export declare const ConsentTrackingContext: import("react").Context<ConsentTrac
  * @public
  */
 export declare const useConsentTracking: () => ConsentTrackingValue;
+/**
+ * Narrow a tracking `uiSource` to a value the kernel records. Custom labels
+ * fall back to the kernel's `activeUI` attribution.
+ *
+ * @param value - The `uiSource` from props or context.
+ * @returns A kernel save source, or `undefined` to keep the default.
+ * @public
+ */
+export declare const toSaveUISource: (value: string | undefined) => SaveUISource | undefined;

package/dist-types/context/theme-context.d.ts

@@ -41,10 +41,10 @@ export interface ThemeContextValue {
      */
     trapFocus?: boolean;
     /**
-     * Color scheme preference.
+     * Color scheme preference. `null` when the provider leaves the class alone.
      * @default 'system'
      */
-    colorScheme?: 'light' | 'dark' | 'system';
+    colorScheme?: 'light' | 'dark' | 'system' | null;
 }
 /**
  * Context for providing theme values to components.

package/dist-types/context.d.ts

@@ -13,5 +13,11 @@ export interface ProviderServices {
     clearRecords: () => void;
     getPresentation: () => ConsentPresentation | undefined;
     getConsentCategories: () => readonly AllConsentNames[];
+    /**
+     * 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
+     * reinitializes itself.
+     */
+    setLanguage: (code: string) => void;
 }
 export declare const ProviderServicesContext: import("react").Context<ProviderServices | null>;

package/dist-types/devtools.d.ts

@@ -15,7 +15,7 @@ export type DevToolsProps = ConsentDevToolsProps;
  * @param props - Presentation options passed to the DevTools engine.
  * @returns `null`; the engine mounts its interface into `document.body`.
  */
-export declare const ConsentDevTools: ({ disabled, clearRecords, getPresentation, defaultOpen, defaultTab, getConsentCategories, maxEvents, position, }: ConsentDevToolsProps) => null;
+export declare const ConsentDevTools: ({ disabled, clearRecords, getPresentation, defaultOpen, defaultTab, getConsentCategories, maxEvents, position, shadow, }: ConsentDevToolsProps) => null;
 /** Compatible short name for {@link ConsentDevTools}. */
 export declare const DevTools: typeof ConsentDevTools;
 /** Backward-compatible name for {@link ConsentDevTools}. */
@@ -24,13 +24,24 @@ export declare const C15TDevTools: typeof ConsentDevTools;
 export interface C15tTanStackDevtoolsPanelProps extends HTMLAttributes<HTMLDivElement>, Pick<DevToolsOptions, 'defaultTab' | 'maxEvents' | 'getConsentCategories' | 'getPresentation' | 'clearRecords'> {
     /** Prevents the embedded DevTools engine from mounting. @default false */
     disabled?: boolean;
+    /**
+     * Color scheme of the surrounding devtools shell. Omit to follow the
+     * operating system. {@link c15tDevtools} passes TanStack's theme.
+     */
+    theme?: TanStackDevtoolsTheme;
+}
+/** Color scheme TanStack Devtools passes to plugin panels. */
+export type TanStackDevtoolsTheme = 'light' | 'dark';
+/** Props React TanStack Devtools passes to a plugin's render function. */
+export interface TanStackDevtoolsPluginProps {
+    theme?: TanStackDevtoolsTheme;
 }
 /** Plugin configuration accepted by React TanStack Devtools. */
 export interface TanStackDevtoolsPlugin {
     id?: string;
     name: string;
     defaultOpen?: boolean;
-    render: ReactElement;
+    render: (element: HTMLElement, props?: TanStackDevtoolsPluginProps | TanStackDevtoolsTheme) => ReactElement;
 }
 /** Options for {@link c15tDevtools}. */
 export interface C15tDevtoolsPluginOptions extends C15tTanStackDevtoolsPanelProps {

package/dist-types/draft.d.ts

@@ -1,4 +1,4 @@
-import type { AllConsentNames, ConsentState, SaveResult, SaveInput } from '@c15t/core';
+import type { AllConsentNames, ConsentKernel, ConsentState, SaveResult, SaveInput, SaveUISource } from '@c15t/core';
 import type { ReactNode } from 'react';
 /** A local, unmasked selection, committed only by an explicit save. */
 export interface ConsentDraftHandle {
@@ -27,6 +27,34 @@ export interface ConsentDraftHandle {
     save: () => Promise<SaveResult>;
     reset: () => void;
 }
+interface DraftSnapshot {
+    values: ConsentState;
+    displayedCategories: readonly AllConsentNames[];
+    vendors: Record<string, boolean>;
+    isDirty: boolean;
+    isStale: boolean;
+}
+declare const createDraftStore: (kernel: ConsentKernel, initialDefaults?: Partial<ConsentState>) => {
+    acceptAll(): void;
+    connect(): import("@c15t/core").Unsubscribe;
+    getSnapshot: () => DraftSnapshot;
+    /** The kernel this draft reads from and saves into. */
+    kernel: ConsentKernel;
+    rejectAll(): void;
+    reset: () => void;
+    save(input?: SaveInput, categories?: readonly AllConsentNames[], onSuccess?: () => void, uiSource?: SaveUISource): Promise<SaveResult>;
+    set(category: AllConsentNames, value: boolean): void;
+    /**
+     * Replace the defaults a category without a receipt seeds from. A
+     * clean draft reseeds at once, so an experiment arm assigned after
+     * mount shows its own defaults; edits the visitor already made stay.
+     */
+    setDefaults(next: Partial<ConsentState> | undefined): void;
+    setVendor(vendorId: string, granted: boolean): void;
+    subscribe(listener: () => void): () => void;
+    update: (patch: Partial<ConsentState>) => void;
+};
+type DraftStore = ReturnType<typeof createDraftStore>;
 export interface ConsentDraftProviderProps {
     children: ReactNode;
     /** Defaults apply only to categories without an explicit receipt. */
@@ -34,12 +62,26 @@ export interface ConsentDraftProviderProps {
 }
 export declare const ConsentDraftProvider: ({ children, initial, }: ConsentDraftProviderProps) => import("react").JSX.Element;
 /** Internal UI save path shared by stock controls and headless actions. */
-export declare const useConsentSaveAction: () => (input?: SaveInput) => Promise<SaveResult>;
-/** Keep the compatibility manager selection and its save on the same draft. */
-export declare const useConsentManagerDraft: () => {
-    draft: ConsentDraftHandle;
-    save: (input?: SaveInput) => Promise<SaveResult>;
-};
+export declare const useConsentSaveAction: () => (input?: SaveInput, uiSource?: SaveUISource) => Promise<SaveResult>;
+/**
+ * The nearest consent draft store, for the stock preference rows. Pair with
+ * {@link useConsentDraftSlice} so a row re-renders only when its own slice
+ * changes, not on every staged edit elsewhere in the draft.
+ *
+ * @returns The shared draft store, or a local one outside a provider.
+ * @internal
+ */
+export declare const useConsentDraftStore: () => DraftStore;
+/**
+ * Subscribes to one slice of a consent draft store.
+ *
+ * @param store - Store from {@link useConsentDraftStore}.
+ * @param selector - Picks the slice. Return a primitive or a reference the
+ * draft already holds.
+ * @returns The selected slice.
+ * @internal
+ */
+export declare const useConsentDraftSlice: <SliceType>(store: DraftStore, selector: (draft: DraftSnapshot) => SliceType) => SliceType;
 /** Read and edit displayed choices without replacing masked effective permissions. */
 export declare const useConsentDraft: () => ConsentDraftHandle;
 /** The vendor slice of the consent draft, for a custom vendor control. */
@@ -81,3 +123,4 @@ export interface VendorDraftHandle {
  * @public
  */
 export declare const useVendorDraft: () => VendorDraftHandle;
+export {};

package/dist-types/headless.d.ts

@@ -6,7 +6,6 @@
  */
 export { defaultTranslationConfig, detectBrowserLanguage, mergeTranslationConfigs, prepareTranslationConfig, } from '@c15t/core';
 export { type ConsentDialogTriggerVisibility, type UseConsentDialogTriggerOptions, type UseConsentDialogTriggerResult, useConsentDialogTrigger, } from './component-hooks/use-panel-trigger.js';
-export { useConsentManager } from './component-hooks/use-manager.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 { useColorScheme } from './hooks/use-color-scheme.js';