@m13v/seo-components 0.16.2 → 0.17.0

package/package.json

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

package/src/components/AnimatedBeam.tsx

@@ -15,7 +15,7 @@ interface AnimatedBeamProps {
   /** Right side nodes (destinations) */
   to: BeamNode[];
   title?: string;
-  /** Accent hex color for the hub fill and beam glow. Defaults to teal (#14b8a6). */
+  /** Accent hex color for the hub fill and beam glow. If omitted, reads the consumer's --seo-accent CSS variable (falling back to teal #14b8a6). */
   accentColor?: string;
   className?: string;
 }
@@ -31,9 +31,10 @@ export function AnimatedBeam({
   hub,
   to,
   title,
-  accentColor = "#14b8a6",
+  accentColor,
   className = "",
 }: AnimatedBeamProps) {
+  const fillColor = accentColor ?? "var(--seo-accent, #14b8a6)";
   const width = 720;
   const height = 380;
   const centerX = width / 2;
@@ -62,9 +63,9 @@ export function AnimatedBeam({
       >
         <defs>
           <linearGradient id="beam-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor={accentColor} stopOpacity="0" />
-            <stop offset="50%" stopColor={accentColor} stopOpacity="1" />
-            <stop offset="100%" stopColor={accentColor} stopOpacity="0" />
+            <stop offset="0%" style={{ stopColor: fillColor, stopOpacity: 0 }} />
+            <stop offset="50%" style={{ stopColor: fillColor, stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: fillColor, stopOpacity: 0 }} />
           </linearGradient>
           <filter id="glow">
             <feGaussianBlur stdDeviation="3" result="blur" />
@@ -185,7 +186,7 @@ export function AnimatedBeam({
             width="144"
             height="72"
             rx="36"
-            fill={accentColor}
+            style={{ fill: fillColor }}
             filter="url(#glow)"
           />
           <rect

package/src/components/IntegrationsGrid.tsx

@@ -81,7 +81,11 @@ export function IntegrationsGrid({
                 ) : (
                   <div
                     className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md text-sm font-semibold text-white"
-                    style={{ background: it.accent || "linear-gradient(135deg,#14b8a6,#22d3ee)" }}
+                    style={{
+                      background:
+                        it.accent ||
+                        "linear-gradient(135deg, var(--seo-accent, #14b8a6), var(--seo-accent-2, #22d3ee))",
+                    }}
                     aria-hidden="true"
                   >
                     {initial}

package/src/components/Particles.tsx

@@ -5,7 +5,9 @@ import React, { useEffect, useRef, useState } from "react";
 /**
  * Particles: renders an interactive canvas of floating particles that
  * subtly follow the mouse cursor. Great for ambient hero backgrounds.
- * Default color is teal (#14b8a6). Fully self-contained, canvas-based.
+ * If `color` is omitted, reads the consumer's `--seo-accent` CSS variable
+ * at mount (falling back to teal #14b8a6). Canvas paint cannot use CSS
+ * vars directly, so we resolve it once via getComputedStyle.
  *
  * @example
  * <Particles className="absolute inset-0" quantity={80} />
@@ -36,7 +38,9 @@ function useMousePosition(): MousePosition {
 }
 
 function hexToRgb(hex: string): number[] {
-  hex = hex.replace("#", "");
+  hex = hex.replace("#", "").trim();
+  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return [20, 184, 166]; // teal fallback
   const hexInt = parseInt(hex, 16);
   const red = (hexInt >> 16) & 255;
   const green = (hexInt >> 8) & 255;
@@ -44,6 +48,19 @@ function hexToRgb(hex: string): number[] {
   return [red, green, blue];
 }
 
+function resolveAccentFromDOM(): string {
+  if (typeof window === "undefined") return "#14b8a6";
+  try {
+    const v = getComputedStyle(document.documentElement)
+      .getPropertyValue("--seo-accent")
+      .trim();
+    if (v && v.startsWith("#")) return v;
+  } catch {
+    // ignore
+  }
+  return "#14b8a6";
+}
+
 interface ParticlesProps {
   className?: string;
   quantity?: number;

package/src/components/ShineBorder.tsx

@@ -24,14 +24,15 @@ import React from "react";
  * </ShineBorder>
  */
 
-type TColorProp = `#${string}` | `#${string}`[];
+type TColorProp = string | string[];
 
 interface ShineBorderProps {
   borderRadius?: number;
   borderWidth?: number;
   duration?: number;
-  /** Hex color(s) for the shine gradient. Pass your brand accent color. Defaults to teal.
-   *  CSS custom properties are not supported here (conic gradient border trick). */
+  /** Color(s) for the shine gradient. Accepts any CSS color or a CSS custom
+   *  property (e.g. `var(--seo-accent)`). Defaults to the consumer's
+   *  `--seo-accent` value, falling back to teal (#14b8a6). */
   color?: TColorProp;
   className?: string;
   children: React.ReactNode;
@@ -41,10 +42,11 @@ export function ShineBorder({
   borderRadius = 8,
   borderWidth = 1,
   duration = 14,
-  color = "#14b8a6",
+  color,
   className,
   children,
 }: ShineBorderProps) {
+  const resolvedColor = color ?? "var(--seo-accent, #14b8a6)";
   const outerBase =
     "relative grid min-h-[60px] w-fit min-w-[300px] place-items-center bg-white dark:bg-zinc-900 p-3 text-zinc-900 dark:text-zinc-100";
   const outerClass = className
@@ -71,7 +73,7 @@ export function ShineBorder({
             "--mask-linear-gradient":
               "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
             "--background-radial-gradient": `radial-gradient(transparent,transparent, ${
-              Array.isArray(color) ? color.join(",") : color
+              Array.isArray(resolvedColor) ? resolvedColor.join(",") : resolvedColor
             },transparent,transparent)`,
           } as React.CSSProperties
         }

package/src/lib/analytics-context.tsx

@@ -17,7 +17,7 @@
 //   3. Consumer sites wrap their tree in <SeoAnalyticsProvider posthog={ph}>
 //      (or use the all-in-one FullSiteAnalytics component).
 
-import { createContext, useCallback, useContext, useMemo, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, type ReactNode } from "react";
 
 export interface PostHogLike {
   capture: (event: string, properties?: Record<string, unknown>) => void;
@@ -38,6 +38,18 @@ export interface SeoAnalyticsProviderProps {
  */
 export function SeoAnalyticsProvider({ posthog, children }: SeoAnalyticsProviderProps) {
   const value = useMemo(() => posthog ?? null, [posthog]);
+
+  // Mirror the instance onto window.posthog so non-React helpers
+  // (trackScheduleClick, legacy inline scripts) resolve without each
+  // consumer site remembering to hand-wire this line after posthog.init().
+  useEffect(() => {
+    if (!value) return;
+    if (typeof window === "undefined") return;
+    const w = window as unknown as { posthog?: PostHogLike };
+    if (w.posthog === value) return;
+    w.posthog = value;
+  }, [value]);
+
   return (
     <SeoAnalyticsContext.Provider value={value}>
       {children}