From 1c8a0e51ee96436b736fd94d2a9ef675e36668b1 Mon Sep 17 00:00:00 2001
From: ZVN DEV <78920650+zvndev@users.noreply.github.com>
Date: Fri, 2 Oct 2026 01:26:34 -0400
Subject: [PATCH] feat(demo): Little Friend analytics on yable-demo.vercel.app

Production deployments of the React demo render the Little Friend tag
(journey mode, with session replay) in the root layout. Previews, local
dev and the e2e dev server render nothing, because the tag depends on
VERCEL_ENV being production.

- examples/react-demo/turbo.json declares VERCEL_ENV for the build task,
  so Turborepo keys its cache on it. Without it, a preview build and a
  production build of the same source share one cache entry, and either
  can replay the other's output.
- install.copy after the hero install command is copied, github.click
  and npm.click for links to GitHub and npm.
- data-lf click ids on the hero calls to action and the docs header.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 examples/react-demo/src/app/HomeClient.tsx    | 12 ++++++---
 examples/react-demo/src/app/docs/layout.tsx   |  2 ++
 examples/react-demo/src/app/layout.tsx        | 18 +++++++++++++
 examples/react-demo/src/app/little-friend.tsx | 26 +++++++++++++++++++
 examples/react-demo/src/lib/little-friend.ts  | 24 +++++++++++++++++
 examples/react-demo/turbo.json                |  9 +++++++
 6 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 examples/react-demo/src/app/little-friend.tsx
 create mode 100644 examples/react-demo/src/lib/little-friend.ts
 create mode 100644 examples/react-demo/turbo.json

