@contractspec/bundle.library 3.7.5 → 3.7.7

package/src/components/docs/integrations/IntegrationsWhatsappTwilioPage.tsx

@@ -2,20 +2,20 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function IntegrationsWhatsappTwilioPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">WhatsApp Twilio</h1>
-        <p className="text-muted-foreground">
-          Twilio WhatsApp support provides a durable fallback channel with
-          signature verification and outbox-backed outbound dispatch.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">WhatsApp Twilio</h1>
+				<p className="text-muted-foreground">
+					Twilio WhatsApp support provides a durable fallback channel with
+					signature verification and outbox-backed outbound dispatch.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Required secrets and config</h2>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`// secret payload
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Required secrets and config</h2>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`// secret payload
 {
   "accountSid": "AC123",
   "authToken": "..."
@@ -25,68 +25,68 @@ export function IntegrationsWhatsappTwilioPage() {
 {
   "fromNumber": "whatsapp:+15550002"
 }`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Webhook ingress</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            Inbound Twilio form payloads are accepted on{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              /webhooks/whatsapp/twilio
-            </code>
-            .
-          </li>
-          <li>
-            Signatures are validated with{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              x-twilio-signature
-            </code>{' '}
-            and the configured auth token.
-          </li>
-          <li>
-            For deterministic verification, set the exact public webhook URL in{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              WHATSAPP_TWILIO_WEBHOOK_URL
-            </code>
-            .
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Webhook ingress</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						Inbound Twilio form payloads are accepted on{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							/webhooks/whatsapp/twilio
+						</code>
+						.
+					</li>
+					<li>
+						Signatures are validated with{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							x-twilio-signature
+						</code>{' '}
+						and the configured auth token.
+					</li>
+					<li>
+						For deterministic verification, set the exact public webhook URL in{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							WHATSAPP_TWILIO_WEBHOOK_URL
+						</code>
+						.
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Workspace mapping</h2>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`CHANNEL_WORKSPACE_MAP_WHATSAPP_TWILIO={"AC123":"workspace-acme"}`}</pre>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Workspace mapping</h2>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`CHANNEL_WORKSPACE_MAP_WHATSAPP_TWILIO={"AC123":"workspace-acme"}`}</pre>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Best practices</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            Use Twilio as fallback when Meta WhatsApp is your primary route.
-          </li>
-          <li>Keep account SID mapping explicit to avoid tenant misrouting.</li>
-          <li>
-            Protect internal dispatch endpoints with
-            <code className="bg-background/50 ml-1 rounded px-2 py-1">
-              CHANNEL_DISPATCH_TOKEN
-            </code>
-            .
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Best practices</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						Use Twilio as fallback when Meta WhatsApp is your primary route.
+					</li>
+					<li>Keep account SID mapping explicit to avoid tenant misrouting.</li>
+					<li>
+						Protect internal dispatch endpoints with
+						<code className="ml-1 rounded bg-background/50 px-2 py-1">
+							CHANNEL_DISPATCH_TOKEN
+						</code>
+						.
+					</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/integrations/whatsapp-meta" className="btn-ghost">
-          Previous: WhatsApp Meta
-        </Link>
-        <Link href="/docs/integrations/health-routing" className="btn-primary">
-          Next: Health Routing <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/integrations/whatsapp-meta" className="btn-ghost">
+					Previous: WhatsApp Meta
+				</Link>
+				<Link href="/docs/integrations/health-routing" className="btn-primary">
+					Next: Health Routing <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/integrations/index.ts

@@ -1,4 +1,3 @@
-export { IntegrationsOverviewPage } from './IntegrationsOverviewPage';
 export { IntegrationsCircuitBreakersPage } from './IntegrationsCircuitBreakersPage';
 export { IntegrationsElevenLabsPage } from './IntegrationsElevenLabsPage';
 export { IntegrationsGithubPage } from './IntegrationsGithubPage';
@@ -7,6 +6,7 @@ export { IntegrationsGoogleCalendarPage } from './IntegrationsGoogleCalendarPage
 export { IntegrationsHealthRoutingPage } from './IntegrationsHealthRoutingPage';
 export { IntegrationsMistralPage } from './IntegrationsMistralPage';
 export { IntegrationsOpenAIPage } from './IntegrationsOpenAIPage';
+export { IntegrationsOverviewPage } from './IntegrationsOverviewPage';
 export { IntegrationsPostmarkPage } from './IntegrationsPostmarkPage';
 export { IntegrationsPowensPage } from './IntegrationsPowensPage';
 export { IntegrationsQdrantPage } from './IntegrationsQdrantPage';

package/src/components/docs/intent/ContractFirstApiPage.tsx

@@ -1,53 +1,53 @@
-import type { Metadata } from 'next';
 import { contractFirstApiBrief } from '@contractspec/bundle.library/components/docs/intent/intent-pages.docblocks';
 import { SeoOptimizer } from '@contractspec/lib.content-gen/seo';
 import { CodeBlock } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
+import type { Metadata } from 'next';
 
 export const metadata: Metadata = new SeoOptimizer().optimize(
-  contractFirstApiBrief
+	contractFirstApiBrief
 );
 
 export function ContractFirstApiPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-3">
-        <h1 className="text-4xl font-bold">{contractFirstApiBrief.title}</h1>
-        <p className="text-muted-foreground text-lg">
-          {contractFirstApiBrief.summary}
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-3">
+				<h1 className="font-bold text-4xl">{contractFirstApiBrief.title}</h1>
+				<p className="text-lg text-muted-foreground">
+					{contractFirstApiBrief.summary}
+				</p>
+			</div>
 
-      <div className="card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-bold">Problems Solved</h2>
-        <ul className="text-muted-foreground space-y-2 text-sm">
-          {contractFirstApiBrief.problems.map((problem, index) => (
-            <li key={index}>{problem}</li>
-          ))}
-        </ul>
-      </div>
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">Problems Solved</h2>
+				<ul className="space-y-2 text-muted-foreground text-sm">
+					{contractFirstApiBrief.problems.map((problem, index) => (
+						<li key={index}>{problem}</li>
+					))}
+				</ul>
+			</div>
 
-      <div className="card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-bold">Solutions</h2>
-        <ul className="text-muted-foreground space-y-2 text-sm">
-          {contractFirstApiBrief.solutions.map((solution, index) => (
-            <li key={index}>{solution}</li>
-          ))}
-        </ul>
-      </div>
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">Solutions</h2>
+				<ul className="space-y-2 text-muted-foreground text-sm">
+					{contractFirstApiBrief.solutions.map((solution, index) => (
+						<li key={index}>{solution}</li>
+					))}
+				</ul>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Quick Start</h2>
-          <p className="text-muted-foreground text-sm">
-            Define your first API contract and generate consistent
-            implementations.
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="src/contracts/user-create.operation.ts"
-            code={`import { defineOperation } from '@contractspec/lib.contracts-spec/operations';
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Quick Start</h2>
+					<p className="text-muted-foreground text-sm">
+						Define your first API contract and generate consistent
+						implementations.
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="src/contracts/user-create.operation.ts"
+						code={`import { defineOperation } from '@contractspec/lib.contracts-spec/operations';
 import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 export const CreateUserOperation = defineOperation({
@@ -82,32 +82,32 @@ export const CreateUserOperation = defineOperation({
     description: 'Create a new user account with email and password',
   },
 });`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Generate OpenAPI</h2>
-          <p className="text-muted-foreground text-sm">
-            Export OpenAPI documentation directly from your contracts.
-          </p>
-          <CodeBlock
-            language="bash"
-            filename="export-openapi"
-            code={`contractspec openapi export \\
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Generate OpenAPI</h2>
+					<p className="text-muted-foreground text-sm">
+						Export OpenAPI documentation directly from your contracts.
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="export-openapi"
+						code={`contractspec openapi export \\
   --registry ./src/contracts/registry.ts \\
   --out ./openapi.json`}
-          />
-        </div>
-      </div>
+					/>
+				</div>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/guides/nextjs-one-endpoint" className="btn-primary">
-          Next.js Guide <ChevronRight size={16} />
-        </Link>
-        <Link href="/docs/intent/spec-driven-development" className="btn-ghost">
-          Spec-driven Development
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/guides/nextjs-one-endpoint" className="btn-primary">
+					Next.js Guide <ChevronRight size={16} />
+				</Link>
+				<Link href="/docs/intent/spec-driven-development" className="btn-ghost">
+					Spec-driven Development
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/intent/DeterministicCodegenPage.tsx

@@ -1,55 +1,56 @@
-import type { Metadata } from 'next';
 import { deterministicCodegenBrief } from '@contractspec/bundle.library/components/docs/intent/intent-pages.docblocks';
 import { SeoOptimizer } from '@contractspec/lib.content-gen/seo';
+import type { Metadata } from 'next';
 
 export const metadata: Metadata = new SeoOptimizer().optimize(
-  deterministicCodegenBrief
+	deterministicCodegenBrief
 );
+
 import { CodeBlock } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function DeterministicCodegenPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-3">
-        <h1 className="text-4xl font-bold">
-          {deterministicCodegenBrief.title}
-        </h1>
-        <p className="text-muted-foreground text-lg">
-          {deterministicCodegenBrief.summary}
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-3">
+				<h1 className="font-bold text-4xl">
+					{deterministicCodegenBrief.title}
+				</h1>
+				<p className="text-lg text-muted-foreground">
+					{deterministicCodegenBrief.summary}
+				</p>
+			</div>
 
-      <div className="card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-bold">Regeneration Challenges</h2>
-        <ul className="text-muted-foreground space-y-2 text-sm">
-          {deterministicCodegenBrief.problems.map((problem, index) => (
-            <li key={index}>{problem}</li>
-          ))}
-        </ul>
-      </div>
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">Regeneration Challenges</h2>
+				<ul className="space-y-2 text-muted-foreground text-sm">
+					{deterministicCodegenBrief.problems.map((problem, index) => (
+						<li key={index}>{problem}</li>
+					))}
+				</ul>
+			</div>
 
-      <div className="card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-bold">Deterministic Solutions</h2>
-        <ul className="text-muted-foreground space-y-2 text-sm">
-          {deterministicCodegenBrief.solutions.map((solution, index) => (
-            <li key={index}>{solution}</li>
-          ))}
-        </ul>
-      </div>
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">Deterministic Solutions</h2>
+				<ul className="space-y-2 text-muted-foreground text-sm">
+					{deterministicCodegenBrief.solutions.map((solution, index) => (
+						<li key={index}>{solution}</li>
+					))}
+				</ul>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Protected Zones</h2>
-          <p className="text-muted-foreground text-sm">
-            Separate generated code from hand-written business logic with clear
-            boundaries.
-          </p>
-          <CodeBlock
-            language="typescript"
-            filename="src/handlers/user-handlers.ts"
-            code={`// Hand-written business logic (protected from regeneration)
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Protected Zones</h2>
+					<p className="text-muted-foreground text-sm">
+						Separate generated code from hand-written business logic with clear
+						boundaries.
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="src/handlers/user-handlers.ts"
+						code={`// Hand-written business logic (protected from regeneration)
 export class UserService {
   async createUser(input: CreateUserInput): Promise<CreateUserOutput> {
     // Custom validation and business rules
@@ -87,54 +88,54 @@ export const createUserHandler = wrapOperationHandler(
     errorMapper: mapToStandardErrors,
   }
 );`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Incremental Regeneration</h2>
-          <p className="text-muted-foreground text-sm">
-            Regenerate only what changed while preserving custom logic.
-          </p>
-          <CodeBlock
-            language="bash"
-            filename="incremental-regen"
-            code={`contractspec generate \\
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Incremental Regeneration</h2>
+					<p className="text-muted-foreground text-sm">
+						Regenerate only what changed while preserving custom logic.
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="incremental-regen"
+						code={`contractspec generate \\
   --incremental \\
   --preserve-zones ./src/handlers/*.ts \\
   --input ./src/contracts/ \\
   --output ./generated/`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Conflict Detection</h2>
-          <p className="text-muted-foreground text-sm">
-            Automatically detect and report conflicts during regeneration.
-          </p>
-          <CodeBlock
-            language="bash"
-            filename="check-conflicts"
-            code={`contractspec generate \\
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Conflict Detection</h2>
+					<p className="text-muted-foreground text-sm">
+						Automatically detect and report conflicts during regeneration.
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="check-conflicts"
+						code={`contractspec generate \\
   --check-conflicts \\
   --report-conflicts ./conflicts.json`}
-          />
-        </div>
-      </div>
+					/>
+				</div>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link
-          href="/docs/guides/generate-docs-clients-schemas"
-          className="btn-primary"
-        >
-          Client Generation <ChevronRight size={16} />
-        </Link>
-        <Link
-          href="/docs/intent/schema-validation-typescript"
-          className="btn-ghost"
-        >
-          Type Safety
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link
+					href="/docs/guides/generate-docs-clients-schemas"
+					className="btn-primary"
+				>
+					Client Generation <ChevronRight size={16} />
+				</Link>
+				<Link
+					href="/docs/intent/schema-validation-typescript"
+					className="btn-ghost"
+				>
+					Type Safety
+				</Link>
+			</div>
+		</div>
+	);
 }