@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/advanced/AdvancedMCPPage.tsx

@@ -2,79 +2,79 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function AdvancedMCPPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">MCP Adapters</h1>
-        <p className="text-muted-foreground">
-          The <strong>Model Context Protocol (MCP)</strong> is an open standard
-          for connecting AI models to external tools and data sources.
-          ContractSpec provides MCP adapters that allow you to expose your
-          capabilities as MCP tools and consume external MCP servers as
-          capabilities.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">MCP Adapters</h1>
+				<p className="text-muted-foreground">
+					The <strong>Model Context Protocol (MCP)</strong> is an open standard
+					for connecting AI models to external tools and data sources.
+					ContractSpec provides MCP adapters that allow you to expose your
+					capabilities as MCP tools and consume external MCP servers as
+					capabilities.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Why MCP integration matters</h2>
-        <p className="text-muted-foreground">
-          AI agents need access to real-world tools and data to be useful. MCP
-          provides a standardized way to expose these capabilities. By
-          integrating ContractSpec with MCP, you can:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            Let AI agents invoke your ContractSpec capabilities safely and
-            securely
-          </li>
-          <li>
-            Use external MCP servers (databases, APIs, search engines) as
-            capability providers in your workflows
-          </li>
-          <li>
-            Build AI-powered features without writing custom integration code
-          </li>
-          <li>Enforce policies on AI agent actions just like any other user</li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Why MCP integration matters</h2>
+				<p className="text-muted-foreground">
+					AI agents need access to real-world tools and data to be useful. MCP
+					provides a standardized way to expose these capabilities. By
+					integrating ContractSpec with MCP, you can:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						Let AI agents invoke your ContractSpec capabilities safely and
+						securely
+					</li>
+					<li>
+						Use external MCP servers (databases, APIs, search engines) as
+						capability providers in your workflows
+					</li>
+					<li>
+						Build AI-powered features without writing custom integration code
+					</li>
+					<li>Enforce policies on AI agent actions just like any other user</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">
-          Exposing capabilities as MCP tools
-        </h2>
-        <p className="text-muted-foreground">
-          Any{' '}
-          <Link
-            href="/docs/specs/capabilities"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            CapabilitySpec
-          </Link>{' '}
-          can be automatically exposed as an MCP tool. ContractSpec generates:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            A tool schema describing the capability's inputs, outputs, and
-            purpose
-          </li>
-          <li>An MCP server endpoint that AI agents can connect to</li>
-          <li>
-            Policy enforcement ensuring agents can only invoke capabilities
-            they're authorized to use
-          </li>
-          <li>
-            Audit logging of all agent actions for compliance and debugging
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">
+					Exposing capabilities as MCP tools
+				</h2>
+				<p className="text-muted-foreground">
+					Any{' '}
+					<Link
+						href="/docs/specs/capabilities"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						CapabilitySpec
+					</Link>{' '}
+					can be automatically exposed as an MCP tool. ContractSpec generates:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						A tool schema describing the capability's inputs, outputs, and
+						purpose
+					</li>
+					<li>An MCP server endpoint that AI agents can connect to</li>
+					<li>
+						Policy enforcement ensuring agents can only invoke capabilities
+						they're authorized to use
+					</li>
+					<li>
+						Audit logging of all agent actions for compliance and debugging
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example: Exposing a capability</h2>
-        <p className="text-muted-foreground">
-          Here's how to expose ContractSpec operations as MCP tools:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example: Exposing a capability</h2>
+				<p className="text-muted-foreground">
+					Here's how to expose ContractSpec operations as MCP tools:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { createMcpServer } from '@contractspec/lib.contracts-runtime-server-mcp/provider-mcp';
 import { registry, resources, prompts } from './lib/registry';
