@cookieyes/nextjs 0.1.0 → 0.3.0

package/README.md

@@ -1,10 +1,53 @@
-# @cookieyes/nextjs
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/cookieyes/cookieyes/main/.github/assets/banner-dark.svg">
+    <img src="https://raw.githubusercontent.com/cookieyes/cookieyes/main/.github/assets/banner-light.svg" alt="CookieYes consent banner rendered in a Next.js app" width="820">
+  </picture>
+</p>
 
-Next.js adapter for the CookieYes consent SDK. It re-exports the entire
-`@cookieyes/react` surface, pre-marked with `"use client"` so it composes
-cleanly with the App Router and Server Components.
+<h1 align="center">@cookieyes/nextjs</h1>
 
-## Install
+<p align="center"><strong>Cookie consent for Next.js — App Router and Pages Router, SSR-safe.</strong></p>
+
+<p align="center">The full <code>@cookieyes/react</code> surface, pre-marked <code>"use client"</code> so it composes cleanly with Server Components.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@cookieyes/nextjs"><img src="https://img.shields.io/npm/v/@cookieyes/nextjs" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@cookieyes/nextjs"><img src="https://img.shields.io/npm/dw/@cookieyes/nextjs" alt="npm downloads"></a>
+  <a href="https://github.com/cookieyes/cookieyes/actions/workflows/ci.yml"><img src="https://github.com/cookieyes/cookieyes/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/npm/l/@cookieyes/nextjs" alt="license"></a>
+</p>
+
+<p align="center">
+  <a href="#quick-start">Quick start</a> ·
+  <a href="#pages-router">Pages Router</a> ·
+  <a href="#troubleshooting">Troubleshooting</a> ·
+  <a href="https://github.com/cookieyes/cookieyes/blob/main/docs/configuration.md">Docs</a>
+</p>
+
+---
+
+> **Free-tier note:** the "Powered by CookieYes" attribution in the banner may not be removed
+> on the free tier. Paid plans remove it.
+
+---
+
+## Key features
+
+- **App Router & Pages Router** — one component works in both.
+- **SSR-safe** — the banner is server-rendered into the first paint with no hydration mismatch.
+- **GDPR & CCPA** — opt-in and "Do Not Sell" opt-out flows.
+- **1:1 with `@cookieyes/react`** — every component, hook, and primitive, re-exported.
+
+## Prerequisites
+
+- **Node.js** ≥ 20
+- **Next.js** ≥ 14 (App Router or Pages Router)
+- **React** ≥ 18 and **React DOM** ≥ 18 (peer dependencies)
+
+## Quick start
+
+**1. Install the package**
 
 ```bash
 npm install @cookieyes/nextjs
@@ -13,13 +56,18 @@ yarn add @cookieyes/nextjs
 bun add @cookieyes/nextjs
 ```
 
-**Peer dependencies:** Next.js ≥ 14, React ≥ 18, React DOM ≥ 18
+**2. Create a client consent-manager component**
 
-## Setup (App Router)
+Because `initCookieYes()` and the components are client-side, this file **must** start with
+`"use client"`.
 
