astro-consent 1.0.5 → 1.0.7

package/dist/cli.cjs

@@ -69,8 +69,9 @@ let source = fs.readFileSync(configPath, "utf8");
    REMOVE MODE
 ───────────────────────────────────── */
 if (command === "remove") {
-    source = source.replace(/\s*astroConsent\s*\(\s*\{[\s\S]*?\}\s*\),?/gm, "");
-    source = source.replace(/import\s+astroConsent\s+from\s+["']astro-consent["'];?\n?/, "");
+    source = source
+        .replace(/\s*astroConsent\s*\([\s\S]*?\),?/gm, "")
+        .replace(/import\s+astroConsent\s+from\s+["']astro-consent["'];?\n?/, "");
     fs.writeFileSync(configPath, source.trim() + "\n", "utf8");
     const cssFile = path.join(CWD, "src", "cookiebanner.css");
     if (fs.existsSync(cssFile))
@@ -87,29 +88,26 @@ if (!fs.existsSync(cssDir)) {
     fs.mkdirSync(cssDir, { recursive: true });
 }
 /* ─────────────────────────────────────
-   Create FULL CSS VARIABLE OVERRIDE
+   Create CSS override file (ONCE)
 ───────────────────────────────────── */
 if (!fs.existsSync(cssFile)) {
     fs.writeFileSync(cssFile, `/* =========================================================
    astro-consent — FULL THEME VARIABLES
-   All visuals are controlled from here.
-   This file is NEVER overwritten.
+   This file is NEVER overwritten
    ========================================================= */
 
 :root {
-  /* ───── Core ───── */
   --cb-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 
-  /* ───── Banner ───── */
-  --cb-bg: rgba(12,18,32,0.88);
+  --cb-bg: #0c1220;
   --cb-border: rgba(255,255,255,0.08);
-  --cb-text: #e5e7eb;
+  --cb-text: #ffffff;
   --cb-muted: #9ca3af;
   --cb-link: #60a5fa;
+
   --cb-radius: 16px;
   --cb-shadow: 0 20px 40px rgba(0,0,0,0.35);
 
-  /* ───── Buttons ───── */
   --cb-btn-radius: 999px;
   --cb-btn-padding: 10px 18px;
 
@@ -117,195 +115,43 @@ if (!fs.existsSync(cssFile)) {
   --cb-accept-text: #052e16;
 
   --cb-reject-bg: #374151;
-  --cb-reject-text: #e5e7eb;
+  --cb-reject-text: #ffffff;
 
   --cb-manage-bg: transparent;
-  --cb-manage-text: #e5e7eb;
+  --cb-manage-text: #ffffff;
   --cb-manage-border: rgba(255,255,255,0.15);
 
-  /* ───── Modal ───── */
-  --cb-modal-backdrop: rgba(0,0,0,0.55);
   --cb-modal-bg: #0c1220;
+  --cb-modal-backdrop: rgba(0,0,0,0.55);
   --cb-modal-radius: 18px;
   --cb-modal-width: 480px;
 
-  /* ───── Toggles ───── */
   --cb-toggle-off-bg: #374151;
   --cb-toggle-on-bg: #22c55e;
   --cb-toggle-knob: #ffffff;
 }
-
-/* =========================================================
-   Banner
-   ========================================================= */
-
-#astro-cookie-banner {
-  position: fixed;
-  left: 16px;
-  right: 16px;
-  bottom: 16px;
-  z-index: 9999;
-  font-family: var(--cb-font);
-}
-
-.cb-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  gap: 24px;
-  justify-content: space-between;
-  align-items: center;
-
-  background: var(--cb-bg);
-  backdrop-filter: blur(14px);
-  border-radius: var(--cb-radius);
-  border: 1px solid var(--cb-border);
-  box-shadow: var(--cb-shadow);
-  color: var(--cb-text);
-}
-
-.cb-title {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.cb-desc {
-  font-size: 14px;
-  color: var(--cb-muted);
-}
-
-.cb-desc a {
-  color: var(--cb-link);
-  text-decoration: none;
-}
-
-.cb-actions {
-  display: flex;
-  gap: 10px;
-}
-
-/* =========================================================
-   Buttons
-   ========================================================= */
-
-.cb-actions button {
-  padding: var(--cb-btn-padding);
-  border-radius: var(--cb-btn-radius);
-  border: 0;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.cb-accept {
-  background: var(--cb-accept-bg);
-  color: var(--cb-accept-text);
-}
-
-.cb-reject {
-  background: var(--cb-reject-bg);
-  color: var(--cb-reject-text);
-}
-
-.cb-manage {
-  background: var(--cb-manage-bg);
-  color: var(--cb-manage-text);
-  border: 1px solid var(--cb-manage-border);
-}
-
-/* =========================================================
-   Modal
-   ========================================================= */
-
-#astro-cookie-modal {
-  position: fixed;
-  inset: 0;
-  background: var(--cb-modal-backdrop);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-}
-
-.cb-modal {
-  width: 100%;
-  max-width: var(--cb-modal-width);
-  background: var(--cb-modal-bg);
-  border-radius: var(--cb-modal-radius);
-  padding: 24px;
-  color: var(--cb-text);
-}
-
-/* =========================================================
-   Toggles
-   ========================================================= */
-
-.cb-toggle {
-  width: 44px;
-  height: 24px;
-  background: var(--cb-toggle-off-bg);
-  border-radius: 999px;
-  position: relative;
-  cursor: pointer;
-}
-
-.cb-toggle span {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  background: var(--cb-toggle-knob);
-  border-radius: 50%;
-  top: 3px;
-  left: 3px;
-  transition: transform 0.2s ease;
-}
-
-.cb-toggle.active {
-  background: var(--cb-toggle-on-bg);
-}
-
-.cb-toggle.active span {
-  transform: translateX(20px);
-}
-
-/* =========================================================
-   Mobile
-   ========================================================= */
-
-@media (max-width: 640px) {
-  .cb-container {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 16px;
-  }
-}
 `, "utf8");
-    console.log("🎨 Created src/cookiebanner.css (CSS variables enabled)");
+    console.log("🎨 Created src/cookiebanner.css");
 }
 /* ─────────────────────────────────────
-   Inject Astro integration
+   Inject Astro integration ONLY
 ───────────────────────────────────── */
 if (!source.includes(`from "astro-consent"`)) {
     source = `import astroConsent from "astro-consent";\n${source}`;
 }
 if (!source.includes("astroConsent(")) {
-    const injection = `    astroConsent({
+    source = source.replace(/integrations\s*:\s*\[/, match => `${match}
+    astroConsent({
       siteName: "My Website",
       policyUrl: "/privacy",
       consent: {
         days: 30,
         storageKey: "astro-consent"
-      },
-      categories: {
-        analytics: false,
-        marketing: false
       }
     }),
-`;
-    source = source.replace(/integrations\s*:\s*\[/, match => `${match}\n${injection}`);
+`);
 }
 fs.writeFileSync(configPath, source, "utf8");
 console.log("\n🎉 astro-consent installed successfully");
-console.log("👉 Edit src/cookiebanner.css to theme everything");
+console.log("👉 Style everything via src/cookiebanner.css");
 console.log("👉 Run `astro-consent remove` to uninstall\n");

package/dist/config/defaults.js

@@ -1,15 +1,23 @@
 /**
- * Default configuration values.
- * These are ONLY used as fallbacks if the user omits something.
- * User config always takes priority.
+ * DEFAULT_CONFIG
+ * ---------------------------------------------------------
+ * Fallback values ONLY.
+ *
+ * These are used:
+ * - when the user omits a value
+ * - during internal normalisation
+ *
+ * User-provided config ALWAYS takes priority.
  */
 export const DEFAULT_CONFIG = {
     siteName: "This website",
     policyUrl: "/privacy",
     consent: {
         enabled: true,
+        // Number of days consent remains valid
         days: 30,
-        storageKey: "astro-cookie-consent"
+        // Must match runtime + frontend API
+        storageKey: "astro-consent"
     },
     categories: {
         essential: {

package/dist/config/loadConfig.js

@@ -8,11 +8,9 @@ import { DEFAULT_CONFIG } from "./defaults.js";
  * Cache-busted to ensure updates are picked up during dev.
  */
 export async function loadUserConfig(projectRoot) {
-    const configPath = path.join(projectRoot, "src", "cookiebanner", "config.ts");
+    const configPath = path.join(projectRoot, "src", "astro-consent", "config.ts");
     let userConfig = {};
     try {
-        // 🔑 IMPORTANT:
-        // Bust Node ESM import cache using file modified time
         const stat = fs.statSync(configPath);
         const cacheBuster = `?v=${stat.mtimeMs}`;
         const imported = await import(
@@ -21,20 +19,11 @@ export async function loadUserConfig(projectRoot) {
         userConfig = imported?.default ?? {};
     }
     catch (err) {
-        console.warn("[cookiebanner] Failed to load user config, falling back to defaults:", err);
+        console.warn("[astro-consent] Failed to load user config, falling back to defaults");
     }
     return {
-        /* ─────────────────────────────
-           Site name
-        ───────────────────────────── */
         siteName: userConfig.siteName ?? DEFAULT_CONFIG.siteName,
-        /* ─────────────────────────────
-           Policy URL
-        ───────────────────────────── */
         policyUrl: userConfig.policyUrl ?? DEFAULT_CONFIG.policyUrl,
-        /* ─────────────────────────────
-           Consent settings
-        ───────────────────────────── */
         consent: {
             enabled: userConfig.consent?.enabled ??
                 DEFAULT_CONFIG.consent.enabled,
@@ -43,15 +32,14 @@ export async function loadUserConfig(projectRoot) {
             storageKey: userConfig.consent?.storageKey ??
                 DEFAULT_CONFIG.consent.storageKey
         },
-        /* ─────────────────────────────
-           Categories
-        ───────────────────────────── */
         categories: mergeCategories(userConfig.categories, DEFAULT_CONFIG.categories)
     };
 }
 /**
  * Merge category config safely.
- * Defaults are preserved, user overrides where provided.
+ * - Defaults are preserved
+ * - User overrides win
+ * - Custom categories are supported
  */
 function mergeCategories(userCategories, defaultCategories) {
     const merged = {};
@@ -62,11 +50,14 @@ function mergeCategories(userCategories, defaultCategories) {
             ...(userCategories?.[key] ?? {})
         };
     }
-    // Include any custom categories the user added
+    // Add user-defined custom categories safely
     if (userCategories) {
         for (const key of Object.keys(userCategories)) {
             if (!merged[key]) {
-                merged[key] = userCategories[key];
+                merged[key] = {
+                    ...userCategories[key],
+                    enabled: userCategories[key].enabled ?? false
+                };
             }
         }
     }

package/dist/index.js

@@ -15,201 +15,35 @@ export default function astroConsent(options = {}) {
         hooks: {
             "astro:config:setup": ({ injectScript }) => {
                 /* ─────────────────────────────────────
-                   Styles (banner + modal)
+                   LOAD USER CSS (required)
                 ───────────────────────────────────── */
-                injectScript("head-inline", `
-const style = document.createElement("style");
-style.innerHTML = \`
-:root {
-  --cb-bg: rgba(12,18,32,.88);
-  --cb-border: rgba(255,255,255,.08);
-  --cb-text: #e5e7eb;
-  --cb-muted: #9ca3af;
-  --cb-link: #60a5fa;
-  --cb-accept: #22c55e;
-  --cb-reject: #374151;
-}
-
-/* ───── Banner ───── */
-
-#astro-consent-banner {
-  position: fixed;
-  left: 16px;
-  right: 16px;
-  bottom: 16px;
-  z-index: 9999;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
-}
-
-.cb-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px 24px;
-  display: flex;
-  gap: 24px;
-  justify-content: space-between;
-  align-items: center;
-
-  background: var(--cb-bg);
-  backdrop-filter: blur(14px);
-  border-radius: 16px;
-  border: 1px solid var(--cb-border);
-  box-shadow: 0 20px 40px rgba(0,0,0,.35);
-
-  color: var(--cb-text);
-}
-
-.cb-text {
-  max-width: 760px;
-}
-
-.cb-title {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.cb-desc {
-  font-size: 14px;
-  color: var(--cb-muted);
-}
-
-.cb-desc a {
-  color: var(--cb-link);
-  text-decoration: none;
-}
-
-.cb-desc a:hover {
-  text-decoration: underline;
-}
-
-.cb-actions {
-  display: flex;
-  gap: 10px;
-  flex-shrink: 0;
-}
-
-.cb-actions button {
-  padding: 10px 18px;
-  border-radius: 999px;
-  border: 0;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.cb-accept {
-  background: var(--cb-accept);
-  color: #052e16;
-}
-
-.cb-reject {
-  background: var(--cb-reject);
-  color: #e5e7eb;
-}
-
-.cb-manage {
-  background: transparent;
-  color: var(--cb-text);
-  border: 1px solid var(--cb-border);
-}
-
-/* ───── Modal ───── */
-
-#astro-consent-modal {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,.55);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
-}
-
-.cb-modal {
-  width: 100%;
-  max-width: 480px;
-  background: #0c1220;
-  border-radius: 18px;
-  padding: 24px;
-  border: 1px solid var(--cb-border);
-  color: var(--cb-text);
-}
-
-.cb-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--cb-border);
-}
-
-.cb-row:last-child {
-  border-bottom: 0;
-}
-
-.cb-toggle {
-  width: 44px;
-  height: 24px;
-  background: #374151;
-  border-radius: 999px;
-  position: relative;
-  cursor: pointer;
-}
-
-.cb-toggle span {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  background: #fff;
-  border-radius: 50%;
-  top: 3px;
-  left: 3px;
-  transition: transform .2s;
-}
-
-.cb-toggle.active {
-  background: var(--cb-accept);
-}
-
-.cb-toggle.active span {
-  transform: translateX(20px);
-}
-
-@media (max-width: 640px) {
-  .cb-container {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 16px;
-  }
-}
-\`;
-document.head.appendChild(style);
-`);
+                injectScript("head-inline", `@import "/src/cookiebanner.css";`);
                 /* ─────────────────────────────────────
-                   Consent runtime
+                   Consent runtime (NO CSS)
                 ───────────────────────────────────── */
                 injectScript("page", `
 (() => {
   const KEY = "${storageKey}";
   const TTL = ${ttl};
 
-  function now(){ return Date.now(); }
+  function now() { return Date.now(); }
 
-  function read(){
-    try{
+  function read() {
+    try {
       const raw = localStorage.getItem(KEY);
-      if(!raw) return null;
+      if (!raw) return null;
       const data = JSON.parse(raw);
-      if(data.expiresAt < now()){
+      if (data.expiresAt < now()) {
         localStorage.removeItem(KEY);
         return null;
       }
       return data;
-    }catch{ return null; }
+    } catch {
+      return null;
+    }
   }
 
-  function write(categories){
+  function write(categories) {
     localStorage.setItem(KEY, JSON.stringify({
       updatedAt: now(),
       expiresAt: now() + TTL,
@@ -220,7 +54,7 @@ document.head.appendChild(style);
   window.astroConsent = {
     get: read,
     set: write,
-    reset(){
+    reset() {
       localStorage.removeItem(KEY);
       location.reload();
     }
@@ -228,7 +62,7 @@ document.head.appendChild(style);
 })();
 `);
                 /* ─────────────────────────────────────
-                   Banner + modal UI
+                   Banner + modal UI (NO CSS)
                 ───────────────────────────────────── */
                 injectScript("page", `
 (() => {
@@ -241,7 +75,7 @@ document.head.appendChild(style);
 
   banner.innerHTML = \`
     <div class="cb-container">
-      <div class="cb-text">
+      <div>
         <div class="cb-title">${siteName} uses cookies</div>
         <div class="cb-desc">
           Choose how your data is used.
@@ -259,18 +93,18 @@ document.head.appendChild(style);
   document.body.appendChild(banner);
 
   banner.querySelector(".cb-accept").onclick = () => {
-    window.astroConsent.set({ essential:true, analytics:true, marketing:true });
+    window.astroConsent.set({ essential: true, analytics: true, marketing: true });
     banner.remove();
   };
 
   banner.querySelector(".cb-reject").onclick = () => {
-    window.astroConsent.set({ essential:true });
+    window.astroConsent.set({ essential: true });
     banner.remove();
   };
 
   banner.querySelector(".cb-manage").onclick = openModal;
 
-  function openModal(){
+  function openModal() {
     const modal = document.createElement("div");
     modal.id = "astro-consent-modal";
 
@@ -293,7 +127,7 @@ document.head.appendChild(style);
           <div class="cb-toggle" data-key="marketing"><span></span></div>
         </div>
 
-        <div class="cb-actions" style="margin-top:16px;justify-content:flex-end">
+        <div class="cb-actions">
           <button class="cb-accept">Save preferences</button>
         </div>
       </div>
@@ -303,7 +137,7 @@ document.head.appendChild(style);
 
     modal.querySelectorAll(".cb-toggle").forEach(toggle => {
       const key = toggle.getAttribute("data-key");
-      if(state[key]) toggle.classList.add("active");
+      if (state[key]) toggle.classList.add("active");
 
       toggle.onclick = () => {
         state[key] = !state[key];
@@ -312,13 +146,13 @@ document.head.appendChild(style);
     });
 
     modal.querySelector(".cb-accept").onclick = () => {
-      window.astroConsent.set({ essential:true, ...state });
+      window.astroConsent.set({ essential: true, ...state });
       modal.remove();
       banner.remove();
     };
 
     modal.onclick = e => {
-      if(e.target === modal) modal.remove();
+      if (e.target === modal) modal.remove();
     };
   }
 })();

package/dist/templates/cssTemplate.js

@@ -114,4 +114,4 @@ export const DEFAULT_CSS = `
   color: var(--cb-btn-text);
   border-color: var(--cb-btn-bg);
 }
-`;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-consent",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "A privacy-first, GDPR-compliant cookie consent banner for Astro with a built-in preferences modal, zero dependencies, and full theme control.",
   "type": "module",
   "author": {