@@ -92,22 +92,22 @@ createMcpServer(server, registry, resources, prompts, {
 
 const transport = new StdioServerTransport();
 await server.connect(transport);`}</pre>
-        </div>
-        <p className="text-muted-foreground">
-          AI agents can now discover and invoke your operations through the MCP
-          protocol. ContractSpec handles authentication, authorization, and
-          execution automatically via the `OperationSpecRegistry`.
-        </p>
-      </div>
+				</div>
+				<p className="text-muted-foreground">
+					AI agents can now discover and invoke your operations through the MCP
+					protocol. ContractSpec handles authentication, authorization, and
+					execution automatically via the `OperationSpecRegistry`.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Consuming external MCP servers</h2>
-        <p className="text-muted-foreground">
-          You can integrate external MCP servers into your workflows. Define an
-          integration spec and use it in your operations:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`import { defineIntegration } from '@contractspec/lib.contracts-integrations';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Consuming external MCP servers</h2>
+				<p className="text-muted-foreground">
+					You can integrate external MCP servers into your workflows. Define an
+					integration spec and use it in your operations:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`import { defineIntegration } from '@contractspec/lib.contracts-integrations';
 import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 const SearchProductsIntegration = defineIntegration({
@@ -137,24 +137,24 @@ const SearchProductsIntegration = defineIntegration({
     }),
   },
 });`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Policy enforcement for AI agents</h2>
-        <p className="text-muted-foreground">
-          AI agents are treated like any other actor in ContractSpec. They must
-          authenticate, and all their actions are subject to{' '}
-          <Link
-            href="/docs/specs/policy"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            PolicySpecs
-          </Link>
-          . You can define specific policies in TypeScript:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`import { definePolicy } from '@contractspec/lib.contracts-spec';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Policy enforcement for AI agents</h2>
+				<p className="text-muted-foreground">
+					AI agents are treated like any other actor in ContractSpec. They must
+					authenticate, and all their actions are subject to{' '}
+					<Link
+						href="/docs/specs/policy"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						PolicySpecs
+					</Link>
+					. You can define specific policies in TypeScript:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`import { definePolicy } from '@contractspec/lib.contracts-spec';
 
 export const AIAgentRestrictions = definePolicy({
   meta: {
@@ -178,73 +178,73 @@ export const AIAgentRestrictions = definePolicy({
     },
   ],
 });`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Human-in-the-loop workflows</h2>
-        <p className="text-muted-foreground">
-          For sensitive operations, you can require human approval before an AI
-          agent can proceed. ContractSpec provides built-in approval workflows:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>Agent requests permission to invoke a capability</li>
-          <li>
-            Request is sent to designated approvers (via email, Slack, etc.)
-          </li>
-          <li>Approver reviews the request and approves or denies it</li>
-          <li>Agent receives the decision and can proceed if approved</li>
-        </ul>
-        <p className="text-muted-foreground">
-          All approval decisions are logged in the{' '}
-          <Link
-            href="/docs/safety/auditing"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            audit log
-          </Link>
-          .
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Human-in-the-loop workflows</h2>
+				<p className="text-muted-foreground">
+					For sensitive operations, you can require human approval before an AI
+					agent can proceed. ContractSpec provides built-in approval workflows:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>Agent requests permission to invoke a capability</li>
+					<li>
+						Request is sent to designated approvers (via email, Slack, etc.)
+					</li>
+					<li>Approver reviews the request and approves or denies it</li>
+					<li>Agent receives the decision and can proceed if approved</li>
+				</ul>
+				<p className="text-muted-foreground">
+					All approval decisions are logged in the{' '}
+					<Link
+						href="/docs/safety/auditing"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						audit log
+					</Link>
+					.
+				</p>
+			</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>
-            Start with read-only capabilities for AI agents—only grant write
-            access when necessary.
-          </li>
-          <li>
-            Use human-in-the-loop approval for any capability that modifies
-            critical data or triggers financial transactions.
-          </li>
-          <li>
-            Set rate limits to prevent runaway agents from overwhelming your
-            system.
-          </li>
-          <li>
-            Provide clear, detailed descriptions for each capability so agents
-            know when to use them.
-          </li>
-          <li>
-            Monitor agent actions closely in production and adjust policies as
-            needed.
-          </li>
-          <li>
-            Test agent integrations thoroughly with realistic scenarios before
-            deploying.
-          </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>
+						Start with read-only capabilities for AI agents—only grant write
+						access when necessary.
+					</li>
+					<li>
+						Use human-in-the-loop approval for any capability that modifies
+						critical data or triggers financial transactions.
+					</li>
+					<li>
+						Set rate limits to prevent runaway agents from overwhelming your
+						system.
+					</li>
+					<li>
+						Provide clear, detailed descriptions for each capability so agents
+						know when to use them.
+					</li>
+					<li>
+						Monitor agent actions closely in production and adjust policies as
+						needed.
+					</li>
+					<li>
+						Test agent integrations thoroughly with realistic scenarios before
+						deploying.
+					</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/advanced/renderers" className="btn-ghost">
-          Previous: Custom Renderers
-        </Link>
-        <Link href="/docs/advanced/telemetry" className="btn-primary">
-          Next: Telemetry <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/advanced/renderers" className="btn-ghost">
+					Previous: Custom Renderers
+				</Link>
+				<Link href="/docs/advanced/telemetry" className="btn-primary">
+					Next: Telemetry <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/advanced/AdvancedOverlayEditorPage.tsx

@@ -1,58 +1,58 @@
 import Link from '@contractspec/lib.ui-link';
 
 export function AdvancedOverlayEditorPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Overlay Editor</h1>
-        <p className="text-muted-foreground text-lg">
-          A Next.js app (`@contractspec/app.overlay-editor`) that lets tenant
-          admins tweak field visibility, labels, and ordering, then sign
-          OverlaySpecs.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Overlay Editor</h1>
+				<p className="text-lg text-muted-foreground">
+					A Next.js app (`@contractspec/app.overlay-editor`) that lets tenant
+					admins tweak field visibility, labels, and ordering, then sign
+					OverlaySpecs.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Features</h2>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Toggle visibility and rename labels without touching code.</li>
-          <li>Move fields up/down to define the overlay order.</li>
-          <li>
-            Preview JSON output powered by `@contractspec/lib.overlay-engine`.
-          </li>
-          <li>Server action for PEM signing (Ed25519/RSA-PSS).</li>
-        </ul>
-        <p>
-          Project path: <code>packages/apps/overlay-editor</code>
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Features</h2>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Toggle visibility and rename labels without touching code.</li>
+					<li>Move fields up/down to define the overlay order.</li>
+					<li>
+						Preview JSON output powered by `@contractspec/lib.overlay-engine`.
+					</li>
+					<li>Server action for PEM signing (Ed25519/RSA-PSS).</li>
+				</ul>
+				<p>
+					Project path: <code>packages/apps/overlay-editor</code>
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Provisioning flow</h2>
-        <ol className="list-decimal space-y-2 pl-6">
-          <li>
-            Clone the repo and run <code>bun dev</code> inside the app.
-          </li>
-          <li>Use the UI to craft the overlay for a tenant.</li>
-          <li>
-            Paste the tenant&apos;s PEM private key (stored in Vault/KMS).
-          </li>
-          <li>Click “Sign overlay” to get the final JSON payload.</li>
-          <li>
-            Persist in the `Overlay` table and register with `OverlayRegistry`.
-          </li>
-        </ol>
-        <p>
-          See also:{' '}
-          <Link
-            href="/docs/ops/tenant-customization"
-            className="text-violet-400 underline"
-          >
-            Tenant customization runbook
-          </Link>
-          .
-        </p>
-      </div>
-    </div>
-  );
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Provisioning flow</h2>
+				<ol className="list-decimal space-y-2 pl-6">
+					<li>
+						Clone the repo and run <code>bun dev</code> inside the app.
+					</li>
+					<li>Use the UI to craft the overlay for a tenant.</li>
+					<li>
+						Paste the tenant&apos;s PEM private key (stored in Vault/KMS).
+					</li>
+					<li>Click “Sign overlay” to get the final JSON payload.</li>
+					<li>
+						Persist in the `Overlay` table and register with `OverlayRegistry`.
+					</li>
+				</ol>
+				<p>
+					See also:{' '}
+					<Link
+						href="/docs/ops/tenant-customization"
+						className="text-violet-400 underline"
+					>
+						Tenant customization runbook
+					</Link>
+					.
+				</p>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/advanced/AdvancedRenderersPage.tsx

@@ -2,33 +2,33 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function AdvancedRenderersPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">Custom Renderers</h1>
-        <p className="text-muted-foreground text-lg">
-          ContractSpec ships with React and React Native renderers. You can
-          build custom renderers for any framework.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">Custom Renderers</h1>
+				<p className="text-lg text-muted-foreground">
+					ContractSpec ships with React and React Native renderers. You can
+					build custom renderers for any framework.
+				</p>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Overview</h2>
-          <p className="text-muted-foreground">
-            The presentation runtime libraries (
-            <code>@contractspec/lib.presentation-runtime-react</code> and
-            <code>@contractspec/lib.presentation-runtime-react-native</code>)
-            provide hooks and components to render ContractSpec-defined UI like
-            workflows and data views. You can extend these or create custom
-            implementations for other frameworks.
-          </p>
-        </div>
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Overview</h2>
+					<p className="text-muted-foreground">
+						The presentation runtime libraries (
+						<code>@contractspec/lib.presentation-runtime-react</code> and
+						<code>@contractspec/lib.presentation-runtime-react-native</code>)
+						provide hooks and components to render ContractSpec-defined UI like
+						workflows and data views. You can extend these or create custom
+						implementations for other frameworks.
+					</p>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Using the React Renderer</h2>
-          <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-            <pre>{`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Using the React Renderer</h2>
+					<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+						<pre>{`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
 import { MyWorkflowSpec } from './specs';
 
 export function WorkflowPage() {
@@ -44,34 +44,34 @@ export function WorkflowPage() {
     </div>
   );
 }`}</pre>
-          </div>
-        </div>
+					</div>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Custom Platform Support</h2>
-          <p className="text-muted-foreground">
-            To support a new platform (e.g., Vue, Svelte), you would:
-          </p>
-          <ol className="text-muted-foreground list-inside list-decimal space-y-2">
-            <li>
-              Implement the core workflow state machine (from{' '}
-              <code>@contractspec/lib.presentation-runtime-core</code>)
-            </li>
-            <li>
-              Create framework-specific hooks/components for step rendering
-            </li>
-            <li>
-              Handle validation and submission via the ContractSpec I/O schemas
-            </li>
-          </ol>
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Custom Platform Support</h2>
+					<p className="text-muted-foreground">
+						To support a new platform (e.g., Vue, Svelte), you would:
+					</p>
+					<ol className="list-inside list-decimal space-y-2 text-muted-foreground">
+						<li>
+							Implement the core workflow state machine (from{' '}
+							<code>@contractspec/lib.presentation-runtime-core</code>)
+						</li>
+						<li>
+							Create framework-specific hooks/components for step rendering
+						</li>
+						<li>
+							Handle validation and submission via the ContractSpec I/O schemas
+						</li>
+					</ol>
+				</div>
 
-        <div className="flex items-center gap-4 pt-4">
-          <Link href="/docs" className="btn-primary">
-            Back to docs <ChevronRight size={16} />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+				<div className="flex items-center gap-4 pt-4">
+					<Link href="/docs" className="btn-primary">
+						Back to docs <ChevronRight size={16} />
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }