@contractspec/bundle.library 3.7.6 → 3.8.2

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

@@ -3,27 +3,27 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function LibrariesProgressiveDeliveryPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Progressive Delivery Library</h1>
-        <p className="text-muted-foreground text-lg">
-          The <code>@contractspec/lib.progressive-delivery</code> package helps
-          you ship new specs with confidence: canary + blue-green strategies,
-          metric guardrails, and rollback hooks in one place.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Progressive Delivery Library</h1>
+				<p className="text-lg text-muted-foreground">
+					The <code>@contractspec/lib.progressive-delivery</code> package helps
+					you ship new specs with confidence: canary + blue-green strategies,
+					metric guardrails, and rollback hooks in one place.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.progressive-delivery" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.progressive-delivery" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Define a Strategy</h2>
-        <CodeBlock
-          language="typescript"
-          code={`import { DeploymentCoordinator, createDefaultCanaryController, TrafficShifter, RollbackManager } from '@contractspec/lib.progressive-delivery';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Define a Strategy</h2>
+				<CodeBlock
+					language="typescript"
+					code={`import { DeploymentCoordinator, createDefaultCanaryController, TrafficShifter, RollbackManager } from '@contractspec/lib.progressive-delivery';
 
 const strategy = {
   target: { name: 'billing.createInvoice', version: 7 },
@@ -34,14 +34,14 @@ const strategy = {
     latencyP95: 250,
   },
 };`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Run the Coordinator</h2>
-        <CodeBlock
-          language="typescript"
-          code={`const eventBus = new DeploymentEventBus();
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Run the Coordinator</h2>
+				<CodeBlock
+					language="typescript"
+					code={`const eventBus = new DeploymentEventBus();
 const controller = createDefaultCanaryController(strategy, fetchMetrics, eventBus);
 const coordinator = new DeploymentCoordinator({
   strategy,
@@ -53,31 +53,31 @@ const coordinator = new DeploymentCoordinator({
 });
 
 const result = await coordinator.run();`}
-        />
-        <p className="text-muted-foreground text-sm">
-          The coordinator emits <code>stage_started</code>,{' '}
-          <code>stage_failed</code>, and <code>rolled_back</code> events, making
-          it easy to power dashboards or alerting workflows.
-        </p>
-      </div>
+				/>
+				<p className="text-muted-foreground text-sm">
+					The coordinator emits <code>stage_started</code>,{' '}
+					<code>stage_failed</code>, and <code>rolled_back</code> events, making
+					it easy to power dashboards or alerting workflows.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Blue-Green Swap</h2>
-        <p className="text-muted-foreground text-sm">
-          Switch to <code>mode: 'blue-green'</code> to warm up the new stack in
-          parallel and cut over once smoke tests pass. The same guardrails apply
-          before the final swap.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Blue-Green Swap</h2>
+				<p className="text-muted-foreground text-sm">
+					Switch to <code>mode: 'blue-green'</code> to warm up the new stack in
+					parallel and cut over once smoke tests pass. The same guardrails apply
+					before the final swap.
+				</p>
+			</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/resilience" className="btn-primary">
-          Next: Resilience <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/resilience" className="btn-primary">
+					Next: Resilience <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

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

@@ -3,29 +3,29 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function LibrariesResiliencePage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Resilience Library</h1>
-        <p className="text-muted-foreground text-lg">
-          The <code>@contractspec/lib.resilience</code> library provides
-          primitives to handle failures gracefully.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Resilience Library</h1>
+				<p className="text-lg text-muted-foreground">
+					The <code>@contractspec/lib.resilience</code> library provides
+					primitives to handle failures gracefully.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.resilience" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.resilience" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Circuit Breaker</h2>
-        <p className="text-muted-foreground">
-          Prevent cascading failures by stopping calls to a failing dependency.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { CircuitBreaker } from '@contractspec/lib.resilience/circuit-breaker';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Circuit Breaker</h2>
+				<p className="text-muted-foreground">
+					Prevent cascading failures by stopping calls to a failing dependency.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { CircuitBreaker } from '@contractspec/lib.resilience/circuit-breaker';
 
 const breaker = new CircuitBreaker({
   failureThreshold: 5,
@@ -35,17 +35,17 @@ const breaker = new CircuitBreaker({
 const result = await breaker.execute(async () => {
   return await fetch('https://api.stripe.com/v1/charges');
 });`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Retry</h2>
-        <p className="text-muted-foreground">
-          Automatically retry transient failures with exponential backoff.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { retry } from '@contractspec/lib.resilience/retry';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Retry</h2>
+				<p className="text-muted-foreground">
+					Automatically retry transient failures with exponential backoff.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { retry } from '@contractspec/lib.resilience/retry';
 
 const result = await retry(
   async () => fetchUser(id),
@@ -53,34 +53,34 @@ const result = await retry(
   1000, // initial delay
   true // backoff
 );`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Timeout & Fallback</h2>
-        <p className="text-muted-foreground">
-          Set hard limits on execution time and provide default values on
-          failure.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { timeout, fallback } from '@contractspec/lib.resilience';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Timeout & Fallback</h2>
+				<p className="text-muted-foreground">
+					Set hard limits on execution time and provide default values on
+					failure.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { timeout, fallback } from '@contractspec/lib.resilience';
 
 const result = await fallback(
   () => timeout(slowOperation, 5000),
   defaultValue
 );`}
-        />
-      </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/testing" className="btn-primary">
-          Next: Testing <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/testing" className="btn-primary">
+					Next: Testing <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

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

@@ -1,69 +1,69 @@
+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 LibrariesRuntimePage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Runtime Libraries</h1>
-        <p className="text-muted-foreground">
-          The presentation runtime libraries provide the engine for rendering
-          ContractSpec-defined UIs. They handle state management, validation,
-          step navigation, and component rendering for Workflows and DataViews.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Runtime Libraries</h1>
+				<p className="text-muted-foreground">
+					The presentation runtime libraries provide the engine for rendering
+					ContractSpec-defined UIs. They handle state management, validation,
+					step navigation, and component rendering for Workflows and DataViews.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.presentation-runtime-react" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.presentation-runtime-react" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Libraries</h2>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Libraries</h2>
 
-        <div className="space-y-6">
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">
-              @contractspec/lib.presentation-runtime-core
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Framework-Agnostic Core</strong>. Contains the state
-              machines, validation logic, and navigation rules for workflows.
-              Can be used to build renderers for any platform (Vue, Svelte,
-              CLI).
-            </p>
-          </div>
+				<div className="space-y-6">
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">
+							@contractspec/lib.presentation-runtime-core
+						</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Framework-Agnostic Core</strong>. Contains the state
+							machines, validation logic, and navigation rules for workflows.
+							Can be used to build renderers for any platform (Vue, Svelte,
+							CLI).
+						</p>
+					</div>
 
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">
-              @contractspec/lib.presentation-runtime-react
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>React Bindings</strong>. Hooks (`useWorkflow`) and
-              components (`WorkflowStepper`, `WorkflowStepRenderer`) for React
-              Web applications. Integrates with `ui-kit-web`.
-            </p>
-          </div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">
+							@contractspec/lib.presentation-runtime-react
+						</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>React Bindings</strong>. Hooks (`useWorkflow`) and
+							components (`WorkflowStepper`, `WorkflowStepRenderer`) for React
+							Web applications. Integrates with `ui-kit-web`.
+						</p>
+					</div>
 
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">
-              @contractspec/lib.presentation-runtime-react-native
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>React Native Bindings</strong>. Optimized for mobile
-              experiences. Handles native navigation integration and uses
-              universal components from `ui-kit`.
-            </p>
-          </div>
-        </div>
-      </div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">
+							@contractspec/lib.presentation-runtime-react-native
+						</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>React Native Bindings</strong>. Optimized for mobile
+							experiences. Handles native navigation integration and uses
+							universal components from `ui-kit`.
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example: React Workflow</h2>
-        <CodeBlock
-          language="tsx"
-          code={`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example: React Workflow</h2>
+				<CodeBlock
+					language="tsx"
+					code={`import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
 import { OnboardingFlow } from './specs/onboarding';
 
 export function OnboardingPage() {
@@ -104,46 +104,46 @@ export function OnboardingPage() {
     </div>
   );
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Architecture</h2>
-        <p className="text-muted-foreground">
-          The runtime follows a "render-loop" pattern:
-        </p>
-        <ol className="text-muted-foreground list-inside list-decimal space-y-2">
-          <li>
-            <strong>Spec</strong>: Defines the flow, fields, and validation
-            rules.
-          </li>
-          <li>
-            <strong>Core</strong>: Tracks current step, data state, and
-            validation errors.
-          </li>
-          <li>
-            <strong>Renderer</strong>: Maps spec fields to UI components (Input,
-            Select, etc.).
-          </li>
-          <li>
-            <strong>User</strong>: Interacts with components, updating core
-            state.
-          </li>
-          <li>
-            <strong>Policy</strong>: (Optional) Re-evaluates visibility on every
-            change.
-          </li>
-        </ol>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Architecture</h2>
+				<p className="text-muted-foreground">
+					The runtime follows a "render-loop" pattern:
+				</p>
+				<ol className="list-inside list-decimal space-y-2 text-muted-foreground">
+					<li>
+						<strong>Spec</strong>: Defines the flow, fields, and validation
+						rules.
+					</li>
+					<li>
+						<strong>Core</strong>: Tracks current step, data state, and
+						validation errors.
+					</li>
+					<li>
+						<strong>Renderer</strong>: Maps spec fields to UI components (Input,
+						Select, etc.).
+					</li>
+					<li>
+						<strong>User</strong>: Interacts with components, updating core
+						state.
+					</li>
+					<li>
+						<strong>Policy</strong>: (Optional) Re-evaluates visibility on every
+						change.
+					</li>
+				</ol>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries/data-backend" className="btn-ghost">
-          Previous: Data & Backend
-        </Link>
-        <Link href="/docs/libraries" className="btn-primary">
-          Back to Libraries <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries/data-backend" className="btn-ghost">
+					Previous: Data & Backend
+				</Link>
+				<Link href="/docs/libraries" className="btn-primary">
+					Back to Libraries <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

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

@@ -3,73 +3,73 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function LibrariesSLOPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">SLO Library</h1>
-        <p className="text-muted-foreground text-lg">
-          <code>@contractspec/lib.slo</code> keeps service level objectives
-          front and center—declarative definitions, rolling snapshots, burn-rate
-          math, and automated incidents.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">SLO Library</h1>
+				<p className="text-lg text-muted-foreground">
+					<code>@contractspec/lib.slo</code> keeps service level objectives
+					front and center—declarative definitions, rolling snapshots, burn-rate
+					math, and automated incidents.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.slo" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.slo" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Define Targets</h2>
-        <CodeBlock
-          language="typescript"
-          code={`const definition: SLODefinition = {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Define Targets</h2>
+				<CodeBlock
+					language="typescript"
+					code={`const definition: SLODefinition = {
   id: 'billing.createInvoice.availability',
   targetAvailability: 0.999,
   latencyP99TargetMs: 500,
   rollingWindowMs: 7 * 24 * 60 * 60 * 1000,
   alerts: { fastBurnThreshold: 14, slowBurnThreshold: 6 },
 };`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Monitor Burn Rate</h2>
-        <CodeBlock
-          language="typescript"
-          code={`const monitor = new SLOMonitor({ definition, incidentManager });
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Monitor Burn Rate</h2>
+				<CodeBlock
+					language="typescript"
+					code={`const monitor = new SLOMonitor({ definition, incidentManager });
 const { snapshot, burnRate } = monitor.recordWindow({
   good: 12500,
   bad: 3,
   latencyP99: 420,
   latencyP95: 210,
 });`}
-        />
-        <p className="text-muted-foreground text-sm">
-          When burn rate exceeds the configured thresholds the monitor calls
-          your
-          <code>IncidentManager</code>, providing the snapshot that triggered
-          the alert.
-        </p>
-      </div>
+				/>
+				<p className="text-muted-foreground text-sm">
+					When burn rate exceeds the configured thresholds the monitor calls
+					your
+					<code>IncidentManager</code>, providing the snapshot that triggered
+					the alert.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">History & Reporting</h2>
-        <p className="text-muted-foreground text-sm">
-          `SLOTracker.getHistory()` returns the latest snapshots so dashboards
-          can show trends without hitting a warehouse. Prisma models persist
-          everything for long-term audits.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">History & Reporting</h2>
+				<p className="text-muted-foreground text-sm">
+					`SLOTracker.getHistory()` returns the latest snapshots so dashboards
+					can show trends without hitting a warehouse. Prisma models persist
+					everything for long-term audits.
+				</p>
+			</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/cost-tracking" className="btn-primary">
-          Next: Cost Tracking <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/cost-tracking" className="btn-primary">
+					Next: Cost Tracking <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }