@m13v/seo-components 0.16.1 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "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/FullSiteAnalytics.tsx

@@ -75,41 +75,44 @@ export function FullSiteAnalytics({
       return;
     }
     let cancelled = false;
-    // Defer init to idle to keep it off the critical path.
-    const ric: (
-      cb: IdleRequestCallback,
-      opts?: IdleRequestOptions,
-    ) => number =
-      typeof window !== "undefined" && window.requestIdleCallback
-        ? window.requestIdleCallback.bind(window)
-        : (cb) => setTimeout(cb as unknown as () => void, 1) as unknown as number;
-    const cic: (id: number) => void =
-      typeof window !== "undefined" && window.cancelIdleCallback
-        ? window.cancelIdleCallback.bind(window)
-        : (id) => clearTimeout(id);
-    const id = ric(
-      () => {
-        import("posthog-js").then((mod) => {
-          if (cancelled) return;
-          const lib = mod.default;
-          lib.init(posthogKey, {
-            api_host: posthogHost,
-            person_profiles: personProfiles,
-            capture_pageview: capturePageview,
-            capture_pageleave: capturePageleave,
-          });
-          // Legacy: some helpers still read window.posthog. Setting this
-          // is what 3 of 4 consumer sites forgot, which silently broke
-          // newsletter_subscribed and schedule_click events.
-          (window as unknown as { posthog: typeof lib }).posthog = lib;
-          setPosthog(lib as unknown as PostHogLike);
+    let idleId: number | undefined;
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    const run = () => {
+      import("posthog-js").then((mod) => {
+        if (cancelled) return;
+        const lib = mod.default;
+        lib.init(posthogKey, {
+          api_host: posthogHost,
+          person_profiles: personProfiles,
+          capture_pageview: capturePageview,
+          capture_pageleave: capturePageleave,
         });
-      },
-      { timeout: 3000 },
-    );
+        // Legacy: some helpers still read window.posthog. Setting this
+        // is what 3 of 4 consumer sites forgot, which silently broke
+        // newsletter_subscribed and schedule_click events.
+        (window as unknown as { posthog: typeof lib }).posthog = lib;
+        setPosthog(lib as unknown as PostHogLike);
+      });
+    };
+
+    // Defer init to idle to keep it off the critical path.
+    if (typeof window !== "undefined" && window.requestIdleCallback) {
+      idleId = window.requestIdleCallback(run, { timeout: 3000 });
+    } else {
+      timeoutId = setTimeout(run, 1);
+    }
+
     return () => {
       cancelled = true;
-      cic(id);
+      if (
+        idleId !== undefined &&
+        typeof window !== "undefined" &&
+        window.cancelIdleCallback
+      ) {
+        window.cancelIdleCallback(idleId);
+      }
+      if (timeoutId !== undefined) clearTimeout(timeoutId);
     };
   }, [
     posthogKey,

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/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
         }