-Create a client component that configures the runtime and renders the consent
-UI. Because `createCookieYes()` and the components are client-side, this file
-**must** start with `"use client"`.
+> **Which API should I read consent with?** This package re-exports
+> `@cookieyes/react` verbatim, so the same guidance applies: **`useConsent()`**
+> in client components, and for Server Components or route handlers (no React
+> hooks available), read the raw cookie with `parseCookie` from
+> `@cookieyes/core`. See the [shared decision tree](../../docs/which-api-should-i-use.md)
+> and [`@cookieyes/react`'s Hooks section](../react/README.md#hooks) for the
+> full low-level surface.
 
 ```tsx
 // components/consent-manager.tsx
@@ -29,14 +77,15 @@ import {
   CookieBanner,
   CookiePreferences,
   RecallButton,
-  createCookieYes,
+  initCookieYes,
 } from "@cookieyes/nextjs";
+import "@cookieyes/react/styles.css";
 
-createCookieYes()
-  .mode("offline")        // "offline" (cookie-only) | "self-hosted"
-  .regulation("GDPR")     // "GDPR" | "CCPA"
-  .colorScheme("system")  // "light" | "dark" | "system"
-  .mount();
+initCookieYes({
+  mode: "cookie-only",    // "cookie-only" | "self-hosted"
+  regulation: "GDPR",     // "GDPR" | "CCPA" | "DEFAULT"
+  colorScheme: "system",  // "light" | "dark" | "system"
+});
 
 export function CookieYesRoot() {
   return (
@@ -49,7 +98,12 @@ export function CookieYesRoot() {
 }
 ```
 
-Then mount it in your root layout — the layout itself stays a Server Component:
+The `@cookieyes/react/styles.css` import is required — the components ship
+no inline styling, so without it they render unstyled. It's exposed from
+`@cookieyes/react` (a dependency of this package) rather than duplicated
+under `@cookieyes/nextjs`.
+
+**3. Mount it in your root layout** — the layout itself stays a Server Component:
 
 ```tsx
 // app/layout.tsx
@@ -59,18 +113,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>
-        {children}
         <CookieYesRoot />
+        {children}
       </body>
     </html>
   );
 }
 ```
 
+**4. Done.** The banner appears on first load. If it doesn't, see [Troubleshooting](#troubleshooting).
+
+> Prefer zero manual setup? Run `npx @cookieyes/cli init` — it detects Next.js (App or Pages
+> Router) and wires this up for you.
+
 ## Pages Router
 
-The same `CookieYesRoot` component works in the Pages Router — render it in
-`pages/_app.tsx` alongside your app:
+The same `CookieYesRoot` component works in the Pages Router — render it in `pages/_app.tsx`:
 
 ```tsx
 import type { AppProps } from "next/app";
@@ -88,7 +146,7 @@ export default function App({ Component, pageProps }: AppProps) {
 
 ## CCPA
 
-For `regulation("CCPA")`, also render the opt-out dialog:
+For `regulation: "CCPA"`, also render the opt-out dialog:
 
 ```tsx
 import { CookieBanner, CookiePreferences, CookieOptOut, RecallButton } from "@cookieyes/nextjs";
@@ -104,13 +162,56 @@ import { CookieBanner, CookiePreferences, CookieOptOut, RecallButton } from "@co
 
 ## API
 
-This package re-exports everything from `@cookieyes/react` — the builder
-(`createCookieYes`), components (`CookieBanner`, `CookiePreferences`,
-`CookieOptOut`, `RecallButton`, `GatedScript`, `GatedFrame`), headless
-primitives (`Banner`, `Preferences`, `OptOut`), and all hooks (`useConsent`,
-`useConsentActions`, `useConsentCategory`, `useRegulation`, …). See the
-[`@cookieyes/react` README](../react#readme) for the full reference.
+This package re-exports the entire `@cookieyes/react` surface — the setup function
+(`initCookieYes`), components (`CookieBanner`, `CookiePreferences`, `CookieOptOut`,
+`RecallButton`, `GatedScript`, `GatedFrame`), headless primitives (`Banner`, `Preferences`,
+`OptOut`), and all hooks (`useConsent`, `useConsentActions`, …).
+
+- Full option reference: **[Configuration](https://github.com/cookieyes/cookieyes/blob/main/docs/configuration.md)**.
+- Component/hook reference: the **[`@cookieyes/react` README](https://github.com/cookieyes/cookieyes/tree/main/sdk/react#readme)**.
+
+## Troubleshooting
+
+**The banner doesn't appear.**
+Ensure `<CookieYesRoot />` is mounted in your root `layout.tsx` (App Router) or `_app.tsx`
+(Pages Router), and that `initCookieYes(...)` runs in the `"use client"` consent-manager module.
+The banner only shows while the user hasn't acted — clear the `cookieyes-consent` cookie and
+reload while testing.
+
+**I get a `"use client"` error.**
+The consent-manager file (the one calling `initCookieYes` and importing the components) must
+start with `"use client"`. Keep your `layout.tsx` a Server Component and import
+`<CookieYesRoot />` into it — don't add `"use client"` to the layout itself.
+
+**Hydration mismatch on load.**
+Use `@cookieyes/nextjs` (not `@cookieyes/react`) so the banner is pre-marked `"use client"`.
+The server-rendered banner carries your configured `regulation`, so keep that value stable —
+rendering with a different regulation on the client than on the server causes a mismatch.
+
+Still stuck? [Open an issue](https://github.com/cookieyes/cookieyes/issues).
+
+## Community & support
+
+- [Open an issue](https://github.com/cookieyes/cookieyes/issues) — bug reports and feature requests.
+- Email — [support@cookieyes.com](mailto:support@cookieyes.com).
+- [Full documentation](https://github.com/cookieyes/cookieyes/blob/main/docs/configuration.md).
+
+_(A community chat channel is on the roadmap.)_
+
+## Contributing
+
+Contributions are welcome. Read our
+[Contributing Guidelines](https://github.com/cookieyes/cookieyes/blob/main/CONTRIBUTING.md) and
+[Code of Conduct](https://github.com/cookieyes/cookieyes/blob/main/CODE_OF_CONDUCT.md), then open
+a pull request.
+
+### Security
+
+Found a vulnerability? **Do not open a public issue** — follow our
+[Security Policy](https://github.com/cookieyes/cookieyes/blob/main/SECURITY.md) and use GitHub's
+private vulnerability reporting.
 
 ## License
 
-MIT — see [LICENSE](./LICENSE). The "Powered by CookieYes" attribution may not be removed on the free tier.
+MIT — see [LICENSE](./LICENSE). The "Powered by CookieYes" attribution may not be removed on the
+free tier.

package/dist/index.cjs

@@ -1,109 +1,3 @@
 "use client";
-'use strict';
-
-var react = require('@cookieyes/react');
-
-
-
-Object.defineProperty(exports, "Banner", {
-  enumerable: true,
-  get: function () { return react.Banner; }
-});
-Object.defineProperty(exports, "CookieBanner", {
-  enumerable: true,
-  get: function () { return react.CookieBanner; }
-});
-Object.defineProperty(exports, "CookieOptOut", {
-  enumerable: true,
-  get: function () { return react.CookieOptOut; }
-});
-Object.defineProperty(exports, "CookiePreferences", {
-  enumerable: true,
-  get: function () { return react.CookiePreferences; }
-});
-Object.defineProperty(exports, "GatedFrame", {
-  enumerable: true,
-  get: function () { return react.GatedFrame; }
-});
-Object.defineProperty(exports, "GatedScript", {
-  enumerable: true,
-  get: function () { return react.GatedScript; }
-});
-Object.defineProperty(exports, "OptOut", {
-  enumerable: true,
-  get: function () { return react.OptOut; }
-});
-Object.defineProperty(exports, "Preferences", {
-  enumerable: true,
-  get: function () { return react.Preferences; }
-});
-Object.defineProperty(exports, "RecallButton", {
-  enumerable: true,
-  get: function () { return react.RecallButton; }
-});
-Object.defineProperty(exports, "createCookieYes", {
-  enumerable: true,
-  get: function () { return react.createCookieYes; }
-});
-Object.defineProperty(exports, "defaultTranslations", {
-  enumerable: true,
-  get: function () { return react.defaultTranslations; }
-});
-Object.defineProperty(exports, "getCookieYes", {
-  enumerable: true,
-  get: function () { return react.getCookieYes; }
-});
-Object.defineProperty(exports, "getOrCreateConsentRuntime", {
-  enumerable: true,
-  get: function () { return react.getOrCreateConsentRuntime; }
-});
-Object.defineProperty(exports, "resetConsentRuntime", {
-  enumerable: true,
-  get: function () { return react.resetConsentRuntime; }
-});
-Object.defineProperty(exports, "resetCookieYes", {
-  enumerable: true,
-  get: function () { return react.resetCookieYes; }
-});
-Object.defineProperty(exports, "resolveTranslations", {
-  enumerable: true,
-  get: function () { return react.resolveTranslations; }
-});
-Object.defineProperty(exports, "useBannerVisibility", {
-  enumerable: true,
-  get: function () { return react.useBannerVisibility; }
-});
-Object.defineProperty(exports, "useConsent", {
-  enumerable: true,
-  get: function () { return react.useConsent; }
-});
-Object.defineProperty(exports, "useConsentActions", {
-  enumerable: true,
-  get: function () { return react.useConsentActions; }
-});
-Object.defineProperty(exports, "useConsentCategory", {
-  enumerable: true,
-  get: function () { return react.useConsentCategory; }
-});
-Object.defineProperty(exports, "useConsentRuntime", {
-  enumerable: true,
-  get: function () { return react.useConsentRuntime; }
-});
-Object.defineProperty(exports, "useOptOutOpen", {
-  enumerable: true,
-  get: function () { return react.useOptOutOpen; }
-});
-Object.defineProperty(exports, "usePreferencesOpen", {
-  enumerable: true,
-  get: function () { return react.usePreferencesOpen; }
-});
-Object.defineProperty(exports, "useRegulation", {
-  enumerable: true,
-  get: function () { return react.useRegulation; }
-});
-Object.defineProperty(exports, "useTranslations", {
-  enumerable: true,
-  get: function () { return react.useTranslations; }
-});
+"use strict";var e=require("@cookieyes/react");Object.defineProperty(exports,"Banner",{enumerable:!0,get:function(){return e.Banner}}),Object.defineProperty(exports,"CookieBanner",{enumerable:!0,get:function(){return e.CookieBanner}}),Object.defineProperty(exports,"CookieOptOut",{enumerable:!0,get:function(){return e.CookieOptOut}}),Object.defineProperty(exports,"CookiePreferences",{enumerable:!0,get:function(){return e.CookiePreferences}}),Object.defineProperty(exports,"DEFAULT_CATEGORIES",{enumerable:!0,get:function(){return e.DEFAULT_CATEGORIES}}),Object.defineProperty(exports,"GatedFrame",{enumerable:!0,get:function(){return e.GatedFrame}}),Object.defineProperty(exports,"GatedScript",{enumerable:!0,get:function(){return e.GatedScript}}),Object.defineProperty(exports,"OptOut",{enumerable:!0,get:function(){return e.OptOut}}),Object.defineProperty(exports,"Preferences",{enumerable:!0,get:function(){return e.Preferences}}),Object.defineProperty(exports,"RecallButton",{enumerable:!0,get:function(){return e.RecallButton}}),Object.defineProperty(exports,"ReloadNotice",{enumerable:!0,get:function(){return e.ReloadNotice}}),Object.defineProperty(exports,"createCookieYes",{enumerable:!0,get:function(){return e.createCookieYes}}),Object.defineProperty(exports,"defaultTranslations",{enumerable:!0,get:function(){return e.defaultTranslations}}),Object.defineProperty(exports,"getCookieYes",{enumerable:!0,get:function(){return e.getCookieYes}}),Object.defineProperty(exports,"getOrCreateConsentRuntime",{enumerable:!0,get:function(){return e.getOrCreateConsentRuntime}}),Object.defineProperty(exports,"initCookieYes",{enumerable:!0,get:function(){return e.initCookieYes}}),Object.defineProperty(exports,"registerStopHandler",{enumerable:!0,get:function(){return e.registerStopHandler}}),Object.defineProperty(exports,"resetConsentRuntime",{enumerable:!0,get:function(){return e.resetConsentRuntime}}),Object.defineProperty(exports,"resetCookieYes",{enumerable:!0,get:function(){return e.resetCookieYes}}),Object.defineProperty(exports,"resolveBuiltInIntegration",{enumerable:!0,get:function(){return e.resolveBuiltInIntegration}}),Object.defineProperty(exports,"resolveCategories",{enumerable:!0,get:function(){return e.resolveCategories}}),Object.defineProperty(exports,"resolveTranslations",{enumerable:!0,get:function(){return e.resolveTranslations}}),Object.defineProperty(exports,"useBannerVisibility",{enumerable:!0,get:function(){return e.useBannerVisibility}}),Object.defineProperty(exports,"useCategories",{enumerable:!0,get:function(){return e.useCategories}}),Object.defineProperty(exports,"useConsent",{enumerable:!0,get:function(){return e.useConsent}}),Object.defineProperty(exports,"useConsentActions",{enumerable:!0,get:function(){return e.useConsentActions}}),Object.defineProperty(exports,"useConsentCategory",{enumerable:!0,get:function(){return e.useConsentCategory}}),Object.defineProperty(exports,"useConsentRuntime",{enumerable:!0,get:function(){return e.useConsentRuntime}}),Object.defineProperty(exports,"useOptOutOpen",{enumerable:!0,get:function(){return e.useOptOutOpen}}),Object.defineProperty(exports,"usePreferencesOpen",{enumerable:!0,get:function(){return e.usePreferencesOpen}}),Object.defineProperty(exports,"useRegulation",{enumerable:!0,get:function(){return e.useRegulation}}),Object.defineProperty(exports,"useReloadNotice",{enumerable:!0,get:function(){return e.useReloadNotice}}),Object.defineProperty(exports,"useTranslations",{enumerable:!0,get:function(){return e.useTranslations}});
 //# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -1 +1 @@
-export { ActiveUI, Banner, Builder, ColorSchemePref, ConsentActions, ConsentBackend, ConsentCategory, ConsentChangePayload, ConsentConfig, ConsentManager, ConsentPayload, ConsentRuntime, ConsentRuntimeMode, ConsentRuntimeOptions, ConsentSnapshot, ConsentStore, ConsentStoreState, CookieBanner, CookieOptOut, CookiePreferences, CookieYesRuntime, CookieYesSnapshot, GatedFrame, GatedScript, I18nConfig, OptOut, Preferences, RecallButton, Regulation, RuntimeMode, ScriptEntry, ThemeConfig, TranslationMap, createCookieYes, defaultTranslations, getCookieYes, getOrCreateConsentRuntime, resetConsentRuntime, resetCookieYes, resolveTranslations, useBannerVisibility, useConsent, useConsentActions, useConsentCategory, useConsentRuntime, useOptOutOpen, usePreferencesOpen, useRegulation, useTranslations } from '@cookieyes/react';
+export { ActiveUI, AnyStopHandler, Banner, Builder, BuiltInIntegration, CategoryDef, ColorScheme, ColorSchemePref, ConsentActions, ConsentBackend, ConsentCategory, ConsentChangePayload, ConsentConfig, ConsentManager, ConsentPayload, ConsentRuntime, ConsentRuntimeMode, ConsentRuntimeOptions, ConsentSnapshot, ConsentStore, ConsentStoreState, CookieBanner, CookieOptOut, CookiePreferences, CookieYesConfig, CookieYesOfflineConfig, CookieYesRuntime, CookieYesSelfHostedConfig, CookieYesSnapshot, DEFAULT_CATEGORIES, GatedFrame, GatedScript, GoogleConsentSignal, I18nConfig, OptOut, Preferences, RecallButton, Regulation, ReloadNotice, ReloadNoticeState, ReloadOnlyHandler, ResolvedCategories, RuntimeMode, ScriptEntry, StopHandler, ThemeConfig, TranslationMap, UseReloadNoticeResult, createCookieYes, defaultTranslations, getCookieYes, getOrCreateConsentRuntime, initCookieYes, registerStopHandler, resetConsentRuntime, resetCookieYes, resolveBuiltInIntegration, resolveCategories, resolveTranslations, useBannerVisibility, useCategories, useConsent, useConsentActions, useConsentCategory, useConsentRuntime, useOptOutOpen, usePreferencesOpen, useRegulation, useReloadNotice, useTranslations } from '@cookieyes/react';

package/dist/index.js

@@ -1,4 +1,3 @@
 "use client";
-export { Banner, CookieBanner, CookieOptOut, CookiePreferences, GatedFrame, GatedScript, OptOut, Preferences, RecallButton, createCookieYes, defaultTranslations, getCookieYes, getOrCreateConsentRuntime, resetConsentRuntime, resetCookieYes, resolveTranslations, useBannerVisibility, useConsent, useConsentActions, useConsentCategory, useConsentRuntime, useOptOutOpen, usePreferencesOpen, useRegulation, useTranslations } from '@cookieyes/react';
+export{Banner,CookieBanner,CookieOptOut,CookiePreferences,DEFAULT_CATEGORIES,GatedFrame,GatedScript,OptOut,Preferences,RecallButton,ReloadNotice,createCookieYes,defaultTranslations,getCookieYes,getOrCreateConsentRuntime,initCookieYes,registerStopHandler,resetConsentRuntime,resetCookieYes,resolveBuiltInIntegration,resolveCategories,resolveTranslations,useBannerVisibility,useCategories,useConsent,useConsentActions,useConsentCategory,useConsentRuntime,useOptOutOpen,usePreferencesOpen,useRegulation,useReloadNotice,useTranslations}from"@cookieyes/react";
 //# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cookieyes/nextjs",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Next.js App Router adapter for the CookieYes consent SDK",
   "keywords": [
     "cookie consent",
@@ -47,7 +47,8 @@
     "node": ">=20"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "peerDependencies": {
     "next": ">=14.0.0",
@@ -55,8 +56,8 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@cookieyes/react": "0.1.0",
-    "@cookieyes/core": "0.1.0"
+    "@cookieyes/core": "0.2.0",
+    "@cookieyes/react": "0.3.0"
   },
   "devDependencies": {
     "@types/node": "^24.12.4",
@@ -66,13 +67,12 @@
     "next": "^16.2.6",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "tsup": "^8.5.1",
     "typescript": "^6.0.3",
     "vitest": "^4.1.7"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "rm -rf dist && rollup -c",
+    "dev": "rollup -c -w",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --coverage",
     "clean": "rm -rf dist"

package/dist/index.d.cts

@@ -1 +0,0 @@
-export { ActiveUI, Banner, Builder, ColorSchemePref, ConsentActions, ConsentBackend, ConsentCategory, ConsentChangePayload, ConsentConfig, ConsentManager, ConsentPayload, ConsentRuntime, ConsentRuntimeMode, ConsentRuntimeOptions, ConsentSnapshot, ConsentStore, ConsentStoreState, CookieBanner, CookieOptOut, CookiePreferences, CookieYesRuntime, CookieYesSnapshot, GatedFrame, GatedScript, I18nConfig, OptOut, Preferences, RecallButton, Regulation, RuntimeMode, ScriptEntry, ThemeConfig, TranslationMap, createCookieYes, defaultTranslations, getCookieYes, getOrCreateConsentRuntime, resetConsentRuntime, resetCookieYes, resolveTranslations, useBannerVisibility, useConsent, useConsentActions, useConsentCategory, useConsentRuntime, useOptOutOpen, usePreferencesOpen, useRegulation, useTranslations } from '@cookieyes/react';