@m13v/seo-components 0.16.0 → 0.16.2

package/package.json

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

package/src/components/FullSiteAnalytics.tsx

@@ -75,36 +75,44 @@ export function FullSiteAnalytics({
       return;
     }
     let cancelled = false;
-    // Defer init to idle to keep it off the critical path.
-    const ric =
-      (typeof window !== "undefined" && window.requestIdleCallback) ||
-      ((cb: () => void) => setTimeout(cb, 1));
-    const cic =
-      (typeof window !== "undefined" && window.cancelIdleCallback) ||
-      clearTimeout;
-    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/RemotionClip.tsx

@@ -9,11 +9,42 @@ import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } fr
 /* gradient background and a growing progress bar.                    */
 /* ------------------------------------------------------------------ */
 
+type RemotionAccent =
+  | "teal"
+  | "cyan"
+  | "orange"
+  | "amber"
+  | "rose"
+  | "pink"
+  | "red"
+  | "green"
+  | "emerald"
+  | "blue"
+  | "indigo"
+  | "violet"
+  | "purple";
+
+const ACCENT_HEX: Record<RemotionAccent, { from: string; to: string }> = {
+  teal: { from: "#14b8a6", to: "#0d9488" },
+  cyan: { from: "#06b6d4", to: "#0891b2" },
+  orange: { from: "#fb923c", to: "#ea580c" },
+  amber: { from: "#fbbf24", to: "#d97706" },
+  rose: { from: "#fb7185", to: "#e11d48" },
+  pink: { from: "#f472b6", to: "#db2777" },
+  red: { from: "#ef4444", to: "#b91c1c" },
+  green: { from: "#22c55e", to: "#15803d" },
+  emerald: { from: "#10b981", to: "#047857" },
+  blue: { from: "#3b82f6", to: "#1d4ed8" },
+  indigo: { from: "#6366f1", to: "#4338ca" },
+  violet: { from: "#8b5cf6", to: "#6d28d9" },
+  purple: { from: "#a855f7", to: "#7e22ce" },
+};
+
 interface ConceptRevealProps {
   title: string;
   subtitle?: string;
   captions: string[];
-  accent?: "teal" | "cyan";
+  accent?: RemotionAccent;
   /** Override hex color for the primary gradient stop. If set, takes precedence over `accent`. */
   accentHex?: string;
   /** Override hex color for the secondary (dark) gradient stop. If set, takes precedence over `accent`. */
@@ -48,8 +79,9 @@ export function ConceptReveal({
     extrapolateRight: "clamp",
   });
 
-  const bgA = accentHex ?? (accent === "teal" ? "#14b8a6" : "#06b6d4");
-  const bgB = accentHexDark ?? (accent === "teal" ? "#0d9488" : "#0891b2");
+  const palette = ACCENT_HEX[accent] ?? ACCENT_HEX.teal;
+  const bgA = accentHex ?? palette.from;
+  const bgB = accentHexDark ?? palette.to;
 
   return (
     <AbsoluteFill
@@ -171,7 +203,7 @@ interface RemotionClipProps {
   title: string;
   subtitle?: string;
   captions: string[];
-  accent?: "teal" | "cyan";
+  accent?: RemotionAccent;
   /** Override hex color for the primary gradient stop. If set, takes precedence over `accent`. */
   accentHex?: string;
   /** Override hex color for the secondary (dark) gradient stop. If set, takes precedence over `accent`. */