@m13v/seo-components 0.22.1 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.22.1",
+  "version": "0.24.0",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "bump:consumers": "bash scripts/bump-consumers.sh",

package/src/_build.css

@@ -1,6 +1,10 @@
 /* Build input for the prebuilt styles.css shipped in the npm package. */
 /* This file is consumed by `tailwindcss -i src/_build.css -o dist/styles.css`. */
-/* Do NOT import this file from a consumer app; use `@m13v/seo-components/server`'s SeoComponentsStyles. */
+/* Consumer apps should NOT import this source file. If you need the prebuilt
+   bundle, import the compiled artifact: `import "@m13v/seo-components/styles.css"`.
+   In most cases the right approach is to let your own Tailwind scan the
+   library via `@source "../../node_modules/@seo/components/src";` in
+   globals.css, which is how every current consumer does it. */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/components/ClaudeMeterCta.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { trackGetStartedClick } from "../lib/track";
+import { trackCrossProductClick } from "../lib/track";
 
 export interface ClaudeMeterCtaProps {
   /** Placement tag, kept in analytics payload. */
@@ -30,9 +30,10 @@ export function ClaudeMeterCta({
   const sectionLabel = section ?? `claude-meter-cta-${placement}`;
 
   const handleClick = () => {
-    trackGetStartedClick({
+    trackCrossProductClick({
       destination: href,
       site,
+      targetProduct: "claude-meter",
       section: sectionLabel,
       text: "Install Claude Meter",
       component: "ClaudeMeterCta",

package/src/index.ts

@@ -64,12 +64,14 @@ export {
   trackScheduleClick,
   trackGetStartedClick,
   trackDownloadClick,
+  trackCrossProductClick,
   withBookingAttribution,
 } from "./lib/track";
 export type {
   ScheduleClickProps,
   GetStartedClickProps,
   DownloadClickProps,
+  CrossProductClickProps,
 } from "./lib/track";
 
 // Analytics context: provider + hooks so library components fire PostHog

package/src/lib/track.ts

@@ -145,3 +145,45 @@ export type DownloadClickProps = GetStartedClickProps;
 export function trackDownloadClick(props: GetStartedClickProps): void {
   trackGetStartedClick(props);
 }
+
+export interface CrossProductClickProps {
+  /** Absolute URL the click sends the user to (e.g. https://claude-meter.com/install). */
+  destination: string;
+  /** Slug of the ORIGIN site the click happened on (e.g. "fazm"). */
+  site?: string;
+  /** Slug of the DESTINATION product being promoted (e.g. "claude-meter"). */
+  targetProduct?: string;
+  /** Section of the page the CTA lives in (e.g. "blog-post-top", "blog-post-bottom"). */
+  section?: string;
+  /** Visible button/link text. */
+  text?: string;
+  /** Name of the rendering component (e.g. "ClaudeMeterCta"). */
+  component?: string;
+  /** Free-form extra properties — merged last, cannot override reserved keys above. */
+  extra?: Record<string, unknown>;
+}
+
+/**
+ * Fire the canonical `cross_product_click` PostHog event. Use for every CTA
+ * that promotes a SIBLING product on a different site (e.g. a Claude Meter
+ * CTA on fazm.ai blog posts). These clicks are tracked separately from the
+ * primary `get_started_click` event so the dashboard can distinguish
+ * own-product conversions from cross-promotion.
+ *
+ * The dashboard at social-autoposter/scripts/project_stats_json.py counts
+ * this event per `$host` to produce the "Cross Product" column in the
+ * Project Funnel Stats table.
+ */
+export function trackCrossProductClick(props: CrossProductClickProps): void {
+  const { destination, site, targetProduct, section, text, component, extra } = props;
+  captureFromWindow("cross_product_click", {
+    ...(extra || {}),
+    destination,
+    site,
+    target_product: targetProduct,
+    section,
+    text,
+    component,
+    page: typeof window !== "undefined" ? window.location.pathname : undefined,
+  });
+}

package/src/server.ts

@@ -37,7 +37,10 @@ export { getSupabaseAdmin } from "./lib/supabase-admin";
 export { createNewsletterHandler } from "./lib/newsletter-route";
 export type { NewsletterConfig } from "./lib/newsletter-route";
 
-// Style injector — server-only component that inlines the prebuilt Tailwind
-// CSS for the sidebar/chat/heading components as a <style> tag.
-// Use in your root layout <head> to avoid consumer-side PostCSS conflicts.
-export { SeoComponentsStyles } from "./components/SeoComponentsStyles";
+// SeoComponentsStyles was removed in v0.23.0. It injected a prebuilt Tailwind
+// bundle wrapped in `@layer seo-components`, which collided with the
+// consumer's own `@layer utilities` and forced GuideChatPanel / SitemapSidebar
+// to `display: none`. Consumers should rely on their own Tailwind scanning
+// the library via `@source "../../node_modules/@seo/components/src";` in
+// globals.css instead. The prebuilt CSS file is still shipped for anyone
+// who wants to `import "@m13v/seo-components/styles.css"` directly.

package/src/components/SeoComponentsStyles.tsx

@@ -1,19 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const here = path.dirname(fileURLToPath(import.meta.url));
-const cssPath = path.join(here, "..", "..", "dist", "styles.css");
-
-let cachedCss: string | null = null;
-function loadCss(): string {
-  if (cachedCss !== null) return cachedCss;
-  const raw = fs.readFileSync(cssPath, "utf8");
-  cachedCss = `@layer seo-components { ${raw} }`;
-  return cachedCss;
-}
-
-export function SeoComponentsStyles() {
-  const css = loadCss();
-  return <style dangerouslySetInnerHTML={{ __html: css }} />;
-}