@contractspec/bundle.library 3.7.6 → 3.8.2

package/src/components/docs/libraries/LibrariesDesignSystemPage.tsx

@@ -1,61 +1,61 @@
+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 LibrariesDesignSystemPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">@contractspec/lib.design-system</h1>
-        <p className="text-muted-foreground">
-          High-level design system components, patterns, and layouts for LSSM
-          applications. Built on top of <code>@contractspec/lib.ui-kit</code>.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">@contractspec/lib.design-system</h1>
+				<p className="text-muted-foreground">
+					High-level design system components, patterns, and layouts for LSSM
+					applications. Built on top of <code>@contractspec/lib.ui-kit</code>.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.design-system" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.design-system" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">What It Provides</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Composite Components</strong>: Molecules and Organisms that
-            solve common UI problems
-          </li>
-          <li>
-            <strong>Layouts</strong>: Ready-to-use page structures for
-            dashboards, marketing sites, and lists
-          </li>
-          <li>
-            <strong>Data Views</strong>: Standardized renderers for lists,
-            tables, and detail views
-          </li>
-          <li>
-            <strong>Forms</strong>: Zod-integrated form layouts and components
-          </li>
-          <li>
-            <strong>Code Display</strong>: Syntax-highlighted code blocks with
-            package manager tabs
-          </li>
-          <li>
-            <strong>Platform Utilities</strong>: Hooks for responsive and
-            adaptive design
-          </li>
-          <li>
-            <strong>Legal Templates</strong>: Compliant templates for Terms,
-            Privacy, and GDPR
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">What It Provides</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Composite Components</strong>: Molecules and Organisms that
+						solve common UI problems
+					</li>
+					<li>
+						<strong>Layouts</strong>: Ready-to-use page structures for
+						dashboards, marketing sites, and lists
+					</li>
+					<li>
+						<strong>Data Views</strong>: Standardized renderers for lists,
+						tables, and detail views
+					</li>
+					<li>
+						<strong>Forms</strong>: Zod-integrated form layouts and components
+					</li>
+					<li>
+						<strong>Code Display</strong>: Syntax-highlighted code blocks with
+						package manager tabs
+					</li>
+					<li>
+						<strong>Platform Utilities</strong>: Hooks for responsive and
+						adaptive design
+					</li>
+					<li>
+						<strong>Legal Templates</strong>: Compliant templates for Terms,
+						Privacy, and GDPR
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example: App Layout</h2>
-        <CodeBlock
-          language="tsx"
-          code={`import { AppLayout } from '@contractspec/lib.design-system';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example: App Layout</h2>
+				<CodeBlock
+					language="tsx"
+					code={`import { AppLayout } from '@contractspec/lib.design-system';
 import { AppSidebar } from '@contractspec/lib.design-system';
 
 export function Layout({ children }) {
@@ -65,14 +65,14 @@ export function Layout({ children }) {
     </AppLayout>
   );
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example: Zod Form</h2>
-        <CodeBlock
-          language="tsx"
-          code={`import { ZodForm } from '@contractspec/lib.design-system';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example: Zod Form</h2>
+				<CodeBlock
+					language="tsx"
+					code={`import { ZodForm } from '@contractspec/lib.design-system';
 import * as z from "zod";
 
 const schema = z.object({
@@ -89,16 +89,16 @@ export function SignupForm() {
     />
   );
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">
-          Example: Code Block with Package Manager Tabs
-        </h2>
-        <CodeBlock
-          language="tsx"
-          code={`import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">
+					Example: Code Block with Package Manager Tabs
+				</h2>
+				<CodeBlock
+					language="tsx"
+					code={`import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 
 // For installation commands with package manager tabs
 <InstallCommand package="my-package" />
@@ -110,54 +110,54 @@ export function SignupForm() {
   code={\`const hello = "world";\`}
   filename="example.ts"
 />`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Key Exports</h2>
-        <div className="grid gap-4 md:grid-cols-2">
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 font-semibold">Organisms</h3>
-            <ul className="text-muted-foreground space-y-1 text-sm">
-              <li>AppLayout, AppHeader, AppSidebar</li>
-              <li>MarketingLayout, HeroSection</li>
-              <li>ListCardPage, ListTablePage</li>
-            </ul>
-          </div>
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 font-semibold">Data & Forms</h3>
-            <ul className="text-muted-foreground space-y-1 text-sm">
-              <li>DataViewRenderer</li>
-              <li>ZodForm</li>
-              <li>FormLayout, FormDialog</li>
-            </ul>
-          </div>
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 font-semibold">Code Display</h3>
-            <ul className="text-muted-foreground space-y-1 text-sm">
-              <li>CodeBlock (syntax highlighting)</li>
-              <li>CommandTabs (package manager tabs)</li>
-              <li>InstallCommand (convenience wrapper)</li>
-              <li>CopyButton</li>
-            </ul>
-          </div>
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 font-semibold">Providers</h3>
-            <ul className="text-muted-foreground space-y-1 text-sm">
-              <li>PackageManagerProvider</li>
-            </ul>
-          </div>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Key Exports</h2>
+				<div className="grid gap-4 md:grid-cols-2">
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold">Organisms</h3>
+						<ul className="space-y-1 text-muted-foreground text-sm">
+							<li>AppLayout, AppHeader, AppSidebar</li>
+							<li>MarketingLayout, HeroSection</li>
+							<li>ListCardPage, ListTablePage</li>
+						</ul>
+					</div>
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold">Data & Forms</h3>
+						<ul className="space-y-1 text-muted-foreground text-sm">
+							<li>DataViewRenderer</li>
+							<li>ZodForm</li>
+							<li>FormLayout, FormDialog</li>
+						</ul>
+					</div>
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold">Code Display</h3>
+						<ul className="space-y-1 text-muted-foreground text-sm">
+							<li>CodeBlock (syntax highlighting)</li>
+							<li>CommandTabs (package manager tabs)</li>
+							<li>InstallCommand (convenience wrapper)</li>
+							<li>CopyButton</li>
+						</ul>
+					</div>
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold">Providers</h3>
+						<ul className="space-y-1 text-muted-foreground text-sm">
+							<li>PackageManagerProvider</li>
+						</ul>
+					</div>
+				</div>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries/ui-kit" className="btn-ghost">
-          Previous: UI Kit
-        </Link>
-        <Link href="/docs/libraries/accessibility" className="btn-primary">
-          Next: Accessibility <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries/ui-kit" className="btn-ghost">
+					Previous: UI Kit
+				</Link>
+				<Link href="/docs/libraries/accessibility" className="btn-primary">
+					Next: Accessibility <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/libraries/LibrariesEvolutionPage.tsx

@@ -3,27 +3,27 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function LibrariesEvolutionPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">@contractspec/lib.evolution</h1>
-        <p className="text-muted-foreground text-lg">
-          Analyze production telemetry, surface anomalies, and turn them into
-          AI-reviewed spec proposals that can be approved, rolled out, or
-          reverted.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">@contractspec/lib.evolution</h1>
+				<p className="text-lg text-muted-foreground">
+					Analyze production telemetry, surface anomalies, and turn them into
+					AI-reviewed spec proposals that can be approved, rolled out, or
+					reverted.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.evolution" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.evolution" />
+			</div>
 
-      <div className="space-y-3">
-        <h2 className="text-2xl font-bold">From telemetry to intent</h2>
-        <CodeBlock
-          language="typescript"
-          code={`import { SpecAnalyzer } from '@contractspec/lib.evolution/analyzer';
+			<div className="space-y-3">
+				<h2 className="font-bold text-2xl">From telemetry to intent</h2>
+				<CodeBlock
+					language="typescript"
+					code={`import { SpecAnalyzer } from '@contractspec/lib.evolution/analyzer';
 import { EvolutionPipeline } from '@contractspec/lib.observability';
 
 const analyzer = new SpecAnalyzer();
@@ -39,14 +39,14 @@ pipeline.ingest({
   timestamp: new Date(),
   errorCode: 'VALIDATION_FAILED',
 });`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-3">
-        <h2 className="text-2xl font-bold">Generate & approve suggestions</h2>
-        <CodeBlock
-          language="typescript"
-          code={`import {
+			<div className="space-y-3">
+				<h2 className="font-bold text-2xl">Generate & approve suggestions</h2>
+				<CodeBlock
+					language="typescript"
+					code={`import {
   SpecGenerator,
   SpecSuggestionOrchestrator,
   InMemorySpecSuggestionRepository,
@@ -61,14 +61,14 @@ const suggestion = generator.generateFromIntent(intentPattern, {
 });
 
 await orchestrator.submit(suggestion, sessionState);`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-3">
-        <h2 className="text-2xl font-bold">Write approved specs back to git</h2>
-        <CodeBlock
-          language="typescript"
-          code={`import { FileSystemSuggestionWriter } from '@contractspec/lib.evolution/approval';
+			<div className="space-y-3">
+				<h2 className="font-bold text-2xl">Write approved specs back to git</h2>
+				<CodeBlock
+					language="typescript"
+					code={`import { FileSystemSuggestionWriter } from '@contractspec/lib.evolution/approval';
 
 const writer = new FileSystemSuggestionWriter({
   outputDir:
@@ -80,37 +80,37 @@ await writer.write({
   status: 'approved',
   approvals: { reviewer: 'ops@contractspec', decidedAt: new Date() },
 });`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="grid gap-4 md:grid-cols-2">
-        {[
-          {
-            title: 'Approvals by default',
-            description:
-              "Every suggestion flows through @contractspec/lib.ai-agent's ApprovalWorkflow. Tune auto-approval thresholds per environment.",
-          },
-          {
-            title: 'Pluggable storage',
-            description:
-              'Use the Prisma repository in production, in-memory for tests, or stream serialized suggestions into your own queue.',
-          },
-        ].map((card) => (
-          <div key={card.title} className="card-subtle space-y-2 p-4">
-            <h3 className="text-lg font-semibold">{card.title}</h3>
-            <p className="text-muted-foreground text-sm">{card.description}</p>
-          </div>
-        ))}
-      </div>
+			<div className="grid gap-4 md:grid-cols-2">
+				{[
+					{
+						title: 'Approvals by default',
+						description:
+							"Every suggestion flows through @contractspec/lib.ai-agent's ApprovalWorkflow. Tune auto-approval thresholds per environment.",
+					},
+					{
+						title: 'Pluggable storage',
+						description:
+							'Use the Prisma repository in production, in-memory for tests, or stream serialized suggestions into your own queue.',
+					},
+				].map((card) => (
+					<div key={card.title} className="card-subtle space-y-2 p-4">
+						<h3 className="font-semibold text-lg">{card.title}</h3>
+						<p className="text-muted-foreground text-sm">{card.description}</p>
+					</div>
+				))}
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries" className="btn-ghost">
-          Back to Libraries
-        </Link>
-        <Link href="/docs/libraries/observability" className="btn-primary">
-          Next: Observability <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries" className="btn-ghost">
+					Back to Libraries
+				</Link>
+				<Link href="/docs/libraries/observability" className="btn-primary">
+					Next: Observability <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/libraries/LibrariesGraphQLPage.tsx

@@ -1,73 +1,73 @@
+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 LibrariesGraphQLPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">GraphQL Libraries</h1>
-        <p className="text-muted-foreground">
-          This suite of libraries enables seamless GraphQL integration,
-          transforming your ContractSpecs into a type-safe Pothos schema,
-          connecting with Prisma, and enabling Apollo Federation.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">GraphQL Libraries</h1>
+				<p className="text-muted-foreground">
+					This suite of libraries enables seamless GraphQL integration,
+					transforming your ContractSpecs into a type-safe Pothos schema,
+					connecting with Prisma, and enabling Apollo Federation.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Libraries</h2>
-        <div className="grid gap-4 md:grid-cols-1">
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">
-              @contractspec/lib.graphql-core
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              The foundation. Provides a configured Pothos builder, common
-              scalars (JSON, DateTime), and utilities for mapping ContractSpec
-              I/O to Pothos types.
-            </p>
-          </div>
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">
-              @contractspec/lib.graphql-prisma
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Connects Pothos to Prisma. Automatically generates GraphQL types
-              from your Prisma schema and optimizes queries to prevent N+1
-              issues.
-            </p>
-          </div>
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">
-              @contractspec/lib.graphql-federation
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Adds Apollo Federation V2 support. Allows your subgraph to define
-              keys and entities, making it ready for a supergraph.
-            </p>
-          </div>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Libraries</h2>
+				<div className="grid gap-4 md:grid-cols-1">
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">
+							@contractspec/lib.graphql-core
+						</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							The foundation. Provides a configured Pothos builder, common
+							scalars (JSON, DateTime), and utilities for mapping ContractSpec
+							I/O to Pothos types.
+						</p>
+					</div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">
+							@contractspec/lib.graphql-prisma
+						</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							Connects Pothos to Prisma. Automatically generates GraphQL types
+							from your Prisma schema and optimizes queries to prevent N+1
+							issues.
+						</p>
+					</div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">
+							@contractspec/lib.graphql-federation
+						</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							Adds Apollo Federation V2 support. Allows your subgraph to define
+							keys and entities, making it ready for a supergraph.
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand
-          package={[
-            '@contractspec/lib.graphql-core',
-            '@contractspec/lib.graphql-prisma',
-            '@contractspec/lib.graphql-federation',
-          ]}
-        />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand
+					package={[
+						'@contractspec/lib.graphql-core',
+						'@contractspec/lib.graphql-prisma',
+						'@contractspec/lib.graphql-federation',
+					]}
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Usage: Building a Schema</h2>
-        <p className="text-muted-foreground">
-          Here's how to assemble a federated GraphQL schema from your specs:
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { builder } from '@contractspec/lib.graphql-core';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Usage: Building a Schema</h2>
+				<p className="text-muted-foreground">
+					Here's how to assemble a federated GraphQL schema from your specs:
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { builder } from '@contractspec/lib.graphql-core';
 import { registerContractsOnBuilder } from '@contractspec/lib.contracts-runtime-server-graphql/graphql-pothos';
 import { OperationSpecRegistry } from '@contractspec/lib.contracts-spec';
 import { MySpecs } from './specs';
@@ -82,35 +82,35 @@ registerContractsOnBuilder(builder, registry);
 // 3. Build and print schema
 const schema = builder.toSchema();
 console.log(printSchema(schema));`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Features</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Code-First</strong>: Define schema in TypeScript (Pothos),
-            get SDL as artifact.
-          </li>
-          <li>
-            <strong>Spec Integration</strong>: `registerContractsOnBuilder`
-            automatically converts Command/Query specs into Mutations/Queries.
-          </li>
-          <li>
-            <strong>Federation Ready</strong>: Just add `provider: 'federation'`
-            to your config.
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Features</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Code-First</strong>: Define schema in TypeScript (Pothos),
+						get SDL as artifact.
+					</li>
+					<li>
+						<strong>Spec Integration</strong>: `registerContractsOnBuilder`
+						automatically converts Command/Query specs into Mutations/Queries.
+					</li>
+					<li>
+						<strong>Federation Ready</strong>: Just add `provider: 'federation'`
+						to your config.
+					</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries/data-backend" className="btn-primary">
-          Next: Data & Backend <ChevronRight size={16} />
-        </Link>
-        <Link href="/docs/libraries" className="btn-ghost">
-          Back to Libraries
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries/data-backend" className="btn-primary">
+					Next: Data & Backend <ChevronRight size={16} />
+				</Link>
+				<Link href="/docs/libraries" className="btn-ghost">
+					Back to Libraries
+				</Link>
+			</div>
+		</div>
+	);
 }