feat: complete Phase J — AI-native, engine hooks, framework integrations

AdoptionEngine (J1): BehaviorTracker, TimingOptimizer, FormatSelector,
AdoptionScorer with full test coverage (27 tests).

Engine React hooks (J1.6): useSmartFeature, useAdoptionScore,
useBehaviorProfile with graceful degradation without engine (15 tests).

SmartAnnouncement (J1.7): compound component with 6 format renderers
(badge, toast, banner, inline, modal→toast, spotlight→badge), render
prop support, auto-seen tracking (12 tests).

shadcn registry (J3): 5 components (NewBadge, ChangelogWidget, Tour,
Checklist, FeedbackWidget), build script, registry.json, docs pages.

MCP server (J4): 5 tools + 6 resources, @modelcontextprotocol/sdk.

AI setup CLI (J5): `featuredrop ai-setup` auto-detects Claude Code,
Cursor, VS Code and creates context files + MCP configs (11 tests).

Framework integrations (J6): featuredrop/next (RSC + FeatureDropScript),
featuredrop/remix (loader helpers + headers), featuredrop/astro (SSG +
manifest script), featuredrop/nuxt (event handler + head script) with
14 tests. All 4 subpaths build as ESM + CJS + DTS.

Tailwind plugin (J7): CSS vars, keyframes, utilities, dark mode.

Next.js + shadcn example app, upgraded vanilla example, docs site
shadcn pages with live demos.

Co-Authored-By: Glinr <bot@glincker.com>

Author: thegdsks

.gitignore

@@ -3,6 +3,8 @@ node_modules/
 
 # Build output
 dist/
+.next/
+apps/docs/public/r/
 
 # Coverage
 coverage/

README.md

