docs: use cliVersion constant instead of hardcoded @beta (#100)

- Add packageName prop to CliCommand for auto-versioning
- Create PackageInstall component for install commands
- Convert all hardcoded @beta references to use constant

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: eluce2

apps/docs/content/docs/better-auth/installation.mdx

@@ -5,6 +5,7 @@ title: Installation & Usage
 import { Callout } from "fumadocs-ui/components/callout";
 
 import { CliCommand } from "@/components/CliCommand";
+import { PackageInstall } from "@/components/PackageInstall";
 
 
 <Callout type="warning">
@@ -31,9 +32,7 @@ Follow the [Better-Auth installation guide](https://better-auth.com/docs/install
 ### Database Setup
 
 Ensure you have the @proofkit/better-auth package installed in your app.
-```package-install
-@proofkit/better-auth@beta
-```
+<PackageInstall packages="@proofkit/better-auth" />
 
 Configure your database connection in your `auth.ts` file. Be sure to set these value secrets in your environment variables. The credentials you use here need `fmodata` permissions enabled, and read/write access to the better-auth tables.
 ```ts title="auth.ts"
@@ -62,10 +61,10 @@ export const auth = betterAuth({
 # Step 2: Create/Update Database Tables
 
 Run the following command to create the necessary tables and fields in your FileMaker file. It will show you a confirmation before any changes are applied, so you can review them.
-<CliCommand command="migrate" exec execPackage="@proofkit/better-auth@beta" />
+<CliCommand command="migrate" exec packageName="@proofkit/better-auth" />
 
 [Full Access] credentials are required for the schema changes to be applied automatically, but you may want to use a more restricted account for the rest of better-auth usage. If your credentials that you entered earlier in the `auth.ts` file do not have the [Full Access] permissions, you can override them in the CLI.
-<CliCommand command={`migrate --username "full_access_username" --password "full_access_password"`} exec execPackage="@proofkit/better-auth@beta" />
+<CliCommand command={`migrate --username "full_access_username" --password "full_access_password"`} exec packageName="@proofkit/better-auth" />
 
 These changes affect database schema only. No layouts or relationships are created or modified during this process.
 

apps/docs/content/docs/better-auth/troubleshooting.mdx

@@ -2,13 +2,13 @@
 title: Troubleshooting
 ---
 
+import { CliCommand } from "@/components/CliCommand";
+
 ## Error when generating schema
 ```bash
 ERROR [Better Auth]: filemaker is not supported. If it is a custom adapter, please request the maintainer to implement createSchema
 ```
 
 This means you used the better-auth CLI directly instead of the @proofkit/better-auth version. Run this instead:
 
-```bash
-pnpm dlx @proofkit/better-auth@beta migrate
-```
+<CliCommand command="migrate" exec packageName="@proofkit/better-auth" />

apps/docs/content/docs/fmodata/quick-start.mdx

@@ -12,6 +12,7 @@ import {
 import { Callout } from "fumadocs-ui/components/callout";
 import { Card } from "fumadocs-ui/components/card";
 import { CliCommand } from "@/components/CliCommand";
+import { PackageInstall } from "@/components/PackageInstall";
 import { Badge } from "@/components/ui/badge";
 
 Here's a minimal example to get you started with `@proofkit/fmodata`:
@@ -20,9 +21,7 @@ Here's a minimal example to get you started with `@proofkit/fmodata`:
   <Step>
     ### Install the package
 
-    ```package-install
-    @proofkit/fmodata@beta
-    ```
+    <PackageInstall packages="@proofkit/fmodata" />
 
   </Step>
 
@@ -67,7 +66,7 @@ Here's a minimal example to get you started with `@proofkit/fmodata`:
   </TabsList>
   <TabsContent value="automatic">
   Run this command in your project to launch a browser-based UI for configuring your schema definitions. You will need environment variables set for your FileMaker server and database.
-  <CliCommand command="ui" exec execPackage="@proofkit/typegen@beta" />
+  <CliCommand command="ui" exec packageName="@proofkit/typegen" />
 
 Learn more about the [@proofkit/typegen](/docs/typegen) tool.
 

apps/docs/content/docs/typegen/index.mdx

@@ -7,6 +7,7 @@ import { Tabs, TabItem } from "fumadocs-ui/components/tabs";
 import { Callout } from "fumadocs-ui/components/callout";
 import { File, Folder, Files } from "fumadocs-ui/components/files";
 import { IconFileTypeTs } from "@tabler/icons-react";
+import { CliCommand } from "@/components/CliCommand";
 
 A utility for generating runtime validators and TypeScript files from your
 own FileMaker layouts.
@@ -15,13 +16,7 @@ own FileMaker layouts.
 
 Run this command to initialize `@proofkit/typegen` in your project:
 
-```bash tab="pnpm"
-pnpm dlx @proofkit/typegen@beta
-```
-
-```bash tab="npm"
-npx @proofkit/typegen@beta
-```
+<CliCommand command="" exec packageName="@proofkit/typegen" />
 
 ## Configuring Typegen
 
@@ -51,14 +46,7 @@ If you need to use different env variable names (i.e. for multiple FileMaker con
 ## Running Typegen
 Once you have a config file setup, you can run the command to generate the types:
 
-
-```bash tab="pnpm"
-pnpm dlx @proofkit/typegen@beta
-```
-
-```bash tab="npm"
-npx @proofkit/typegen@beta
-```
+<CliCommand command="" exec packageName="@proofkit/typegen" />
 
 <Callout type="info">
 We suggest adding a script to your `package.json` to run this command more easily

apps/docs/content/docs/typegen/ui.mdx

@@ -2,13 +2,13 @@
 title: Typegen UI
 ---
 
+import { CliCommand } from "@/components/CliCommand";
+
 The typegen tool has a built-in web interface for editing your JSON config file and running the typegen scripts. It's helpful for making sure your environment variables are setup correctly and can help autocomplete layout/field/table names into the config file.
 
 To launch the UI, run the following command and a browser window will open at `http://localhost:3141`:
 
-```bash
-npx @proofkit/typegen@beta ui
-```
+<CliCommand command="ui" exec packageName="@proofkit/typegen" />
 
 
 ## CLI options

apps/docs/src/components/CliCommand.tsx

@@ -33,18 +33,22 @@ const MANAGERS = [
 export function CliCommand({
   command,
   exec,
-  execPackage = `@proofkit/cli@${cliVersion}`,
+  execPackage,
+  packageName = "@proofkit/cli",
 }: {
   command: string;
   exec?: boolean;
+  /** @deprecated Use packageName instead */
   execPackage?: string;
+  packageName?: string;
 }) {
+  const pkg = execPackage ?? `${packageName}@${cliVersion}`;
   return (
     <Tabs groupId="package-manager" id="package-manager" items={MANAGERS.map((m) => m.label)} persist>
       {MANAGERS.map((manager) => (
         <Tab key={manager.key} value={manager.label}>
           <DynamicCodeBlock
-            code={`${exec ? `${manager.execPrefix} ${execPackage}` : manager.prefix} ${command}`}
+            code={`${exec ? `${manager.execPrefix} ${pkg}` : manager.prefix} ${command}`}
             lang="bash"
           />
         </Tab>

apps/docs/src/components/PackageInstall.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { cliVersion } from "@/lib/constants";
+
+const MANAGERS = [
+  { key: "npm", label: "npm", prefix: "npm install" },
+  { key: "pnpm", label: "pnpm", prefix: "pnpm add" },
+  { key: "yarn", label: "yarn", prefix: "yarn add" },
+  { key: "bun", label: "bun", prefix: "bun add" },
+];
+
+const WHITESPACE_RE = /\s+/;
+
+/**
+ * Renders a tabbed package install command.
+ * Automatically appends @{cliVersion} to @proofkit/* packages unless version is already specified.
+ */
+export function PackageInstall({ packages }: { packages: string }) {
+  const pkgs = packages
+    .trim()
+    .split(WHITESPACE_RE)
+    .map((pkg) => {
+      // If it's a @proofkit package without a version, append the cliVersion
+      if (pkg.startsWith("@proofkit/") && !pkg.includes("@", 1)) {
+        return `${pkg}@${cliVersion}`;
+      }
+      return pkg;
+    })
+    .join(" ");
+
+  return (
+    <Tabs groupId="package-manager" id="package-manager" items={MANAGERS.map((m) => m.label)} persist>
+      {MANAGERS.map((manager) => (
+        <Tab key={manager.key} value={manager.label}>
+          <DynamicCodeBlock code={`${manager.prefix} ${pkgs}`} lang="bash" />
+        </Tab>
+      ))}
+    </Tabs>
+  );
+}
+
+export default PackageInstall;