LAUNCH V2 OF EVILBUTTONS

.agents/skills/evil-button-docs/SKILL.md

@@ -16,7 +16,7 @@ Use this skill to add a new Evil Buttons component to the docs and shadcn regist
 2. Create or update `content/docs/<slug>.mdx`.
    - Use `scripts/generate-docs.mjs` to scaffold a page when starting from scratch.
    - Keep the install command as `<Cmd>@evilbuttons/<registry-name></Cmd>`.
-   - Include a live `<PreviewCard>` using the real component.
+   - Include a `<PreviewCard live>` using the real component (swapped for the dial-backed preview with prop controls when one exists in `components/landing/previews`).
 3. Add the preview component to `components/mdx-custom-components.tsx` if the MDX page references it.
 4. Add the item to `scripts/build-registry.mjs`.
    - Read the source file with `readFile`.
@@ -43,7 +43,7 @@ ComponentName is ...
 
 ## Preview
 
-<PreviewCard title="ComponentName" note="Interactive">
+<PreviewCard live title="ComponentName" note="Interactive">
   <ComponentName>Deploy Doom</ComponentName>
 </PreviewCard>
 

.agents/skills/evil-button-docs/scripts/generate-docs.mjs

@@ -121,7 +121,7 @@ ${title} is ${description.charAt(0).toLowerCase()}${description.slice(1)}
 
 ## Preview
 
-<PreviewCard title="${title}" note="Interactive">
+<PreviewCard live title="${title}" note="Interactive">
   <${componentName}>Deploy Doom</${componentName}>
 </PreviewCard>
 

AGENTS.md

@@ -1,5 +1,9 @@
 <!-- BEGIN:nextjs-agent-rules -->
+
 # This is NOT the Next.js you know
 
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
 <!-- END:nextjs-agent-rules -->

CONTRIBUTING.md

@@ -11,7 +11,7 @@ Every new button must include:
 - **Accessible HTML:** Prefer a real `<button>` unless the component is explicitly link-based. Forward standard button props where reasonable, preserve focus states, and keep labels readable.
 - **Motion safety:** Hover, press, and animation states should respect `motion-reduce` when animation is significant.
 - **Documentation:** Add a matching MDX page in `content/docs/` with preview, install command, usage example, props table, notes, and registry details.
-- **Registry support:** Add the component to `scripts/build-registry.mjs` so `npm run registry:build` generates its `public/r/<name>.json` entry and updates `public/r/index.json`.
+- **Registry support:** Add an entry to `registry.components.json` so `pnpm registry:build` generates its `public/r/<name>.json` file and updates `public/r/index.json`. Also register it in `components/mdx-custom-components.tsx` and the landing showcase (`components/landing/showcase.ts` plus a preview in `components/landing/previews/`); `pnpm registry:test` checks all of these.
 - **Dependencies declared:** Any runtime dependency must be listed in the registry item. Registry dependencies should be listed separately from npm dependencies.
 - **Consistent imports:** Use the project alias and helpers already used in the repo, especially `cn` from `@/lib/utils` when composing classes.
 
@@ -45,11 +45,15 @@ Each docs page should include:
 Run these checks before handing off:
 
 ```bash
-npm run registry:build
-npm run lint
-npm run build
+pnpm registry:build
+pnpm registry:test
+pnpm lint
+pnpm typecheck
+pnpm build
 ```
 
+CI runs the same checks on every pull request.
+
 If a command fails because of an existing unrelated issue, mention the exact file and error in your handoff. If `next build` needs network access for Google Fonts, rerun it in an environment where font fetching is available.
 
 ## Style Guidance

app/docs/[[...slug]]/page.tsx

@@ -1,12 +1,16 @@
 import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import type { Metadata } from "next";
+import type { ComponentProps } from "react";
 import { notFound } from "next/navigation";
 import { DocsPageActions } from "@/components/docs-page-actions";
 import { getMDXComponents } from "@/components/mdx";
+import { PreviewCard } from "@/components/preview-card";
 import { PageToc } from "@/components/page-toc";
+import { TracwellCard } from "@/components/tracwell-card";
 import { JsonLd } from "@/components/seo/json-ld";
 import { getPageMarkdown } from "@/lib/markdown";
+import { DEFAULT_DOCS_SLUG } from "@/lib/docs-categories";
 import { source } from "@/lib/source";
 import {
   absoluteUrl,
@@ -46,37 +50,66 @@ export default async function DocsPage({ params }: DocsPageProps) {
         )}`
       : undefined;
 
+  const importLine = getUsageImport(page.path);
+  const liveSource =
+    registryName !== null && hasRegistryItem && importLine !== null
+      ? {
+          registryName,
+          installCommand: `npx shadcn@latest add ${absoluteUrl(`/r/${registryName}.json`)}`,
+          importLine,
+          docsUrl: absoluteUrl(page.url),
+        }
+      : undefined;
+
   return (
-    <div className="relative mx-auto w-full max-w-3xl px-6 pb-10 pt-14 md:px-8 md:pt-10 xl:max-w-6xl xl:pr-56">
-      <JsonLd
-        data={[
-          createTechArticleJsonLd({
-            title: page.data.title,
-            description: page.data.description,
-            path: page.url,
-          }),
-          createBreadcrumbJsonLd(breadcrumbs),
-        ]}
-      />
-      <div className="mb-8 flex flex-wrap items-center justify-between gap-4">
-        <h1 className="text-4xl font-semibold tracking-tight text-foreground">
-          {page.data.title}
-        </h1>
-        <DocsPageActions
-          markdown={markdown}
-          githubUrl={`${siteConfig.github}/blob/main/content/docs/${page.path}`}
-          markdownUrl={rawPath}
-          markdownAbsoluteUrl={absoluteUrl(rawPath)}
-          v0Url={v0Url}
+    <div className="flex w-full justify-center gap-10">
+      <div className="min-h-dvh w-full max-w-4xl min-w-0 px-6 pt-16 pb-24 md:border-x md:border-dashed md:border-border md:px-10 md:pt-12">
+        <JsonLd
+          data={[
+            createTechArticleJsonLd({
+              title: page.data.title,
+              description: page.data.description,
+              path: page.url,
+            }),
+            createBreadcrumbJsonLd(breadcrumbs),
+          ]}
         />
+        <header className="mb-10 flex flex-col gap-3">
+          <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-4">
+            <h1 className="font-heading text-[2.25rem] leading-[1.1] font-semibold tracking-[-0.03em] text-foreground">
+              {page.data.title}
+            </h1>
+            <DocsPageActions
+              markdown={markdown}
+              githubUrl={`${siteConfig.github}/blob/main/content/docs/${page.path}`}
+              markdownUrl={rawPath}
+              markdownAbsoluteUrl={absoluteUrl(rawPath)}
+              v0Url={v0Url}
+            />
+          </div>
+          {page.data.description ? (
+            <p className="max-w-2xl text-[15px] leading-7 text-muted-foreground">
+              {page.data.description}
+            </p>
+          ) : null}
+        </header>
+        <article className="docs-content min-w-0">
+          <MDX
+            components={getMDXComponents({
+              PreviewCard: (props: ComponentProps<typeof PreviewCard>) => (
+                <PreviewCard {...props} source={liveSource} />
+              ),
+            })}
+          />
+        </article>
       </div>
-      <article className="docs-content min-w-0">
-        <MDX components={getMDXComponents()} />
-      </article>
-      <aside className="fixed top-8 right-6 hidden w-44 xl:block">
-        <div className="docs-scroll flex max-h-[calc(100dvh-4rem)] flex-col gap-2 overflow-y-auto pl-4">
-          <p className="text-xs text-muted-foreground">On this page</p>
+      <aside className="sticky top-3 hidden h-fit w-52 shrink-0 self-start pt-12 xl:block">
+        <div className="docs-scroll flex max-h-[calc(100dvh-6rem)] flex-col gap-3 overflow-y-auto pr-2">
+          <p className="text-xs font-medium text-muted-foreground">On this page</p>
           <PageToc />
+          <div className="mt-6">
+            <TracwellCard />
+          </div>
         </div>
       </aside>
     </div>
@@ -126,20 +159,33 @@ function getRegistryItemName(mdxPath: string): string | null {
   }
 }
 
+/**
+ * The component import from the page's Usage snippet, e.g.
+ * `import { HoldButton } from "@/components/evil-buttons/hold-button";`.
+ */
+function getUsageImport(mdxPath: string): string | null {
+  try {
+    const contents = readFileSync(
+      join(process.cwd(), "content", "docs", mdxPath),
+      "utf8",
+    );
+    const match = contents.match(
+      /^import .+ from "@\/components\/evil-buttons\/[^"]+";$/m,
+    );
+    return match?.[0] ?? null;
+  } catch {
+    return null;
+  }
+}
+
 function getDocsPage(slug?: string[]) {
   if (slug && slug.length > 0) {
     return source.getPage(slug);
   }
 
-  const defaultPage = source
-    .getPages()
-    .filter(
-      (page) =>
-        !page.url.startsWith("/docs/icons") &&
-        !page.url.startsWith("/docs/logos") &&
-        !page.url.startsWith("/docs/scroll-bars"),
-    )
-    .sort((a, b) => a.url.localeCompare(b.url))[0];
-
-  return defaultPage ?? source.getPages().sort((a, b) => a.url.localeCompare(b.url))[0] ?? null;
+  return (
+    source.getPage([DEFAULT_DOCS_SLUG]) ??
+    source.getPages().sort((a, b) => a.url.localeCompare(b.url))[0] ??
+    null
+  );
 }

app/docs/layout.tsx

@@ -1,16 +1,29 @@
 import type { ReactNode } from "react";
 import { DocsShell } from "@/components/docs-shell";
+import { DOCS_CATEGORIES } from "@/lib/docs-categories";
 import { source } from "@/lib/source";
 
+const UNCATEGORIZED = "Other";
+
 export default function DocsLayout({ children }: { children: ReactNode }) {
-  const pages = source.getPages().map((page) => ({
-    title: page.data.title ?? page.slugs.at(-1) ?? "Untitled",
-    url: page.url,
-  }));
-  const componentPages = pages.sort((a, b) => a.title.localeCompare(b.title));
+  const pages = source
+    .getPages()
+    .map((page) => ({
+      title: page.data.title ?? page.slugs.at(-1) ?? "Untitled",
+      url: page.url,
+      category: page.data.category ?? UNCATEGORIZED,
+    }))
+    .sort((a, b) => a.title.localeCompare(b.title));
+
+  const sections = [...DOCS_CATEGORIES, UNCATEGORIZED]
+    .map((category) => ({
+      title: category,
+      pages: pages.filter((page) => page.category === category),
+    }))
+    .filter((section) => section.pages.length > 0);
 
   return (
-    <DocsShell componentPages={componentPages}>
+    <DocsShell componentPages={pages} sections={sections}>
       {children}
     </DocsShell>
   );