diff --git a/examples/react-demo/src/app/HomeClient.tsx b/examples/react-demo/src/app/HomeClient.tsx
index 18147ff..ddc1fb3 100644
--- a/examples/react-demo/src/app/HomeClient.tsx
+++ b/examples/react-demo/src/app/HomeClient.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import Link from 'next/link'
+import { track } from '@/lib/little-friend'
 import {
   useTable,
   Table,
@@ -698,7 +699,9 @@ export default function HomeClient({ codeBlocks }: HomeClientProps) {
   const reducedMotion = useReducedMotion()
 
   const copyInstall = () => {
-    navigator.clipboard.writeText('npm i @zvndev/yable-react @zvndev/yable-themes')
+    navigator.clipboard
+      .writeText('npm i @zvndev/yable-react @zvndev/yable-themes')
+      .then(() => track('install.copy'))
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
   }
@@ -744,18 +747,19 @@ export default function HomeClient({ codeBlocks }: HomeClientProps) {
             </div>
 
             <div className={s.heroCtas}>
-              <Link href="/gallery" className={s.heroCtaPrimary}>
+              <Link href="/gallery" data-lf="cta.gallery" className={s.heroCtaPrimary}>
                 Explore the gallery<span aria-hidden="true">→</span>
               </Link>
-              <Link href="/docs/quickstart" className={s.heroCtaSecondary}>
+              <Link href="/docs/quickstart" data-lf="cta.docs" className={s.heroCtaSecondary}>
                 Read the docs<span aria-hidden="true">→</span>
               </Link>
-              <Link href="/drag-lab" className={s.heroCtaSecondary}>
+              <Link href="/drag-lab" data-lf="cta.drag_lab" className={s.heroCtaSecondary}>
                 <span className={s.heroCtaBadge}>New</span>
                 Try column drag<span aria-hidden="true">→</span>
               </Link>
               <a
                 href="https://github.com/ZVN-DEV/yable"
+                data-lf="cta.github"
                 target="_blank"
                 rel="noreferrer"
                 className={s.heroCtaSecondary}
diff --git a/examples/react-demo/src/app/docs/layout.tsx b/examples/react-demo/src/app/docs/layout.tsx
index 683128a..811fadb 100644
--- a/examples/react-demo/src/app/docs/layout.tsx
+++ b/examples/react-demo/src/app/docs/layout.tsx
@@ -35,6 +35,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
             </Link>
             <a
               href="https://github.com/ZVN-DEV/yable"
+              data-lf="docs.github"
               target="_blank"
               rel="noreferrer"
               className={s.topLink}
@@ -43,6 +44,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
             </a>
             <a
               href="https://www.npmjs.com/package/@zvndev/yable-react"
+              data-lf="docs.npm"
               target="_blank"
               rel="noreferrer"
               className={s.topLink}
diff --git a/examples/react-demo/src/app/layout.tsx b/examples/react-demo/src/app/layout.tsx
index 72e4410..2a467ca 100644
--- a/examples/react-demo/src/app/layout.tsx
+++ b/examples/react-demo/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 import { IBM_Plex_Mono, IBM_Plex_Sans } from 'next/font/google'
+import { LITTLE_FRIEND_ENABLED, LITTLE_FRIEND_SITE_KEY } from '@/lib/little-friend'
+import LittleFriendEvents from './little-friend'
 import './globals.css'
 import '@zvndev/yable-themes'
 import '@zvndev/yable-themes/default.css'
@@ -40,6 +42,21 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${body.variable} ${mono.variable}`} data-yable-theme="dark">
+      {LITTLE_FRIEND_ENABLED && (
+        <head>
+          <script
+            defer
+            src="https://cdn.littlefriend.io/lf.js"
+            data-site={LITTLE_FRIEND_SITE_KEY}
+            data-mode="journey"
+          />
+          <script
+            defer
+            src="https://cdn.littlefriend.io/lf-replay.js"
+            data-site={LITTLE_FRIEND_SITE_KEY}
+          />
+        </head>
+      )}
       <body
         style={{
           margin: 0,
@@ -51,6 +68,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           MozOsxFontSmoothing: 'grayscale',
         }}
       >
+        {LITTLE_FRIEND_ENABLED && <LittleFriendEvents />}
         {children}
       </body>
     </html>
diff --git a/examples/react-demo/src/app/little-friend.tsx b/examples/react-demo/src/app/little-friend.tsx
new file mode 100644
index 0000000..a5362b0
--- /dev/null
+++ b/examples/react-demo/src/app/little-friend.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect } from 'react'
+import { track } from '@/lib/little-friend'
+
+// Goals match event names, so GitHub and npm links send their own.
+function onClick(event: MouseEvent) {
+  if (event.button > 1 || !(event.target instanceof Element)) return
+  const link = event.target.closest('a[href]')
+  if (!(link instanceof HTMLAnchorElement)) return
+  const host = link.hostname.replace(/^www\./, '')
+  if (host === 'github.com') track('github.click')
+  else if (host === 'npmjs.com') track('npm.click')
+}
+
+export default function LittleFriendEvents() {
+  useEffect(() => {
+    document.addEventListener('click', onClick)
+    document.addEventListener('auxclick', onClick)
+    return () => {
+      document.removeEventListener('click', onClick)
+      document.removeEventListener('auxclick', onClick)
+    }
+  }, [])
+  return null
+}
diff --git a/examples/react-demo/src/lib/little-friend.ts b/examples/react-demo/src/lib/little-friend.ts
new file mode 100644
index 0000000..be940eb
--- /dev/null
+++ b/examples/react-demo/src/lib/little-friend.ts
@@ -0,0 +1,24 @@
+// Little Friend analytics (littlefriend.io). The site key is public: it only
+// names the project the tracker reports to. The tracker sets no cookies, reads
+// no form values or page text, and strips query strings.
+
+export const LITTLE_FRIEND_SITE_KEY = 'lf_pniimTFHtNePHKo5ysDuIpo5'
+
+// Production deployments only, so previews, local dev and e2e runs send nothing.
+// turbo.json in this package declares VERCEL_ENV so Turborepo passes it through.
+export const LITTLE_FRIEND_ENABLED = process.env.VERCEL_ENV === 'production'
+
+type LittleFriendProps = Record<string, string | number | boolean>
+
+declare global {
+  interface Window {
+    lf?: (command: string, ...args: unknown[]) => void
+  }
+}
+
+// A named event. Does nothing until the tracker has loaded, and nothing at
+// all outside production, where the tag is not rendered.
+export function track(name: string, props?: LittleFriendProps) {
+  if (typeof window === 'undefined') return
+  window.lf?.('track', name, props)
+}
diff --git a/examples/react-demo/turbo.json b/examples/react-demo/turbo.json
new file mode 100644
index 0000000..e94043b
--- /dev/null
+++ b/examples/react-demo/turbo.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "env": ["VERCEL_ENV"]
+    }
+  }
+}