@jwiedeman/gtm-kit-cli 1.0.1

package/dist/cli.js

@@ -0,0 +1,1204 @@
+#!/usr/bin/env node
+#!/usr/bin/env node
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/cli.ts
+import * as fs2 from "fs";
+import * as path2 from "path";
+import * as readline from "readline";
+
+// src/detect.ts
+import * as fs from "fs";
+import * as path from "path";
+var readPackageJson = (dir) => {
+  const pkgPath = path.join(dir, "package.json");
+  try {
+    if (!fs.existsSync(pkgPath)) {
+      return null;
+    }
+    const content = fs.readFileSync(pkgPath, "utf-8");
+    return JSON.parse(content);
+  } catch (e) {
+    return null;
+  }
+};
+var fileExists = (dir, filename) => {
+  return fs.existsSync(path.join(dir, filename));
+};
+var getDependencyVersion = (pkg, name) => {
+  var _a, _b, _c;
+  return (_c = (_a = pkg.dependencies) == null ? void 0 : _a[name]) != null ? _c : (_b = pkg.devDependencies) == null ? void 0 : _b[name];
+};
+var detectPackageManager = (dir, pkg) => {
+  if (fileExists(dir, "pnpm-lock.yaml"))
+    return "pnpm";
+  if (fileExists(dir, "yarn.lock"))
+    return "yarn";
+  if (fileExists(dir, "bun.lockb"))
+    return "bun";
+  if (fileExists(dir, "package-lock.json"))
+    return "npm";
+  if (pkg == null ? void 0 : pkg.packageManager) {
+    if (pkg.packageManager.startsWith("pnpm"))
+      return "pnpm";
+    if (pkg.packageManager.startsWith("yarn"))
+      return "yarn";
+    if (pkg.packageManager.startsWith("bun"))
+      return "bun";
+  }
+  return "npm";
+};
+var getInstallCommand = (packageManager, packages) => {
+  const pkgList = packages.join(" ");
+  switch (packageManager) {
+    case "pnpm":
+      return `pnpm add ${pkgList}`;
+    case "yarn":
+      return `yarn add ${pkgList}`;
+    case "bun":
+      return `bun add ${pkgList}`;
+    case "npm":
+    default:
+      return `npm install ${pkgList}`;
+  }
+};
+var detectFramework = (dir = process.cwd()) => {
+  var _a;
+  const pkg = readPackageJson(dir);
+  const packageManager = detectPackageManager(dir, pkg);
+  if (pkg && getDependencyVersion(pkg, "nuxt")) {
+    const version = getDependencyVersion(pkg, "nuxt");
+    return {
+      framework: "nuxt",
+      version: version == null ? void 0 : version.replace(/^\^|~/, ""),
+      packageManager,
+      packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-nuxt"],
+      displayName: "Nuxt 3",
+      confidence: 100,
+      reason: 'Found "nuxt" in dependencies'
+    };
+  }
+  if (fileExists(dir, "nuxt.config.ts") || fileExists(dir, "nuxt.config.js")) {
+    return {
+      framework: "nuxt",
+      packageManager,
+      packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-nuxt"],
+      displayName: "Nuxt 3",
+      confidence: 95,
+      reason: "Found nuxt.config file"
+    };
+  }
+  if (pkg && getDependencyVersion(pkg, "next")) {
+    const version = getDependencyVersion(pkg, "next");
+    return {
+      framework: "next",
+      version: version == null ? void 0 : version.replace(/^\^|~/, ""),
+      packageManager,
+      packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-next"],
+      displayName: "Next.js",
+      confidence: 100,
+      reason: 'Found "next" in dependencies'
+    };
+  }
+  if (fileExists(dir, "next.config.js") || fileExists(dir, "next.config.mjs") || fileExists(dir, "next.config.ts")) {
+    return {
+      framework: "next",
+      packageManager,
+      packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-next"],
+      displayName: "Next.js",
+      confidence: 90,
+      reason: "Found next.config file"
+    };
+  }
+  if (pkg && getDependencyVersion(pkg, "vue")) {
+    const version = getDependencyVersion(pkg, "vue");
+    return {
+      framework: "vue",
+      version: version == null ? void 0 : version.replace(/^\^|~/, ""),
+      packageManager,
+      packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-vue"],
+      displayName: "Vue 3",
+      confidence: 100,
+      reason: 'Found "vue" in dependencies'
+    };
+  }
+  if (fileExists(dir, "vite.config.ts") || fileExists(dir, "vite.config.js")) {
+    const viteConfig = path.join(dir, fileExists(dir, "vite.config.ts") ? "vite.config.ts" : "vite.config.js");
+    try {
+      const content = fs.readFileSync(viteConfig, "utf-8");
+      if (content.includes("@vitejs/plugin-vue") || content.includes("vue()")) {
+        return {
+          framework: "vue",
+          packageManager,
+          packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-vue"],
+          displayName: "Vue 3 (Vite)",
+          confidence: 85,
+          reason: "Found Vue plugin in vite.config"
+        };
+      }
+    } catch (e) {
+    }
+  }
+  if (pkg && getDependencyVersion(pkg, "react")) {
+    const version = getDependencyVersion(pkg, "react");
+    const majorVersion = parseInt((_a = version == null ? void 0 : version.replace(/^\^|~/, "").split(".")[0]) != null ? _a : "18", 10);
+    if (majorVersion >= 16) {
+      return {
+        framework: "react",
+        version: version == null ? void 0 : version.replace(/^\^|~/, ""),
+        packageManager,
+        packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-react"],
+        displayName: majorVersion >= 18 ? "React 18+" : "React 16.8+",
+        confidence: 100,
+        reason: 'Found "react" in dependencies'
+      };
+    }
+    return {
+      framework: "react",
+      version: version == null ? void 0 : version.replace(/^\^|~/, ""),
+      packageManager,
+      packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-react-legacy"],
+      displayName: "React (Legacy)",
+      confidence: 100,
+      reason: 'Found older "react" version in dependencies'
+    };
+  }
+  const srcDir = path.join(dir, "src");
+  if (fs.existsSync(srcDir)) {
+    try {
+      const files = fs.readdirSync(srcDir);
+      if (files.some((f) => f.endsWith(".jsx") || f.endsWith(".tsx"))) {
+        return {
+          framework: "react",
+          packageManager,
+          packages: ["@jwiedeman/gtm-kit", "@jwiedeman/gtm-kit-react"],
+          displayName: "React (detected from .jsx/.tsx files)",
+          confidence: 70,
+          reason: "Found .jsx or .tsx files in src/"
+        };
+      }
+    } catch (e) {
+    }
+  }
+  return {
+    framework: "vanilla",
+    packageManager,
+    packages: ["@jwiedeman/gtm-kit"],
+    displayName: "Vanilla JavaScript",
+    confidence: 50,
+    reason: "No framework detected, using core package only"
+  };
+};
+var getDetectionSummary = (info) => {
+  const lines = [
+    `Framework: ${info.displayName}`,
+    `Package Manager: ${info.packageManager}`,
+    `Confidence: ${info.confidence}%`,
+    `Reason: ${info.reason}`,
+    "",
+    "Packages to install:",
+    ...info.packages.map((p) => `  - ${p}`)
+  ];
+  if (info.version) {
+    lines.splice(1, 0, `Version: ${info.version}`);
+  }
+  return lines.join("\n");
+};
+
+// src/validate.ts
+var GTM_ID_PATTERN = /^GTM-[A-Z0-9]{6,8}$/;
+var COMMON_MISTAKES = [
+  {
+    pattern: /^gtm-[A-Za-z0-9]/,
+    message: 'GTM ID should use uppercase "GTM-" prefix',
+    suggestion: "Use uppercase: GTM-XXXXXX"
+  },
+  {
+    pattern: /^G-/,
+    message: "This looks like a GA4 Measurement ID, not a GTM container ID",
+    suggestion: 'GTM IDs start with "GTM-", GA4 IDs start with "G-"'
+  },
+  {
+    pattern: /^UA-/,
+    message: "This is a Universal Analytics ID, not a GTM container ID",
+    suggestion: 'GTM IDs start with "GTM-", UA IDs start with "UA-"'
+  },
+  {
+    pattern: /^AW-/,
+    message: "This looks like a Google Ads conversion ID, not a GTM container ID",
+    suggestion: 'GTM IDs start with "GTM-", Google Ads IDs start with "AW-"'
+  },
+  {
+    pattern: /^DC-/,
+    message: "This looks like a DoubleClick ID, not a GTM container ID",
+    suggestion: 'GTM IDs start with "GTM-"'
+  },
+  {
+    pattern: /^GTM-[A-Za-z0-9]{1,5}$/,
+    message: "GTM container ID appears too short",
+    suggestion: "GTM IDs are typically 6-8 characters after the prefix (e.g., GTM-ABCD123)"
+  },
+  {
+    pattern: /^GTM-[A-Za-z0-9]{9,}$/,
+    message: "GTM container ID appears too long",
+    suggestion: "GTM IDs are typically 6-8 characters after the prefix (e.g., GTM-ABCD123)"
+  },
+  {
+    pattern: /\s/,
+    message: "GTM container ID should not contain spaces",
+    suggestion: "Remove any spaces from the ID"
+  }
+];
+var validateGtmId = (id) => {
+  if (!id || typeof id !== "string") {
+    return {
+      valid: false,
+      error: "GTM container ID is required",
+      suggestion: "Provide a valid GTM container ID (e.g., GTM-XXXXXX)"
+    };
+  }
+  const trimmedId = id.trim();
+  if (trimmedId.length === 0) {
+    return {
+      valid: false,
+      error: "GTM container ID cannot be empty",
+      suggestion: "Provide a valid GTM container ID (e.g., GTM-XXXXXX)"
+    };
+  }
+  for (const mistake of COMMON_MISTAKES) {
+    if (mistake.pattern.test(trimmedId)) {
+      return {
+        valid: false,
+        error: mistake.message,
+        suggestion: mistake.suggestion
+      };
+    }
+  }
+  if (!GTM_ID_PATTERN.test(trimmedId)) {
+    if (!trimmedId.startsWith("GTM-")) {
+      return {
+        valid: false,
+        error: 'GTM container ID must start with "GTM-"',
+        suggestion: `Did you mean: GTM-${trimmedId.replace(/^[A-Za-z]+-?/, "")}?`
+      };
+    }
+    const afterPrefix = trimmedId.slice(4);
+    if (/[a-z]/.test(afterPrefix)) {
+      return {
+        valid: false,
+        error: "GTM container ID should use uppercase letters",
+        suggestion: `Did you mean: GTM-${afterPrefix.toUpperCase()}?`
+      };
+    }
+    if (/[^A-Z0-9]/.test(afterPrefix)) {
+      return {
+        valid: false,
+        error: "GTM container ID should only contain letters and numbers after GTM-",
+        suggestion: "Remove any special characters from the ID"
+      };
+    }
+    return {
+      valid: false,
+      error: "Invalid GTM container ID format",
+      suggestion: "GTM container IDs follow the format: GTM-XXXXXX (6-8 alphanumeric characters)"
+    };
+  }
+  return { valid: true };
+};
+
+// src/codegen.ts
+var generateSetupCode = (options) => {
+  const { framework, containers, dataLayerName, includeConsent = false, typescript = true } = options;
+  const ext = typescript ? "ts" : "js";
+  const containerValue = Array.isArray(containers) ? `[${containers.map((c2) => `'${c2}'`).join(", ")}]` : `'${containers}'`;
+  switch (framework) {
+    case "next":
+      return generateNextSetupCode({ containerValue, dataLayerName, includeConsent, ext });
+    case "nuxt":
+      return generateNuxtSetupCode({ containerValue, dataLayerName, includeConsent, ext });
+    case "react":
+      return generateReactSetupCode({ containerValue, dataLayerName, includeConsent, ext });
+    case "vue":
+      return generateVueSetupCode({ containerValue, dataLayerName, includeConsent, ext });
+    case "vanilla":
+    default:
+      return generateVanillaSetupCode({ containerValue, dataLayerName, includeConsent, ext });
+  }
+};
+var generateNextSetupCode = (ctx) => {
+  const { containerValue, dataLayerName, includeConsent, ext } = ctx;
+  const dataLayerOption = dataLayerName ? `
+    dataLayerName: '${dataLayerName}',` : "";
+  const providerCode = `// app/providers/gtm-provider.${ext}x
+'use client';
+
+import { GtmProvider } from '@jwiedeman/gtm-kit-react';
+import { useTrackPageViews } from '@jwiedeman/gtm-kit-next';
+${ctx.ext === "ts" ? "import type { ReactNode } from 'react';\n" : ""}
+${includeConsent ? `import { eeaDefault } from '@jwiedeman/gtm-kit';
+` : ""}
+${ctx.ext === "ts" ? `interface GtmProviderWrapperProps {
+  children: ReactNode;
+}
+` : ""}
+export function GtmProviderWrapper({ children }${ctx.ext === "ts" ? ": GtmProviderWrapperProps" : ""}) {
+  return (
+    <GtmProvider
+      containers={${containerValue}}${dataLayerOption}${includeConsent ? "\n      consentDefaults={eeaDefault}" : ""}
+    >
+      <PageViewTracker />
+      {children}
+    </GtmProvider>
+  );
+}
+
+function PageViewTracker() {
+  useTrackPageViews();
+  return null;
+}
+`;
+  const layoutCode = `// app/layout.${ext}x
+import { GtmProviderWrapper } from './providers/gtm-provider';
+import { GtmNoScript } from '@jwiedeman/gtm-kit-next';
+${ctx.ext === "ts" ? "import type { ReactNode } from 'react';\n" : ""}
+export default function RootLayout({ children }${ctx.ext === "ts" ? ": { children: ReactNode }" : ""}) {
+  return (
+    <html lang="en">
+      <body>
+        <GtmNoScript containerId="${Array.isArray(containerValue) ? containerValue[0] : containerValue.replace(/'/g, "")}" />
+        <GtmProviderWrapper>
+          {children}
+        </GtmProviderWrapper>
+      </body>
+    </html>
+  );
+}
+`;
+  const exampleUsage = `// Example: Track a button click
+'use client';
+
+import { useGtmPush } from '@jwiedeman/gtm-kit-react';
+
+export function MyButton() {
+  const push = useGtmPush();
+
+  const handleClick = () => {
+    push({
+      event: 'button_click',
+      button_name: 'signup_cta'
+    });
+  };
+
+  return <button onClick={handleClick}>Sign Up</button>;
+}
+`;
+  return [
+    {
+      filename: `app/providers/gtm-provider.${ext}x`,
+      content: providerCode,
+      description: "GTM Provider wrapper with page view tracking"
+    },
+    {
+      filename: `app/layout.${ext}x`,
+      content: layoutCode,
+      description: "Root layout with GTM noscript tag"
+    },
+    {
+      filename: `components/example-button.${ext}x`,
+      content: exampleUsage,
+      description: "Example component showing how to track events"
+    }
+  ];
+};
+var generateNuxtSetupCode = (ctx) => {
+  const { containerValue, dataLayerName, includeConsent, ext } = ctx;
+  const dataLayerOption = dataLayerName ? `
+    dataLayerName: '${dataLayerName}',` : "";
+  const pluginCode = `// plugins/gtm.client.${ext}
+import { createNuxtGtmPlugin } from '@jwiedeman/gtm-kit-nuxt';
+${includeConsent ? `import { eeaDefault } from '@jwiedeman/gtm-kit';
+` : ""}
+export default defineNuxtPlugin((nuxtApp) => {
+  createNuxtGtmPlugin(nuxtApp.vueApp, {
+    containers: ${containerValue},${dataLayerOption}
+    trackPageViews: true${includeConsent ? ",\n    consentDefaults: eeaDefault" : ""}
+  });
+});
+`;
+  const pageTrackingCode = `// composables/usePageTracking.${ext}
+import { useTrackPageViews } from '@jwiedeman/gtm-kit-nuxt';
+
+/**
+ * Call this composable in your app.vue or layouts to enable automatic page tracking
+ */
+export function usePageTracking() {
+  const route = useRoute();
+
+  useTrackPageViews({
+    route,
+    eventName: 'page_view',
+    includeQueryParams: true
+  });
+}
+`;
+  const appVueCode = `<!-- app.vue -->
+<script setup${ext === "ts" ? ' lang="ts"' : ""}>
+import { usePageTracking } from '~/composables/usePageTracking';
+
+// Enable automatic page view tracking
+usePageTracking();
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+`;
+  const exampleUsage = `<!-- Example: Track a button click -->
+<script setup${ext === "ts" ? ' lang="ts"' : ""}>
+import { useNuxtGtmPush } from '@jwiedeman/gtm-kit-nuxt';
+
+const push = useNuxtGtmPush();
+
+const handleClick = () => {
+  push({
+    event: 'button_click',
+    button_name: 'signup_cta'
+  });
+};
+</script>
+
+<template>
+  <button @click="handleClick">Sign Up</button>
+</template>
+`;
+  return [
+    {
+      filename: `plugins/gtm.client.${ext}`,
+      content: pluginCode,
+      description: "Nuxt plugin for GTM (client-side only)"
+    },
+    {
+      filename: `composables/usePageTracking.${ext}`,
+      content: pageTrackingCode,
+      description: "Composable for automatic page view tracking"
+    },
+    {
+      filename: "app.vue",
+      content: appVueCode,
+      description: "App root with page tracking enabled"
+    },
+    {
+      filename: `components/ExampleButton.vue`,
+      content: exampleUsage,
+      description: "Example component showing how to track events"
+    }
+  ];
+};
+var generateReactSetupCode = (ctx) => {
+  const { containerValue, dataLayerName, includeConsent, ext } = ctx;
+  const dataLayerOption = dataLayerName ? `
+      dataLayerName: '${dataLayerName}',` : "";
+  const appCode = `// src/App.${ext}x
+import { GtmProvider } from '@jwiedeman/gtm-kit-react';
+${includeConsent ? `import { eeaDefault } from '@jwiedeman/gtm-kit';
+` : ""}
+function App() {
+  return (
+    <GtmProvider
+      containers={${containerValue}}${dataLayerOption}${includeConsent ? "\n      consentDefaults={eeaDefault}" : ""}
+    >
+      {/* Your app content */}
+      <main>
+        <h1>Hello GTM Kit!</h1>
+      </main>
+    </GtmProvider>
+  );
+}
+
+export default App;
+`;
+  const routerCode = `// src/AppWithRouter.${ext}x
+// Use this if you have react-router-dom
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { GtmProvider, useGtmPush } from '@jwiedeman/gtm-kit-react';
+import { useEffect } from 'react';
+${includeConsent ? `import { eeaDefault } from '@jwiedeman/gtm-kit';
+` : ""}
+// Automatic page view tracking
+function PageViewTracker() {
+  const location = useLocation();
+  const push = useGtmPush();
+
+  useEffect(() => {
+    push({
+      event: 'page_view',
+      page_path: location.pathname + location.search
+    });
+  }, [location, push]);
+
+  return null;
+}
+
+function App() {
+  return (
+    <GtmProvider
+      containers={${containerValue}}${dataLayerOption}${includeConsent ? "\n      consentDefaults={eeaDefault}" : ""}
+    >
+      <BrowserRouter>
+        <PageViewTracker />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          {/* Add your routes */}
+        </Routes>
+      </BrowserRouter>
+    </GtmProvider>
+  );
+}
+
+function Home() {
+  return <h1>Home Page</h1>;
+}
+
+export default App;
+`;
+  const exampleUsage = `// src/components/TrackingExample.${ext}x
+import { useGtmPush } from '@jwiedeman/gtm-kit-react';
+
+export function SignupButton() {
+  const push = useGtmPush();
+
+  const handleClick = () => {
+    push({
+      event: 'button_click',
+      button_name: 'signup_cta'
+    });
+  };
+
+  return <button onClick={handleClick}>Sign Up</button>;
+}
+
+// Track form submission
+export function ContactForm() {
+  const push = useGtmPush();
+
+  const handleSubmit = (e${ctx.ext === "ts" ? ": React.FormEvent" : ""}) => {
+    e.preventDefault();
+    push({
+      event: 'form_submit',
+      form_name: 'contact'
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="email" placeholder="Email" />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+`;
+  return [
+    {
+      filename: `src/App.${ext}x`,
+      content: appCode,
+      description: "Basic App setup with GTM Provider"
+    },
+    {
+      filename: `src/AppWithRouter.${ext}x`,
+      content: routerCode,
+      description: "App setup with React Router and page tracking"
+    },
+    {
+      filename: `src/components/TrackingExample.${ext}x`,
+      content: exampleUsage,
+      description: "Example components showing how to track events"
+    }
+  ];
+};
+var generateVueSetupCode = (ctx) => {
+  const { containerValue, dataLayerName, includeConsent, ext } = ctx;
+  const dataLayerOption = dataLayerName ? `
+    dataLayerName: '${dataLayerName}',` : "";
+  const mainCode = `// src/main.${ext}
+import { createApp } from 'vue';
+import { GtmPlugin } from '@jwiedeman/gtm-kit-vue';
+${includeConsent ? `import { eeaDefault } from '@jwiedeman/gtm-kit';
+` : ""}import App from './App.vue';
+
+const app = createApp(App);
+
+app.use(GtmPlugin, {
+  containers: ${containerValue}${dataLayerOption}${includeConsent ? ",\n  consentDefaults: eeaDefault" : ""}
+});
+
+app.mount('#app');
+`;
+  const routerCode = `// src/router-tracking.${ext}
+// Add this to your router setup for automatic page tracking
+import { useGtmPush } from '@jwiedeman/gtm-kit-vue';
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+export function usePageTracking() {
+  const route = useRoute();
+  const push = useGtmPush();
+
+  watch(
+    () => route.fullPath,
+    (path) => {
+      push({
+        event: 'page_view',
+        page_path: path,
+        page_title: document.title
+      });
+    },
+    { immediate: true }
+  );
+}
+`;
+  const appVueCode = `<!-- src/App.vue -->
+<script setup${ext === "ts" ? ' lang="ts"' : ""}>
+import { usePageTracking } from './router-tracking';
+
+// Enable page view tracking if using vue-router
+// usePageTracking();
+</script>
+
+<template>
+  <main>
+    <h1>Hello GTM Kit!</h1>
+    <RouterView v-if="$router" />
+  </main>
+</template>
+`;
+  const exampleUsage = `<!-- src/components/TrackingExample.vue -->
+<script setup${ext === "ts" ? ' lang="ts"' : ""}>
+import { useGtmPush } from '@jwiedeman/gtm-kit-vue';
+
+const push = useGtmPush();
+
+const handleClick = () => {
+  push({
+    event: 'button_click',
+    button_name: 'signup_cta'
+  });
+};
+
+const handleSubmit = () => {
+  push({
+    event: 'form_submit',
+    form_name: 'contact'
+  });
+};
+</script>
+
+<template>
+  <div>
+    <!-- Track button click -->
+    <button @click="handleClick">Sign Up</button>
+
+    <!-- Track form submission -->
+    <form @submit.prevent="handleSubmit">
+      <input type="email" placeholder="Email" />
+      <button type="submit">Submit</button>
+    </form>
+  </div>
+</template>
+`;
+  return [
+    {
+      filename: `src/main.${ext}`,
+      content: mainCode,
+      description: "Main entry point with GTM Plugin"
+    },
+    {
+      filename: `src/router-tracking.${ext}`,
+      content: routerCode,
+      description: "Page tracking composable for Vue Router"
+    },
+    {
+      filename: "src/App.vue",
+      content: appVueCode,
+      description: "App component with tracking setup"
+    },
+    {
+      filename: "src/components/TrackingExample.vue",
+      content: exampleUsage,
+      description: "Example component showing how to track events"
+    }
+  ];
+};
+var generateVanillaSetupCode = (ctx) => {
+  const { containerValue, dataLayerName, includeConsent, ext } = ctx;
+  const dataLayerOption = dataLayerName ? `
+  dataLayerName: '${dataLayerName}',` : "";
+  const esmCode = `// gtm-setup.${ext}
+import { createGtmClient${includeConsent ? ", eeaDefault" : ""} } from '@jwiedeman/gtm-kit';
+
+// Create the GTM client
+const gtm = createGtmClient({
+  containers: ${containerValue}${dataLayerOption}
+});
+${includeConsent ? "\n// Set consent defaults BEFORE init (for GDPR compliance)\ngtm.setConsentDefaults(eeaDefault);\n" : ""}
+// Initialize GTM
+gtm.init();
+
+// Track events
+export function trackEvent(event${ctx.ext === "ts" ? ": string" : ""}, data${ctx.ext === "ts" ? "?: Record<string, unknown>" : ""} = {}) {
+  gtm.push({
+    event,
+    ...data
+  });
+}
+
+// Track page views
+export function trackPageView(path${ctx.ext === "ts" ? "?: string" : ""}) {
+  gtm.push({
+    event: 'page_view',
+    page_path: path || window.location.pathname + window.location.search,
+    page_title: document.title
+  });
+}
+
+// Update consent (call this when user accepts/rejects)
+export function updateConsent(analytics${ctx.ext === "ts" ? ": boolean" : ""}, marketing${ctx.ext === "ts" ? ": boolean" : ""}) {
+  gtm.updateConsent({
+    analytics_storage: analytics ? 'granted' : 'denied',
+    ad_storage: marketing ? 'granted' : 'denied',
+    ad_user_data: marketing ? 'granted' : 'denied',
+    ad_personalization: marketing ? 'granted' : 'denied'
+  });
+}
+
+// Example usage
+trackPageView();
+
+// Export client for advanced usage
+export { gtm };
+`;
+  const htmlCode = `<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GTM Kit - Vanilla JS</title>
+</head>
+<body>
+  <!-- GTM noscript fallback (optional but recommended) -->
+  <noscript>
+    <iframe
+      src="https://www.googletagmanager.com/ns.html?id=${Array.isArray(containerValue) ? "YOUR-GTM-ID" : containerValue.replace(/'/g, "")}"
+      height="0"
+      width="0"
+      style="display:none;visibility:hidden"
+    ></iframe>
+  </noscript>
+
+  <main>
+    <h1>Hello GTM Kit!</h1>
+    <button id="signup-btn">Sign Up</button>
+    <button id="consent-btn">Accept Cookies</button>
+  </main>
+
+  <script type="module">
+    import { trackEvent, updateConsent } from './gtm-setup.${ext}';
+
+    // Track button click
+    document.getElementById('signup-btn').addEventListener('click', () => {
+      trackEvent('button_click', { button_name: 'signup_cta' });
+    });
+
+    // Handle consent
+    document.getElementById('consent-btn').addEventListener('click', () => {
+      updateConsent(true, true);
+    });
+  </script>
+</body>
+</html>
+`;
+  const umdCode = `<!-- Alternative: UMD/Script Tag Setup -->
+<!-- Add this in your HTML head -->
+<script src="https://unpkg.com/@jwiedeman/gtm-kit/dist/index.umd.js"></script>
+<script>
+  // GTM Kit is available as window.GtmKit
+  var gtm = GtmKit.createGtmClient({
+    containers: ${containerValue}${dataLayerOption ? dataLayerOption.replace(/\n/g, " ") : ""}
+  });
+${includeConsent ? "\n  // Set consent defaults\n  gtm.setConsentDefaults(GtmKit.eeaDefault);\n" : ""}
+  // Initialize
+  gtm.init();
+
+  // Track page view
+  gtm.push({
+    event: 'page_view',
+    page_path: window.location.pathname
+  });
+
+  // Make gtm available globally for other scripts
+  window.gtm = gtm;
+</script>
+`;
+  return [
+    {
+      filename: `gtm-setup.${ext}`,
+      content: esmCode,
+      description: "ESM setup with helper functions"
+    },
+    {
+      filename: "index.html",
+      content: htmlCode,
+      description: "Example HTML with tracking"
+    },
+    {
+      filename: "umd-setup.html",
+      content: umdCode,
+      description: "Alternative UMD/script tag setup"
+    }
+  ];
+};
+var formatGeneratedCode = (files) => {
+  return files.map((file) => {
+    const separator = "\u2500".repeat(60);
+    return `${separator}
+\u{1F4C4} ${file.filename}
+${file.description}
+${separator}
+${file.content}`;
+  }).join("\n\n");
+};
+
+// src/cli.ts
+var colors = {
+  reset: "\x1B[0m",
+  bold: "\x1B[1m",
+  dim: "\x1B[2m",
+  red: "\x1B[31m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  blue: "\x1B[34m",
+  magenta: "\x1B[35m",
+  cyan: "\x1B[36m"
+};
+var c = (color, text) => `${colors[color]}${text}${colors.reset}`;
+var print = {
+  header: (text) => console.log(`
+${c("bold", c("cyan", text))}
+`),
+  success: (text) => console.log(`${c("green", "\u2713")} ${text}`),
+  error: (text) => console.log(`${c("red", "\u2717")} ${text}`),
+  warning: (text) => console.log(`${c("yellow", "\u26A0")} ${text}`),
+  info: (text) => console.log(`${c("blue", "\u2139")} ${text}`),
+  step: (n, text) => console.log(`
+${c("bold", `Step ${n}:`)} ${text}`),
+  code: (text) => console.log(`  ${c("dim", "$")} ${c("cyan", text)}`),
+  box: (lines) => {
+    const maxLen = Math.max(...lines.map((l) => l.length));
+    const border = "\u2500".repeat(maxLen + 2);
+    console.log(`\u250C${border}\u2510`);
+    lines.forEach((line) => console.log(`\u2502 ${line.padEnd(maxLen)} \u2502`));
+    console.log(`\u2514${border}\u2518`);
+  }
+};
+var prompt = (question) => {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+};
+var confirm = async (question, defaultYes = true) => {
+  const suffix = defaultYes ? "[Y/n]" : "[y/N]";
+  const answer = await prompt(`${question} ${suffix} `);
+  if (!answer)
+    return defaultYes;
+  return answer.toLowerCase().startsWith("y");
+};
+var showBanner = () => {
+  console.log(`
+${c("cyan", "\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557")}
+${c("cyan", "\u2551")}  ${c("bold", "GTM Kit")} - Easy Google Tag Manager Setup  ${c("cyan", "\u2551")}
+${c("cyan", "\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D")}
+`);
+};
+var showHelp = () => {
+  showBanner();
+  console.log(`${c("bold", "Usage:")}
+  npx @jwiedeman/gtm-kit-cli <command> [options]
+
+${c("bold", "Commands:")}
+  ${c("cyan", "init")} [GTM-ID]     Interactive setup (or quick setup with ID)
+  ${c("cyan", "detect")}            Detect framework and show install command
+  ${c("cyan", "validate")} <ID>     Validate a GTM container ID
+  ${c("cyan", "generate")} <ID>     Generate setup code for your framework
+  ${c("cyan", "help")}              Show this help message
+
+${c("bold", "Examples:")}
+  ${c("dim", "$")} npx @jwiedeman/gtm-kit-cli init
+  ${c("dim", "$")} npx @jwiedeman/gtm-kit-cli init GTM-ABC1234
+  ${c("dim", "$")} npx @jwiedeman/gtm-kit-cli detect
+  ${c("dim", "$")} npx @jwiedeman/gtm-kit-cli validate GTM-ABC1234
+
+${c("bold", "Options:")}
+  --typescript, -ts    Generate TypeScript code (default)
+  --javascript, -js    Generate JavaScript code
+  --consent            Include consent mode setup
+  --dry-run            Show what would be done without doing it
+
+${c("bold", "More info:")} https://github.com/react-gtm-kit/react-gtm-kit
+`);
+};
+var runDetect = (dir = process.cwd()) => {
+  showBanner();
+  print.header("Framework Detection");
+  const info = detectFramework(dir);
+  console.log(getDetectionSummary(info));
+  console.log("\n" + c("bold", "Install command:"));
+  print.code(getInstallCommand(info.packageManager, info.packages));
+  return info;
+};
+var runValidate = (id) => {
+  var _a;
+  showBanner();
+  print.header("GTM ID Validation");
+  const result = validateGtmId(id);
+  console.log(`ID: ${c("cyan", id)}`);
+  if (result.valid) {
+    print.success("Valid GTM container ID");
+    if (result.warning) {
+      print.warning(result.warning);
+    }
+  } else {
+    print.error((_a = result.error) != null ? _a : "Invalid");
+    if (result.suggestion) {
+      print.info(`Suggestion: ${result.suggestion}`);
+    }
+  }
+  return result;
+};
+var runGenerate = (containerId, options = {}) => {
+  var _a, _b, _c;
+  showBanner();
+  print.header("Generating Setup Code");
+  const info = detectFramework();
+  const validation = validateGtmId(containerId);
+  if (!validation.valid) {
+    print.error((_a = validation.error) != null ? _a : "Invalid GTM ID");
+    if (validation.suggestion) {
+      print.info(`Suggestion: ${validation.suggestion}`);
+    }
+    return null;
+  }
+  print.success(`Framework: ${info.displayName}`);
+  print.success(`Container: ${containerId}`);
+  const files = generateSetupCode({
+    framework: info.framework,
+    containers: containerId,
+    typescript: (_b = options.typescript) != null ? _b : true,
+    includeConsent: (_c = options.consent) != null ? _c : false
+  });
+  console.log("\n" + formatGeneratedCode(files));
+  return files;
+};
+var runInit = async (quickId, options = {}) => {
+  var _a, _b, _c;
+  showBanner();
+  print.header("GTM Kit Setup");
+  const info = detectFramework();
+  print.step(1, "Detecting your project...");
+  console.log(`
+  Framework: ${c("green", info.displayName)}`);
+  console.log(`  Package Manager: ${c("green", info.packageManager)}`);
+  console.log(`  Confidence: ${info.confidence}%`);
+  print.step(2, "GTM Container ID");
+  let containerId = quickId != null ? quickId : "";
+  if (!containerId) {
+    containerId = await prompt(`
+  Enter your GTM container ID (e.g., GTM-ABC1234): `);
+  }
+  if (!containerId) {
+    print.error("GTM container ID is required");
+    console.log(`
+  ${c("dim", "Tip: Get your GTM ID from https://tagmanager.google.com")}
+`);
+    process.exit(1);
+  }
+  const validation = validateGtmId(containerId);
+  if (!validation.valid) {
+    print.error((_a = validation.error) != null ? _a : "Invalid GTM ID");
+    if (validation.suggestion) {
+      print.info(validation.suggestion);
+    }
+    process.exit(1);
+  }
+  print.success(`Valid container ID: ${containerId}`);
+  print.step(3, "Configuration");
+  const useConsent = (_b = options.consent) != null ? _b : await confirm("\n  Include Consent Mode v2 setup (GDPR)?", true);
+  const useTypescript = (_c = options.typescript) != null ? _c : await confirm("  Use TypeScript?", true);
+  print.step(4, "Installing packages...");
+  const installCmd = getInstallCommand(info.packageManager, info.packages);
+  console.log(`
+  Command: ${c("cyan", installCmd)}`);
+  if (options.dryRun) {
+    print.warning("Dry run - skipping installation");
+  } else {
+    const shouldInstall = await confirm("\n  Run installation now?", true);
+    if (shouldInstall) {
+      const { execSync } = await import("child_process");
+      try {
+        console.log("");
+        execSync(installCmd, { stdio: "inherit" });
+        print.success("Packages installed successfully");
+      } catch (error) {
+        print.error("Installation failed");
+        console.log(`
+  ${c("dim", "Try running manually:")} ${c("cyan", installCmd)}
+`);
+      }
+    } else {
+      print.info("Skipped installation. Run manually:");
+      print.code(installCmd);
+    }
+  }
+  print.step(5, "Generating setup code...");
+  const files = generateSetupCode({
+    framework: info.framework,
+    containers: containerId,
+    typescript: useTypescript,
+    includeConsent: useConsent
+  });
+  console.log("\n" + formatGeneratedCode(files));
+  print.step(6, "Creating files...");
+  if (options.dryRun) {
+    print.warning("Dry run - skipping file creation");
+    files.forEach((file) => {
+      console.log(`  Would create: ${c("cyan", file.filename)}`);
+    });
+  } else {
+    const shouldWrite = await confirm("\n  Create these files in your project?", false);
+    if (shouldWrite) {
+      for (const file of files) {
+        const filePath = path2.join(process.cwd(), file.filename);
+        const dir = path2.dirname(filePath);
+        if (!fs2.existsSync(dir)) {
+          fs2.mkdirSync(dir, { recursive: true });
+        }
+        if (fs2.existsSync(filePath)) {
+          const overwrite = await confirm(`  ${file.filename} exists. Overwrite?`, false);
+          if (!overwrite) {
+            print.info(`Skipped: ${file.filename}`);
+            continue;
+          }
+        }
+        fs2.writeFileSync(filePath, file.content);
+        print.success(`Created: ${file.filename}`);
+      }
+    } else {
+      print.info("Files not created. Copy the code above manually.");
+    }
+  }
+  print.header("Setup Complete!");
+  print.box([
+    `GTM Kit is ready to use with ${info.displayName}!`,
+    "",
+    `Container: ${containerId}`,
+    useConsent ? "Consent Mode: Enabled" : "Consent Mode: Disabled",
+    "",
+    "Next steps:",
+    "1. Review the generated code",
+    "2. Add your routes/pages",
+    "3. Test with GTM Preview mode",
+    "",
+    "Docs: https://github.com/react-gtm-kit/react-gtm-kit"
+  ]);
+  return { info, containerId, files };
+};
+var parseArgs = (args) => {
+  var _a;
+  const command = (_a = args[0]) != null ? _a : "help";
+  const positional = [];
+  const flags = {};
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i];
+    if (arg.startsWith("--")) {
+      flags[arg.slice(2)] = true;
+    } else if (arg.startsWith("-")) {
+      flags[arg.slice(1)] = true;
+    } else {
+      positional.push(arg);
+    }
+  }
+  return { command, positional, flags };
+};
+var run = async (args = process.argv.slice(2)) => {
+  var _a, _b;
+  const { command, positional, flags } = parseArgs(args);
+  const options = {
+    typescript: flags.typescript || flags.ts ? true : flags.javascript || flags.js ? false : void 0,
+    consent: (_a = flags.consent) != null ? _a : void 0,
+    dryRun: (_b = flags["dry-run"]) != null ? _b : false
+  };
+  try {
+    switch (command) {
+      case "init":
+        await runInit(positional[0], options);
+        break;
+      case "detect":
+        runDetect(positional[0]);
+        break;
+      case "validate":
+        if (!positional[0]) {
+          print.error("Please provide a GTM container ID to validate");
+          console.log(`
+  ${c("dim", "Usage:")} npx @jwiedeman/gtm-kit-cli validate GTM-ABC1234
+`);
+          process.exit(1);
+        }
+        runValidate(positional[0]);
+        break;
+      case "generate":
+      case "gen":
+        if (!positional[0]) {
+          print.error("Please provide a GTM container ID");
+          console.log(`
+  ${c("dim", "Usage:")} npx @jwiedeman/gtm-kit-cli generate GTM-ABC1234
+`);
+          process.exit(1);
+        }
+        runGenerate(positional[0], options);
+        break;
+      case "help":
+      case "-h":
+      case "--help":
+      default:
+        showHelp();
+        break;
+    }
+  } catch (error) {
+    if (error instanceof Error) {
+      print.error(error.message);
+    } else {
+      print.error("An unexpected error occurred");
+    }
+    process.exit(1);
+  }
+};
+if (typeof __require !== "undefined" && __require.main === module) {
+  run();
+}
+export {
+  run
+};