chore(deps): migrate @c15t/nextjs to 2.x

Replaces dependabot PR #69, which failed because 2.x reorganized the
package's exports. Bumps @c15t/nextjs from ^1.8.6 to ^2.1.0 and applies
the 2.x API changes, verified against the installed package's types and
bundled docs (node_modules/@c15t/nextjs/docs).

API changes applied:

- The "@c15t/nextjs/client" subpath is gone from the exports map. All
  components, hooks and types now come from the "@c15t/nextjs" root.
  This was the cause of the #69 build failure.
- Components renamed: CookieBanner -> ConsentBanner and
  ConsentManagerDialog -> ConsentDialog.
- Hook property hasConsentFor(category) -> has(category), which also
  supports and/or/not conditions.
- Dialog visibility state isPrivacyDialogOpen / setIsPrivacyDialogOpen /
  setShowPopup were replaced by a single activeUI enum
  ("none" | "banner" | "dialog") plus setActiveUI(). Dismiss now maps to
  one setActiveUI("banner") call, which closes the dialog and re-shows
  the banner.
- The per-component theme prop is gone; ConsentDialogProps declares
  theme?: never. Theme moves into ConsentManagerProvider
  options.theme.
- The 1.x CSS-variable theme keys (--banner-*, --button-*, --dialog-*,
  --widget-*) no longer exist in the shipped stylesheet, so the theme is
  re-expressed with 2.x semantic design tokens (colors, radius, shadows,
  typography, consentActions) that resolve to --c15t-* properties. The
  accordion shades, which have no semantic token, are preserved via a
  scoped variable override on the consentWidgetAccordion slot.
- mode: "c15t" -> mode: "hosted". Both are accepted by ClientMode and
  behave identically; "c15t" is documented as a legacy alias.
- Branding/footer hiding previously done with display:none theme entries
  is now the hideBranding prop on both components.
- 2.x ships prebuilt component styles as a separate stylesheet rather
  than bundling them in the JS, so "@c15t/nextjs/styles.css" is now
  imported. Without it the components render unstyled.
- colorScheme is pinned to "dark" and the palette is applied to both
  colors and dark, because the app is dark-only and sets no .dark class
  that 2.x scheme detection could pick up.

Provider options, theme values and consent gating are otherwise
unchanged. next.config.mjs CSP is untouched; hosted endpoints are still
*.c15t.dev.

Verified: tsc --noEmit clean, biome clean on both touched files,
262/262 unit tests pass, and next build compiles with zero module
resolution or export errors.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Nicolas Joseph <nicolas@fiveonefour.com>

Author: 3 people

