@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/getting-started/HelloWorldPage.tsx

@@ -1,37 +1,37 @@
+import { CodeBlock } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
-import { CodeBlock } from '@contractspec/lib.design-system';
 
 export function HelloWorldPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">Your First Operation</h1>
-        <p className="text-muted-foreground text-lg">
-          Build a payment capture operation with policy enforcement in under 10
-          minutes.
-        </p>
-      </div>
-
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">What you'll build</h2>
-          <p className="text-muted-foreground">
-            A real-world payment processing operation that validates input,
-            enforces business rules, integrates with Stripe, and audits every
-            transaction. This is production-ready code, not a toy example.
-          </p>
-        </div>
-
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">1. Define the operation spec</h2>
-          <p className="text-muted-foreground">
-            Create <code>lib/specs/billing/capture-payment.ts</code>:
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="lib/specs/billing/capture-payment.ts"
-            code={`import { defineCommand } from '@contractspec/lib.contracts-spec';
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">Your First Operation</h1>
+				<p className="text-lg text-muted-foreground">
+					Build a payment capture operation with policy enforcement in under 10
+					minutes.
+				</p>
+			</div>
+
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">What you'll build</h2>
+					<p className="text-muted-foreground">
+						A real-world payment processing operation that validates input,
+						enforces business rules, integrates with Stripe, and audits every
+						transaction. This is production-ready code, not a toy example.
+					</p>
+				</div>
+
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">1. Define the operation spec</h2>
+					<p className="text-muted-foreground">
+						Create <code>lib/specs/billing/capture-payment.ts</code>:
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="lib/specs/billing/capture-payment.ts"
+						code={`import { defineCommand } from '@contractspec/lib.contracts-spec';
 import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 const CapturePaymentInput = new SchemaModel({
@@ -75,18 +75,18 @@ export const CapturePayment = defineCommand({
     ],
   },
 });`}
-          />
-        </div>
-
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">2. Implement the handler</h2>
-          <p className="text-muted-foreground">
-            Create <code>lib/handlers/billing/capture-payment.ts</code>:
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="lib/handlers/billing/capture-payment.ts"
-            code={`import { CapturePayment } from '@/lib/specs/billing/capture-payment';
+					/>
+				</div>
+
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">2. Implement the handler</h2>
+					<p className="text-muted-foreground">
+						Create <code>lib/handlers/billing/capture-payment.ts</code>:
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="lib/handlers/billing/capture-payment.ts"
+						code={`import { CapturePayment } from '@/lib/specs/billing/capture-payment';
 import { stripe } from '@/lib/integrations/stripe';
 import { db } from '@/lib/db';
 
@@ -124,29 +124,29 @@ export async function handleCapturePayment(input, ctx) {
     receiptUrl: paymentIntent.charges.data[0]?.receipt_url,
   };
 }`}
-          />
-        </div>
-
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">3. Register and serve</h2>
-          <p className="text-muted-foreground">
-            Wire it up in <code>lib/registry.ts</code> and{' '}
-            <code>app/api/ops/[...route]/route.ts</code>:
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="lib/registry.ts"
-            code={`import { OperationSpecRegistry, installOp } from '@contractspec/lib.contracts-spec';
+					/>
+				</div>
+
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">3. Register and serve</h2>
+					<p className="text-muted-foreground">
+						Wire it up in <code>lib/registry.ts</code> and{' '}
+						<code>app/api/ops/[...route]/route.ts</code>:
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="lib/registry.ts"
+						code={`import { OperationSpecRegistry, installOp } from '@contractspec/lib.contracts-spec';
 import { CapturePayment } from './specs/billing/capture-payment';
 import { handleCapturePayment } from './handlers/billing/capture-payment';
 
 export const registry = new OperationSpecRegistry();
 installOp(registry, CapturePayment, handleCapturePayment);`}
-          />
-          <CodeBlock
-            language="typescript"
-            filename="app/api/ops/[...route]/route.ts"
-            code={`import { makeNextAppHandler } from '@contractspec/lib.contracts-runtime-server-rest/rest-next-app';
+					/>
+					<CodeBlock
+						language="typescript"
+						filename="app/api/ops/[...route]/route.ts"
+						code={`import { makeNextAppHandler } from '@contractspec/lib.contracts-runtime-server-rest/rest-next-app';
 import { registry } from '@/lib/registry';
 import { auth } from '@/lib/auth';
 
@@ -156,32 +156,32 @@ const handler = makeNextAppHandler(registry, async (req) => {
 });
 
 export { handler as GET, handler as POST };`}
-          />
-        </div>
-
-        <div className="card-subtle space-y-4 p-6">
-          <h3 className="font-bold">What you just built:</h3>
-          <ul className="text-muted-foreground space-y-2 text-sm">
-            <li>
-              Type-safe API endpoint at{' '}
-              <code>/api/ops/billing.capturePayment</code>
-            </li>
-            <li>
-              Automatic input validation (amount must be positive, IDs required)
-            </li>
-            <li>Policy enforcement—only invoice owner can pay</li>
-            <li>Stripe integration with error handling</li>
-            <li>Database transaction with audit trail</li>
-            <li>Same spec works with GraphQL, MCP, or webhooks</li>
-          </ul>
-        </div>
-
-        <div className="flex items-center gap-4 pt-4">
-          <Link href="/docs/getting-started/dataviews" className="btn-primary">
-            Next: Display Data with DataViews <ChevronRight size={16} />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+					/>
+				</div>
+
+				<div className="card-subtle space-y-4 p-6">
+					<h3 className="font-bold">What you just built:</h3>
+					<ul className="space-y-2 text-muted-foreground text-sm">
+						<li>
+							Type-safe API endpoint at{' '}
+							<code>/api/ops/billing.capturePayment</code>
+						</li>
+						<li>
+							Automatic input validation (amount must be positive, IDs required)
+						</li>
+						<li>Policy enforcement—only invoice owner can pay</li>
+						<li>Stripe integration with error handling</li>
+						<li>Database transaction with audit trail</li>
+						<li>Same spec works with GraphQL, MCP, or webhooks</li>
+					</ul>
+				</div>
+
+				<div className="flex items-center gap-4 pt-4">
+					<Link href="/docs/getting-started/dataviews" className="btn-primary">
+						Next: Display Data with DataViews <ChevronRight size={16} />
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/getting-started/InstallationPage.tsx

@@ -1,94 +1,94 @@
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
-import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 
 export function InstallationPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">Installation</h1>
-        <p className="text-muted-foreground text-lg">
-          Add ContractSpec to your existing Next.js or Bun project, or start
-          fresh.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">Installation</h1>
+				<p className="text-lg text-muted-foreground">
+					Add ContractSpec to your existing Next.js or Bun project, or start
+					fresh.
+				</p>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Prerequisites</h2>
-          <ul className="text-muted-foreground space-y-2">
-            <li>Node.js 20+ (or Bun 1.0+)</li>
-            <li>Existing Next.js app or Bun HTTP server</li>
-            <li>PostgreSQL database (for persistence)</li>
-          </ul>
-        </div>
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Prerequisites</h2>
+					<ul className="space-y-2 text-muted-foreground">
+						<li>Node.js 20+ (or Bun 1.0+)</li>
+						<li>Existing Next.js app or Bun HTTP server</li>
+						<li>PostgreSQL database (for persistence)</li>
+					</ul>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Install Core Libraries</h2>
-          <p className="text-muted-foreground">
-            Add the contracts runtime and your choice of adapter:
-          </p>
-          <InstallCommand
-            package={[
-              '@contractspec/lib.contracts-spec',
-              '@contractspec/lib.schema',
-            ]}
-          />
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Install Core Libraries</h2>
+					<p className="text-muted-foreground">
+						Add the contracts runtime and your choice of adapter:
+					</p>
+					<InstallCommand
+						package={[
+							'@contractspec/lib.contracts-spec',
+							'@contractspec/lib.schema',
+						]}
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">For Next.js projects</h2>
-          <InstallCommand package="@contractspec/lib.contracts-spec" />
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">For Next.js projects</h2>
+					<InstallCommand package="@contractspec/lib.contracts-spec" />
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">For database models</h2>
-          <InstallCommand
-            package={[
-              '@contractspec/app.cli-database',
-              'prisma',
-              '@prisma/client',
-            ]}
-          />
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">For database models</h2>
+					<InstallCommand
+						package={[
+							'@contractspec/app.cli-database',
+							'prisma',
+							'@prisma/client',
+						]}
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Set up your project</h2>
-          <p className="text-muted-foreground">
-            Initialize a new ContractSpec project structure:
-          </p>
-          <CodeBlock
-            language="bash"
-            filename="installation-init"
-            code={`bunx contractspec init
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Set up your project</h2>
+					<p className="text-muted-foreground">
+						Initialize a new ContractSpec project structure:
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="installation-init"
+						code={`bunx contractspec init
 # Follow the interactive prompts to configure your project`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Initialize the database</h2>
-          <p className="text-muted-foreground">
-            If using Prisma, set up your schema and generate the client:
-          </p>
-          <CodeBlock
-            language="bash"
-            filename="installation-prisma"
-            code={`bunx prisma init
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Initialize the database</h2>
+					<p className="text-muted-foreground">
+						If using Prisma, set up your schema and generate the client:
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="installation-prisma"
+						code={`bunx prisma init
 # Edit prisma/schema.prisma with your models
 bunx prisma generate
 bunx prisma migrate dev --name init`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="flex items-center gap-4 pt-4">
-          <Link
-            href="/docs/getting-started/hello-world"
-            className="btn-primary"
-          >
-            Next: First Operation <ChevronRight size={16} />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+				<div className="flex items-center gap-4 pt-4">
+					<Link
+						href="/docs/getting-started/hello-world"
+						className="btn-primary"
+					>
+						Next: First Operation <ChevronRight size={16} />
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/getting-started/StartHerePage.tsx

@@ -1,76 +1,76 @@
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
-import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 
 export function StartHerePage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">Start here</h1>
-        <p className="text-muted-foreground text-lg">
-          A fast onboarding path from install to your first generated contract.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">Start here</h1>
+				<p className="text-lg text-muted-foreground">
+					A fast onboarding path from install to your first generated contract.
+				</p>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Install the CLI</h2>
-          <InstallCommand package="contractspec" dev />
-        </div>
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Install the CLI</h2>
+					<InstallCommand package="contractspec" dev />
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Add core libraries</h2>
-          <InstallCommand
-            package={[
-              '@contractspec/lib.contracts-spec',
-              '@contractspec/lib.schema',
-            ]}
-          />
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Add core libraries</h2>
+					<InstallCommand
+						package={[
+							'@contractspec/lib.contracts-spec',
+							'@contractspec/lib.schema',
+						]}
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Initialize your project</h2>
-          <CodeBlock
-            language="bash"
-            filename="start-here-init"
-            code={`bunx contractspec init`}
-          />
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Initialize your project</h2>
+					<CodeBlock
+						language="bash"
+						filename="start-here-init"
+						code={`bunx contractspec init`}
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Create your first contract</h2>
-          <CodeBlock
-            language="bash"
-            filename="start-here-create"
-            code={`contractspec create --type operation`}
-          />
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Create your first contract</h2>
+					<CodeBlock
+						language="bash"
+						filename="start-here-create"
+						code={`contractspec create --type operation`}
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Generate implementation</h2>
-          <CodeBlock
-            language="bash"
-            filename="start-here-build"
-            code={`contractspec build src/contracts/mySpec.ts
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Generate implementation</h2>
+					<CodeBlock
+						language="bash"
+						filename="start-here-build"
+						code={`contractspec build src/contracts/mySpec.ts
 contractspec validate src/contracts/mySpec.ts`}
-          />
-        </div>
-      </div>
+					/>
+				</div>
+			</div>
 
-      <div className="flex flex-wrap items-center gap-3 pt-2">
-        <Link href="/docs/getting-started/hello-world" className="btn-primary">
-          Next: Hello World <ChevronRight size={16} />
-        </Link>
-        <Link
-          href="/docs/getting-started/troubleshooting"
-          className="btn-ghost"
-        >
-          Troubleshooting
-        </Link>
-        <Link href="/docs/getting-started/compatibility" className="btn-ghost">
-          Compatibility
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex flex-wrap items-center gap-3 pt-2">
+				<Link href="/docs/getting-started/hello-world" className="btn-primary">
+					Next: Hello World <ChevronRight size={16} />
+				</Link>
+				<Link
+					href="/docs/getting-started/troubleshooting"
+					className="btn-ghost"
+				>
+					Troubleshooting
+				</Link>
+				<Link href="/docs/getting-started/compatibility" className="btn-ghost">
+					Compatibility
+				</Link>
+			</div>
+		</div>
+	);
 }