@@ -269,6 +269,28 @@ function MyChangelog() {
 
 > **When to use hooks vs components:** If your project uses shadcn/ui, Radix, or any custom design system, use hooks from `featuredrop/react/hooks`. If you want out-of-the-box UI, use components from `featuredrop/react`.
 
+### shadcn/ui Components
+
+Pre-built components that use shadcn primitives for UI + FeatureDrop hooks for logic. Install via the shadcn CLI:
+
+```bash
+npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json
+```
+
+| Component | Install |
+|-----------|---------|
+| New Badge | `npx shadcn@latest add https://featuredrop.dev/r/new-badge.json` |
+| Changelog Widget | `npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json` |
+| Tour | `npx shadcn@latest add https://featuredrop.dev/r/tour.json` |
+| Checklist | `npx shadcn@latest add https://featuredrop.dev/r/checklist.json` |
+| Feedback Widget | `npx shadcn@latest add https://featuredrop.dev/r/feedback-widget.json` |
+
+Components land in `components/featuredrop/` — you own the code. [Full docs →](https://featuredrop.dev/docs/shadcn)
+
+**Try it now:**
+- [Next.js + shadcn example](https://stackblitz.com/github/GLINCKER/featuredrop/tree/main/examples/nextjs-shadcn) — Open in StackBlitz
+- [Vanilla JS example](examples/vanilla/index.html) — Zero build step, CDN import
+
 ---
 
 ## AI-Native
@@ -417,7 +439,7 @@ npx featuredrop migrate --from beamer --input beamer-export.json --out features.
 
 | | Beamer | Pendo | **FeatureDrop** |
 |---|---|---|---|
-| Price | $59–399/mo | $7k+/yr | **Free forever** |
+| Price | $59–399/mo | $7k+/yr | **Free (MIT)** |
 | Bundle impact | External script | ~300 kB agent | **< 3 kB core** |
 | Vendor lock-in | Yes | Yes | **No** |
 | Data ownership | Vendor-hosted | Vendor-hosted | **Your repo** |

apps/docs/components/code-demo-card.tsx

@@ -110,18 +110,27 @@ export function CodeDemoCard({ title, description, code, children }: CodeDemoCar
               {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
             </button>
           </div>
-          <div className="flex-1 overflow-auto text-[13px] nice-scrollbar">
-            <SyntaxHighlighter 
-              language="tsx" 
+          <div className="flex-1 overflow-auto text-[13px] nice-scrollbar" data-code-demo="">
+            <SyntaxHighlighter
+              language="tsx"
               style={vscDarkPlus}
-               customStyle={{
+              wrapLines={false}
+              wrapLongLines={false}
+              customStyle={{
                 margin: 0,
                 padding: '1.5rem',
                 backgroundColor: 'transparent',
                 fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
               }}
               codeTagProps={{
-                style: { fontFamily: 'inherit', lineHeight: '1.5' }
+                style: {
+                  fontFamily: 'inherit',
+                  lineHeight: '1.6',
+                  whiteSpace: 'pre',
+                  wordBreak: 'normal',
+                  overflowWrap: 'normal',
+                  display: 'block',
+                }
               }}
             >
               {code.trim()}

apps/docs/components/shadcn-demos/changelog-widget-demo.tsx

@@ -0,0 +1,102 @@
+import { useMemo, useState } from 'react'
+import { MemoryAdapter } from 'featuredrop'
+import { FeatureDropProvider } from 'featuredrop/react'
+import { useChangelog } from 'featuredrop/react'
+import { CodeDemoCard } from '../code-demo-card'
+import { demoManifest } from '../demos/demo-manifest'
+
+const FeatureDropProviderView = FeatureDropProvider as any
+
+const demoCode = `import { ChangelogWidget } from "@/components/featuredrop/changelog-widget"
+
+export function Header() {
+  return (
+    <header className="flex items-center justify-between p-4">
+      <h1>My App</h1>
+      <ChangelogWidget title="Release Notes" side="right" />
+    </header>
+  )
+}`
+
+function ChangelogPanel() {
+  const { features, newCount, isNew, dismiss, markAllSeen } = useChangelog()
+  const [open, setOpen] = useState(false)
+
+  const handleClose = () => {
+    setOpen(false)
+    markAllSeen()
+  }
+
+  return (
+    <div className="w-full max-w-sm">
+      <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-3 dark:border-slate-700 dark:bg-[#070b14]">
+        <span className="text-sm font-medium text-slate-900 dark:text-slate-100">My App</span>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="relative inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-900 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
+        >
+          What&apos;s New
+          {newCount > 0 && (
+            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1.5 text-[10px] font-bold text-white">
+              {newCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {open && (
+        <div className="mt-2 rounded-lg border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-[#070b14]">
+          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-slate-700">
+            <p className="text-sm font-semibold text-slate-900 dark:text-slate-100">Release Notes</p>
+            <button type="button" onClick={handleClose} className="text-xs text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">
+              Close
+            </button>
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {features.map((f, i) => (
+              <div key={f.id}>
+                <button
+                  type="button"
+                  className="w-full px-4 py-3 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50"
+                  onClick={() => dismiss(f.id)}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div>
+                      <p className="text-sm font-medium text-slate-900 dark:text-slate-100">{f.label}</p>
+                      {f.description && (
+                        <p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">{f.description}</p>
+                      )}
+                    </div>
+                    {isNew(f.sidebarKey ?? f.id) && (
+                      <span className="shrink-0 rounded-full bg-slate-900 px-2 py-0.5 text-[10px] font-medium text-white dark:bg-slate-100 dark:text-slate-900">
+                        New
+                      </span>
+                    )}
+                  </div>
+                </button>
+                {i < features.length - 1 && <hr className="border-slate-100 dark:border-slate-800" />}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ChangelogWidgetShadcnDemo() {
+  const storage = useMemo(() => new MemoryAdapter(), [])
+
+  return (
+    <CodeDemoCard
+      title="Changelog Widget (shadcn/ui)"
+      description="Slide-out changelog panel with unread count. Uses useChangelog() hook."
+      code={demoCode}
+    >
+      <FeatureDropProviderView manifest={demoManifest} storage={storage}>
+        <ChangelogPanel />
+      </FeatureDropProviderView>
+    </CodeDemoCard>
+  )
+}

apps/docs/components/shadcn-demos/checklist-demo.tsx

@@ -0,0 +1,113 @@
+import { Checklist, type ChecklistTask } from 'featuredrop/react'
+import { useChecklist } from 'featuredrop/react'
+import { CodeDemoCard } from '../code-demo-card'
+
+const ChecklistView = Checklist as any
+
+const demoCode = `import { Checklist as ChecklistComponent } from "featuredrop/react"
+import { Checklist } from "@/components/featuredrop/checklist"
+
+const tasks = [
+  { id: "profile", title: "Complete your profile", description: "Add a photo and bio." },
+  { id: "invite", title: "Invite a teammate" },
+  { id: "first-project", title: "Create your first project" },
+]
+
+export function Onboarding() {
+  return (
+    <>
+      <ChecklistComponent id="onboarding" tasks={tasks} position="inline" />
+      <Checklist checklistId="onboarding" tasks={tasks} title="Getting Started" />
+    </>
+  )
+}`
+
+const tasks: ChecklistTask[] = [
+  { id: 'connect-provider', title: 'Connect provider', description: 'Wrap app shell with FeatureDropProvider.' },
+  { id: 'add-widget', title: 'Add changelog widget', description: 'Surface release notes in your nav.' },
+  { id: 'enable-ci', title: 'Enable CI checks', description: 'Validate before merge.' }
+]
+
+function ChecklistPreview() {
+  const { completeTask, resetChecklist, dismissChecklist, progress, tasks: taskStates, dismissed } = useChecklist('shadcn-checklist-demo')
+
+  if (dismissed) {
+    return (
+      <div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 text-center dark:border-slate-700 dark:bg-[#070b14]">
+        <p className="text-sm text-slate-500 dark:text-slate-400">Checklist dismissed.</p>
+        <button type="button" onClick={resetChecklist} className="mt-2 text-xs text-slate-900 underline dark:text-slate-100">
+          Reset
+        </button>
+      </div>
+    )
+  }
+
+  const getState = (taskId: string) => taskStates.find((t) => t.id === taskId)
+
+  return (
+    <div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-[#070b14]">
+      <div className="border-b border-slate-100 p-4 dark:border-slate-800">
+        <p className="text-sm font-semibold text-slate-900 dark:text-slate-100">Getting Started</p>
+        <div className="mt-2 h-2 w-full rounded-full bg-slate-100 dark:bg-slate-800">
+          <div
+            className="h-2 rounded-full bg-slate-900 transition-all dark:bg-slate-100"
+            style={{ width: `${progress.percent}%` }}
+          />
+        </div>
+        <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+          {progress.completed} of {progress.total} complete
+        </p>
+      </div>
+      <div className="space-y-1 p-2">
+        {tasks.map((task) => {
+          const state = getState(task.id)
+          const completed = state?.completed ?? false
+          return (
+            <label
+              key={task.id}
+              className={`flex cursor-pointer items-start gap-3 rounded-md p-3 transition-colors ${completed ? 'opacity-60' : 'hover:bg-slate-50 dark:hover:bg-slate-800/50'}`}
+            >
+              <input
+                type="checkbox"
+                checked={completed}
+                onChange={() => { if (!completed) completeTask(task.id) }}
+                disabled={completed}
+                className="mt-0.5 h-4 w-4 rounded border-slate-300 dark:border-slate-600"
+              />
+              <div>
+                <p className={`text-sm font-medium text-slate-900 dark:text-slate-100 ${completed ? 'line-through' : ''}`}>
+                  {task.title}
+                </p>
+                {task.description && (
+                  <p className="text-xs text-slate-500 dark:text-slate-400">{task.description}</p>
+                )}
+              </div>
+            </label>
+          )
+        })}
+      </div>
+      <div className="flex justify-between border-t border-slate-100 px-4 py-3 dark:border-slate-800">
+        <button type="button" onClick={resetChecklist} className="text-xs text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">
+          Reset
+        </button>
+        <button type="button" onClick={dismissChecklist} className="text-xs text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">
+          Dismiss
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export function ChecklistShadcnDemo() {
+  return (
+    <CodeDemoCard
+      title="Checklist (shadcn/ui)"
+      description="Onboarding checklist with progress tracking. Uses useChecklist() hook."
+      code={demoCode}
+    >
+      <ChecklistView id="shadcn-checklist-demo" tasks={tasks} position="inline">
+        {() => <ChecklistPreview />}
+      </ChecklistView>
+    </CodeDemoCard>
+  )
+}