@m13v/seo-components 0.16.0 → 0.16.1

package/package.json

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

@@ -76,12 +76,17 @@ export function FullSiteAnalytics({
     }
     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 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) => {

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`. */