@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/guides/GuideNextjsOneEndpointPage.tsx

@@ -4,49 +4,49 @@ import { ChevronRight } from 'lucide-react';
 import { StudioPrompt } from '../shared/StudioPrompt';
 
 export function GuideNextjsOneEndpointPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-3">
-        <h1 className="text-4xl font-bold">Next.js: add one endpoint</h1>
-        <p className="text-muted-foreground text-lg">
-          Add ContractSpec to an existing Next.js App Router project by wiring a
-          single operation end-to-end with validation and types.
-        </p>
-      </div>
-
-      <div className="card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-bold">What you'll build</h2>
-        <ul className="text-muted-foreground space-y-2 text-sm">
-          <li>One OperationSpec with SchemaModel validation.</li>
-          <li>A registry wiring the operation to its handler.</li>
-          <li>A Next.js route handler that exposes the operation.</li>
-        </ul>
-      </div>
-
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">1) Install core packages</h2>
-          <CodeBlock
-            language="bash"
-            filename="nextjs-install"
-            code={`bun add -D contractspec
+	return (
+		<div className="space-y-8">
+			<div className="space-y-3">
+				<h1 className="font-bold text-4xl">Next.js: add one endpoint</h1>
+				<p className="text-lg text-muted-foreground">
+					Add ContractSpec to an existing Next.js App Router project by wiring a
+					single operation end-to-end with validation and types.
+				</p>
+			</div>
+
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">What you'll build</h2>
+				<ul className="space-y-2 text-muted-foreground text-sm">
+					<li>One OperationSpec with SchemaModel validation.</li>
+					<li>A registry wiring the operation to its handler.</li>
+					<li>A Next.js route handler that exposes the operation.</li>
+				</ul>
+			</div>
+
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">1) Install core packages</h2>
+					<CodeBlock
+						language="bash"
+						filename="nextjs-install"
+						code={`bun add -D contractspec
 bun add @contractspec/lib.contracts-spec @contractspec/lib.contracts-runtime-server-rest @contractspec/lib.schema`}
-          />
-          <p className="text-muted-foreground text-sm">
-            Expected output: <code>added 3 packages</code> and a lockfile
-            update.
-          </p>
-        </div>
-
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">2) Define the operation spec</h2>
-          <p className="text-muted-foreground text-sm">
-            Create <code>src/contracts/healthcheck.operation.ts</code>:
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="src/contracts/healthcheck.operation.ts"
-            code={`import { defineQuery } from "@contractspec/lib.contracts-spec/operations";
+					/>
+					<p className="text-muted-foreground text-sm">
+						Expected output: <code>added 3 packages</code> and a lockfile
+						update.
+					</p>
+				</div>
+
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">2) Define the operation spec</h2>
+					<p className="text-muted-foreground text-sm">
+						Create <code>src/contracts/healthcheck.operation.ts</code>:
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="src/contracts/healthcheck.operation.ts"
+						code={`import { defineQuery } from "@contractspec/lib.contracts-spec/operations";
 import { SchemaModel, ScalarTypeEnum } from "@contractspec/lib.schema";
 
 const HealthcheckOutput = new SchemaModel({
@@ -78,18 +78,18 @@ export const HealthcheckQuery = defineQuery({
     mcp: { toolName: "healthcheck_get-v1" },
   },
 });`}
-          />
-        </div>
-
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">3) Register the operation</h2>
-          <p className="text-muted-foreground text-sm">
-            Create <code>src/contracts/registry.ts</code>:
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="src/contracts/registry.ts"
-            code={`import {
+					/>
+				</div>
+
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">3) Register the operation</h2>
+					<p className="text-muted-foreground text-sm">
+						Create <code>src/contracts/registry.ts</code>:
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="src/contracts/registry.ts"
+						code={`import {
   OperationSpecRegistry,
   installOp,
 } from "@contractspec/lib.contracts-spec/operations";
@@ -101,18 +101,18 @@ installOp(registry, HealthcheckQuery, async () => ({
   status: "ok",
   checkedAt: new Date().toISOString(),
 }));`}
-          />
-        </div>
-
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">4) Add the Next.js handler</h2>
-          <p className="text-muted-foreground text-sm">
-            Create <code>app/api/ops/[...route]/route.ts</code>:
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="app/api/ops/[...route]/route.ts"
-            code={`import { makeNextAppHandler } from "@contractspec/lib.contracts-runtime-server-rest/rest-next-app";
+					/>
+				</div>
+
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">4) Add the Next.js handler</h2>
+					<p className="text-muted-foreground text-sm">
+						Create <code>app/api/ops/[...route]/route.ts</code>:
+					</p>
+					<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 "@/contracts/registry";
 
 const handler = makeNextAppHandler(registry, async () => ({
@@ -121,59 +121,59 @@ const handler = makeNextAppHandler(registry, async () => ({
 }));
 
 export { handler as GET, handler as POST };`}
-          />
-          <p className="text-muted-foreground text-sm">
-            Expected output: the route responds at
-            <code> /api/ops/healthcheck.get</code>.
-          </p>
-        </div>
-
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">5) Validate the spec</h2>
-          <CodeBlock
-            language="bash"
-            filename="nextjs-validate"
-            code={`contractspec validate src/contracts/healthcheck.operation.ts`}
-          />
-          <p className="text-muted-foreground text-sm">
-            Expected output: <code>Validation passed</code>.
-          </p>
-        </div>
-
-        <div className="card-subtle space-y-3 p-6">
-          <h3 className="text-lg font-semibold">Example package</h3>
-          <p className="text-muted-foreground text-sm">
-            Use <code>@contractspec/example.lifecycle-dashboard</code> as a
-            lightweight Next.js snippet reference.
-          </p>
-          <CodeBlock
-            language="bash"
-            filename="nextjs-example"
-            code={`# Inspect the example docs
+					/>
+					<p className="text-muted-foreground text-sm">
+						Expected output: the route responds at
+						<code> /api/ops/healthcheck.get</code>.
+					</p>
+				</div>
+
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">5) Validate the spec</h2>
+					<CodeBlock
+						language="bash"
+						filename="nextjs-validate"
+						code={`contractspec validate src/contracts/healthcheck.operation.ts`}
+					/>
+					<p className="text-muted-foreground text-sm">
+						Expected output: <code>Validation passed</code>.
+					</p>
+				</div>
+
+				<div className="card-subtle space-y-3 p-6">
+					<h3 className="font-semibold text-lg">Example package</h3>
+					<p className="text-muted-foreground text-sm">
+						Use <code>@contractspec/example.lifecycle-dashboard</code> as a
+						lightweight Next.js snippet reference.
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="nextjs-example"
+						code={`# Inspect the example docs
 contractspec examples show lifecycle-dashboard
 
 # Validate all example manifests in this repo
 contractspec examples validate --repo-root .`}
-          />
-        </div>
-
-        <StudioPrompt
-          title="Want real product evidence behind endpoint changes?"
-          body="Studio correlates meetings, support, analytics, and code signals before compiling endpoint decisions into spec diffs."
-        />
-      </div>
-
-      <div className="flex items-center gap-4 pt-4">
-        <Link
-          href="/docs/guides/spec-validation-and-typing"
-          className="btn-primary"
-        >
-          Next: Spec validation + typing <ChevronRight size={16} />
-        </Link>
-        <Link href="/docs/guides" className="btn-ghost">
-          Back to guides
-        </Link>
-      </div>
-    </div>
-  );
+					/>
+				</div>
+
+				<StudioPrompt
+					title="Want real product evidence behind endpoint changes?"
+					body="Studio correlates meetings, support, analytics, and code signals before compiling endpoint decisions into spec diffs."
+				/>
+			</div>
+
+			<div className="flex items-center gap-4 pt-4">
+				<Link
+					href="/docs/guides/spec-validation-and-typing"
+					className="btn-primary"
+				>
+					Next: Spec validation + typing <ChevronRight size={16} />
+				</Link>
+				<Link href="/docs/guides" className="btn-ghost">
+					Back to guides
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/guides/GuideSpecValidationTypingPage.tsx

@@ -4,35 +4,35 @@ import { ChevronRight } from 'lucide-react';
 import { StudioPrompt } from '../shared/StudioPrompt';
 
 export function GuideSpecValidationTypingPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-3">
-        <h1 className="text-4xl font-bold">Spec-driven validation + typing</h1>
-        <p className="text-muted-foreground text-lg">
-          Define a single operation with SchemaModel, generate validation, and
-          keep your existing handler logic.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-3">
+				<h1 className="font-bold text-4xl">Spec-driven validation + typing</h1>
+				<p className="text-lg text-muted-foreground">
+					Define a single operation with SchemaModel, generate validation, and
+					keep your existing handler logic.
+				</p>
+			</div>
 
-      <div className="card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-bold">What you'll build</h2>
-        <ul className="text-muted-foreground space-y-2 text-sm">
-          <li>One command spec with explicit input/output models.</li>
-          <li>Validation + typing without rewriting your service layer.</li>
-          <li>Clear acceptance scenarios for regression safety.</li>
-        </ul>
-      </div>
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">What you'll build</h2>
+				<ul className="space-y-2 text-muted-foreground text-sm">
+					<li>One command spec with explicit input/output models.</li>
+					<li>Validation + typing without rewriting your service layer.</li>
+					<li>Clear acceptance scenarios for regression safety.</li>
+				</ul>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">1) Define the spec</h2>
-          <p className="text-muted-foreground text-sm">
-            Create <code>src/contracts/contact-create.operation.ts</code>:
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="src/contracts/contact-create.operation.ts"
-            code={`import { defineCommand } from "@contractspec/lib.contracts-spec/operations";
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">1) Define the spec</h2>
+					<p className="text-muted-foreground text-sm">
+						Create <code>src/contracts/contact-create.operation.ts</code>:
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="src/contracts/contact-create.operation.ts"
+						code={`import { defineCommand } from "@contractspec/lib.contracts-spec/operations";
 import { SchemaModel, ScalarTypeEnum } from "@contractspec/lib.schema";
 
 const ContactInput = new SchemaModel({
@@ -79,19 +79,19 @@ export const ContactCreateCommand = defineCommand({
     ],
   },
 });`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">2) Wire the handler</h2>
-          <p className="text-muted-foreground text-sm">
-            Keep your existing code. Just ensure the handler returns the output
-            shape defined above.
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="src/handlers/contact-create.ts"
-            code={`import { ContactCreateCommand } from "@/contracts/contact-create.operation";
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">2) Wire the handler</h2>
+					<p className="text-muted-foreground text-sm">
+						Keep your existing code. Just ensure the handler returns the output
+						shape defined above.
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="src/handlers/contact-create.ts"
+						code={`import { ContactCreateCommand } from "@/contracts/contact-create.operation";
  
  export async function handleContactCreate(
    input: (typeof ContactCreateCommand)["io"]["input"],
@@ -104,55 +104,55 @@ export const ContactCreateCommand = defineCommand({
      createdAt: new Date().toISOString(),
    };
  }`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">3) Validate</h2>
-          <CodeBlock
-            language="bash"
-            filename="spec-validation"
-            code={`contractspec validate src/contracts/contact-create.operation.ts`}
-          />
-          <p className="text-muted-foreground text-sm">
-            Expected output: <code>Validation passed</code>.
-          </p>
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">3) Validate</h2>
+					<CodeBlock
+						language="bash"
+						filename="spec-validation"
+						code={`contractspec validate src/contracts/contact-create.operation.ts`}
+					/>
+					<p className="text-muted-foreground text-sm">
+						Expected output: <code>Validation passed</code>.
+					</p>
+				</div>
 
-        <div className="card-subtle space-y-3 p-6">
-          <h3 className="text-lg font-semibold">Example package</h3>
-          <p className="text-muted-foreground text-sm">
-            The CRM Pipeline example includes real specs, handlers, and
-            presentations for contact + deal flows.
-          </p>
-          <CodeBlock
-            language="bash"
-            filename="crm-example"
-            code={`# Build + validate the CRM pipeline example
+				<div className="card-subtle space-y-3 p-6">
+					<h3 className="font-semibold text-lg">Example package</h3>
+					<p className="text-muted-foreground text-sm">
+						The CRM Pipeline example includes real specs, handlers, and
+						presentations for contact + deal flows.
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="crm-example"
+						code={`# Build + validate the CRM pipeline example
 cd packages/examples/crm-pipeline
 bun install
 bun run build
 bun run validate`}
-          />
-        </div>
+					/>
+				</div>
 
-        <StudioPrompt
-          title="Need validation tied to real outcomes?"
-          body="Studio links checks to evidence, focus decisions, and post-release verification so specs evolve with product truth."
-        />
-      </div>
+				<StudioPrompt
+					title="Need validation tied to real outcomes?"
+					body="Studio links checks to evidence, focus decisions, and post-release verification so specs evolve with product truth."
+				/>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link
-          href="/docs/guides/generate-docs-clients-schemas"
-          className="btn-primary"
-        >
-          Next: Generate docs + clients <ChevronRight size={16} />
-        </Link>
-        <Link href="/docs/guides" className="btn-ghost">
-          Back to guides
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link
+					href="/docs/guides/generate-docs-clients-schemas"
+					className="btn-primary"
+				>
+					Next: Generate docs + clients <ChevronRight size={16} />
+				</Link>
+				<Link href="/docs/guides" className="btn-ghost">
+					Back to guides
+				</Link>
+			</div>
+		</div>
+	);
 }