components/consent-analytics.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { useConsentManager } from "@c15t/nextjs/client"
+import { useConsentManager } from "@c15t/nextjs"
 import { Analytics } from "@vercel/analytics/react"
 
 export function ConsentAnalytics() {
-  const { hasConsentFor } = useConsentManager()
+  const { has } = useConsentManager()
 
-  if (!hasConsentFor("measurement")) {
+  if (!has("measurement")) {
     return null
   }
 

components/consent-provider.tsx

@@ -2,221 +2,84 @@
 
 import type React from "react"
 import { useEffect, useCallback } from "react"
-import { ConsentManagerProvider, useConsentManager } from "@c15t/nextjs/client"
-import { CookieBanner, ConsentManagerDialog } from "@c15t/nextjs"
+import {
+  ConsentBanner,
+  ConsentDialog,
+  ConsentManagerProvider,
+  type ConsentManagerOptions,
+  type Theme,
+  useConsentManager,
+} from "@c15t/nextjs"
+import "@c15t/nextjs/styles.css"
 
 const backendURL = process.env.NEXT_PUBLIC_C15T_URL
 
-const darkButton = {
-  "--button-background-color": "hsl(212 30% 15%)",
-  "--button-background-color-hover": "hsl(212 30% 20%)",
-  "--button-text": "hsl(0 0% 97%)",
-  "--button-text-hover": "hsl(0 0% 97%)",
-  "--button-border-color": "hsl(213 19% 25%)",
-  "--button-border-radius": "0.625rem",
-  "--button-neutral": "hsl(213 19% 25%)",
-  "--button-neutral-hover": "hsl(213 19% 30%)",
-  "--button-neutral-soft": "hsl(212 30% 15%)",
-  "--button-neutral-soft-dark": "hsl(212 30% 15%)",
-  "--button-shadow": "none",
-  "--button-shadow-dark": "none",
-  "--button-shadow-neutral": "none",
-  "--button-shadow-neutral-dark": "none",
-  "--button-shadow-neutral-hover": "none",
-  "--button-shadow-neutral-hover-dark": "none",
-  "--button-shadow-neutral-focus": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-shadow-neutral-focus-dark": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-focus-ring": "0 0 0 2px hsl(163 69% 47%)",
-} as const
-
-const acceptButton = {
-  "--button-background-color": "hsl(163 69% 47%)",
-  "--button-background-color-dark": "hsl(163 69% 47%)",
-  "--button-text": "hsl(204 100% 3%)",
-  "--button-text-dark": "hsl(204 100% 3%)",
-  "--button-text-hover": "hsl(204 100% 3%)",
-  "--button-text-hover-dark": "hsl(204 100% 3%)",
-  "--button-border-color": "hsl(163 69% 47%)",
-  "--button-border-radius": "0.625rem",
-  "--button-neutral-soft": "hsl(163 69% 47%)",
-  "--button-neutral-soft-dark": "hsl(163 69% 47%)",
-  "--button-shadow": "none",
-  "--button-shadow-dark": "none",
-  "--button-shadow-neutral": "none",
-  "--button-shadow-neutral-dark": "none",
-  "--button-shadow-neutral-hover": "none",
-  "--button-shadow-neutral-hover-dark": "none",
-  "--button-shadow-neutral-focus": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-shadow-neutral-focus-dark": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-focus-ring": "0 0 0 2px hsl(163 69% 47%)",
-} as const
-
-const customizeButton = {
-  "--button-background-color": "hsl(212 30% 15%)",
-  "--button-background-color-dark": "hsl(212 30% 15%)",
-  "--button-text": "hsl(213 14% 70%)",
-  "--button-text-dark": "hsl(213 14% 70%)",
-  "--button-border-color": "hsl(213 19% 25%)",
-  "--button-border-radius": "0.625rem",
-  "--button-primary": "hsl(213 14% 70%)",
-  "--button-primary-dark": "hsl(213 14% 70%)",
-  "--button-primary-hover": "hsl(213 14% 80%)",
-  "--button-primary-hover-dark": "hsl(213 14% 80%)",
-  "--button-shadow": "none",
-  "--button-shadow-dark": "none",
-  "--button-shadow-primary": "inset 0 0 0 1px hsl(213 19% 25%)",
-  "--button-shadow-primary-dark": "inset 0 0 0 1px hsl(213 19% 25%)",
-  "--button-shadow-primary-hover": "inset 0 0 0 1px hsl(213 19% 30%)",
-  "--button-shadow-primary-hover-dark": "inset 0 0 0 1px hsl(213 19% 30%)",
-  "--button-shadow-primary-focus": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-shadow-primary-focus-dark": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-focus-ring": "0 0 0 2px hsl(163 69% 47%)",
-} as const
-
-const saveButton = {
-  "--button-background-color": "hsl(163 69% 47%)",
-  "--button-background-color-dark": "hsl(163 69% 47%)",
-  "--button-text": "hsl(204 100% 3%)",
-  "--button-text-dark": "hsl(204 100% 3%)",
-  "--button-border-color": "hsl(163 69% 47%)",
-  "--button-border-radius": "0.625rem",
-  "--button-primary": "hsl(204 100% 3%)",
-  "--button-primary-dark": "hsl(204 100% 3%)",
-  "--button-primary-hover": "hsl(204 100% 3%)",
-  "--button-primary-hover-dark": "hsl(204 100% 3%)",
-  "--button-shadow": "none",
-  "--button-shadow-dark": "none",
-  "--button-shadow-primary": "none",
-  "--button-shadow-primary-dark": "none",
-  "--button-shadow-primary-hover": "none",
-  "--button-shadow-primary-hover-dark": "none",
-  "--button-shadow-primary-focus": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-shadow-primary-focus-dark": "0 0 0 2px hsl(163 69% 47%)",
-  "--button-focus-ring": "0 0 0 2px hsl(163 69% 47%)",
+/**
+ * Dark palette carried over from the c15t 1.x CSS-variable theme.
+ *
+ * 2.x replaced the per-slot `--banner-*` / `--button-*` / `--dialog-*` variables
+ * with semantic design tokens that resolve to `--c15t-*` custom properties, so
+ * the old values are re-expressed as tokens here.
+ */
+const palette = {
+  primary: "hsl(163 69% 47%)",
+  primaryHover: "hsl(163 69% 47%)",
+  textOnPrimary: "hsl(204 100% 3%)",
+  surface: "hsl(212 36% 10%)",
+  surfaceHover: "hsl(212 36% 10%)",
+  border: "hsl(213 19% 25%)",
+  borderHover: "hsl(213 19% 30%)",
+  text: "hsl(0 0% 97%)",
+  textMuted: "hsl(213 14% 70%)",
+  overlay: "rgba(0,0,0,0.6)",
+  switchTrack: "hsl(213 19% 25%)",
+  switchTrackActive: "hsl(163 69% 47%)",
 } as const
 
+// The app renders a single dark theme and sets no `.dark` class, so the same
+// palette is applied to both schemes and the scheme is pinned to dark.
 const theme = {
-  "banner.card": {
-    style: {
-      "--banner-background-color": "hsl(212 36% 10%)",
-      "--banner-border-color": "hsl(213 19% 25%)",
-      "--banner-border-radius": "0.875rem",
-      "--banner-shadow": "0 8px 32px rgba(0,0,0,0.4)",
-    },
-  },
-  "banner.header.title": {
-    style: { "--banner-title-color": "hsl(0 0% 97%)" },
-  },
-  "banner.header.description": {
-    style: { "--banner-description-color": "hsl(213 14% 70%)" },
+  colors: palette,
+  dark: palette,
+  typography: { fontFamily: "var(--font-body), sans-serif" },
+  radius: { md: "0.625rem", lg: "0.875rem" },
+  shadows: { sm: "none", md: "none", lg: "0 8px 32px rgba(0,0,0,0.4)" },
+  consentActions: {
+    accept: { variant: "primary", mode: "filled" },
+    reject: { variant: "neutral", mode: "stroke" },
+    customize: { variant: "neutral", mode: "stroke" },
   },
-  "banner.footer": {
-    style: { "--banner-footer-background-color": "hsl(212 36% 10%)" },
-  },
-  "banner.footer.accept-button": { style: acceptButton },
-  "banner.footer.reject-button": { style: darkButton },
-  "banner.footer.customize-button": { style: customizeButton },
-  "banner.overlay": {
-    style: { "--banner-overlay-background-color": "rgba(0,0,0,0.6)" },
-  },
-  "dialog.root": {
-    style: {
-      "--dialog-font-family": "var(--font-body), sans-serif",
-      "--dialog-background-color": "hsl(212 36% 10%)",
-      "--dialog-foreground-color": "hsl(0 0% 97%)",
-      "--dialog-border-color": "hsl(213 19% 25%)",
-      "--dialog-stroke-color": "hsl(213 19% 25%)",
-      "--dialog-muted-color": "hsl(213 14% 70%)",
-      "--dialog-card-radius": "0.875rem",
-      "--dialog-card-shadow": "0 8px 32px rgba(0,0,0,0.4)",
-      "--dialog-overlay-background-color": "rgba(0,0,0,0.6)",
-      "--dialog-link-text-color": "hsl(0 0% 97%)",
-      "--widget-background-color": "hsl(212 36% 10%)",
-      "--widget-border-color": "hsl(213 19% 25%)",
-      "--widget-text-color": "hsl(0 0% 97%)",
-      "--widget-text-muted-color": "hsl(213 14% 70%)",
-      "--widget-link-text-color": "hsl(0 0% 97%)",
-      "--widget-footer-background-color": "hsl(212 36% 10%)",
-      "--widget-accordion-background-color": "hsl(213 27% 18%)",
-      "--widget-accordion-background-hover": "hsl(213 27% 22%)",
-      "--widget-accordion-border-color": "hsl(213 19% 25%)",
-      "--widget-accordion-text-color": "hsl(0 0% 97%)",
-      "--widget-accordion-content-color": "hsl(213 14% 70%)",
-      "--widget-accordion-icon-color": "hsl(213 14% 70%)",
-      "--widget-accordion-arrow-color": "hsl(213 14% 70%)",
-      "--widget-accordion-focus-ring": "hsl(163 69% 47%)",
-      "--widget-accordion-radius": "0.625rem",
+  slots: {
+    // Preserves the 1.x accordion shades, which have no semantic token, by
+    // scoping the surface variables to the accordion subtree.
+    consentWidgetAccordion: {
+      style: {
+        "--c15t-surface": "hsl(213 27% 18%)",
+        "--c15t-surface-hover": "hsl(213 27% 22%)",
+      },
     },
   },
-  "widget.accordion": {
-    style: {
-      "--accordion-background-color": "hsl(213 27% 18%)",
-      "--accordion-background-color-dark": "hsl(213 27% 18%)",
-      "--accordion-background-hover": "hsl(213 27% 22%)",
-      "--accordion-background-hover-dark": "hsl(213 27% 22%)",
-      "--accordion-border-color": "hsl(213 19% 25%)",
-      "--accordion-border-color-dark": "hsl(213 19% 25%)",
-      "--accordion-text-color": "hsl(0 0% 97%)",
-      "--accordion-text-color-dark": "hsl(0 0% 97%)",
-      "--accordion-content-color": "hsl(213 14% 70%)",
-      "--accordion-content-color-dark": "hsl(213 14% 70%)",
-      "--accordion-icon-color": "hsl(213 14% 70%)",
-      "--accordion-icon-color-dark": "hsl(213 14% 70%)",
-      "--accordion-arrow-color": "hsl(213 14% 70%)",
-      "--accordion-arrow-color-dark": "hsl(213 14% 70%)",
-      "--accordion-focus-ring": "hsl(163 69% 47%)",
-      "--accordion-focus-ring-dark": "hsl(163 69% 47%)",
-      "--accordion-focus-shadow": "0 0 0 2px hsl(163 69% 47%)",
-      "--accordion-focus-shadow-dark": "0 0 0 2px hsl(163 69% 47%)",
-      "--accordion-radius": "0.625rem",
-    },
-  },
-  "widget.accordion.item": {
-    style: {
-      "--accordion-background-color": "hsl(213 27% 18%)",
-      "--accordion-background-color-dark": "hsl(213 27% 18%)",
-      "--accordion-background-hover": "hsl(213 27% 22%)",
-      "--accordion-background-hover-dark": "hsl(213 27% 22%)",
-      "--accordion-border-color": "hsl(213 19% 25%)",
-      "--accordion-border-color-dark": "hsl(213 19% 25%)",
-      "--accordion-radius": "0.625rem",
-    },
-  },
-  "widget.switch.track": {
-    style: {
-      "--switch-background-color": "hsl(213 19% 25%)",
-      "--switch-background-color-checked": "hsl(163 69% 47%)",
-    },
-  },
-  "widget.footer.accept-button": { style: acceptButton },
-  "widget.footer.reject-button": { style: darkButton },
-  "widget.footer.save-button": { style: saveButton },
-  "widget.branding": {
-    style: { display: "none" },
-  },
-  "dialog.footer": {
-    style: { display: "none" },
-  },
-} as const
+} satisfies Theme
 
-const options = backendURL
-  ? {
-      mode: "c15t" as const,
-      backendURL,
-      legalLinks: { privacyPolicy: { href: "/privacy" }, termsOfService: { href: "/terms" } },
-    }
-  : {
-      mode: "offline" as const,
-      legalLinks: { privacyPolicy: { href: "/privacy" }, termsOfService: { href: "/terms" } },
-    }
+const uiOptions = {
+  theme,
+  colorScheme: "dark",
+  legalLinks: { privacyPolicy: { href: "/privacy" }, termsOfService: { href: "/terms" } },
+} satisfies Partial<ConsentManagerOptions>
+
+const options: ConsentManagerOptions = backendURL
+  ? { mode: "hosted", backendURL, ...uiOptions }
+  : { mode: "offline", ...uiOptions }
 
 function DialogDismissHandler() {
-  const { isPrivacyDialogOpen, setIsPrivacyDialogOpen, setShowPopup } = useConsentManager()
+  const { activeUI, setActiveUI } = useConsentManager()
+  const isPrivacyDialogOpen = activeUI === "dialog"
 
+  // 1.x used setIsPrivacyDialogOpen(false) + setShowPopup(true); in 2.x a single
+  // setActiveUI("banner") closes the dialog and re-shows the banner.
   const dismiss = useCallback(() => {
-    setIsPrivacyDialogOpen(false)
-    setShowPopup(true)
-  }, [setIsPrivacyDialogOpen, setShowPopup])
+    setActiveUI("banner")
+  }, [setActiveUI])
 
   useEffect(() => {
     if (!isPrivacyDialogOpen) return
@@ -230,7 +93,7 @@ function DialogDismissHandler() {
 
     const handleClick = (e: MouseEvent) => {
       const target = e.target as HTMLElement
-      if (target.dataset.testid === "consent-manager-dialog-overlay") {
+      if (target.dataset.testid === "consent-dialog-overlay") {
         dismiss()
       }
     }
@@ -250,8 +113,8 @@ export function ConsentProvider({ children }: { children: React.ReactNode }) {
   return (
     <ConsentManagerProvider options={options}>
       {children}
-      <CookieBanner theme={theme} />
-      <ConsentManagerDialog theme={theme} />
+      <ConsentBanner hideBranding />
+      <ConsentDialog hideBranding />
       <DialogDismissHandler />
     </ConsentManagerProvider>
   )

package.json

@@ -23,7 +23,7 @@
     "dead-code": "knip"
   },
   "dependencies": {
-    "@c15t/nextjs": "^1.8.6",
+    "@c15t/nextjs": "^2.1.0",
     "@neondatabase/serverless": "^1.1.0",
     "@octokit/auth-app": "^8.2.0",
     "@octokit/rest": "^22.0.1",