@contractspec/bundle.library 3.7.6 → 3.7.7

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

@@ -1,18 +1,18 @@
 export function AdvancedSpecExperimentsPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Spec Experiments</h1>
-        <p className="text-muted-foreground text-lg">
-          Run controlled experiments on ContractSpec operations, gradually shift
-          traffic, and roll back automatically when guardrails trip.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Spec Experiments</h1>
+				<p className="text-lg text-muted-foreground">
+					Run controlled experiments on ContractSpec operations, gradually shift
+					traffic, and roll back automatically when guardrails trip.
+				</p>
+			</div>
 
-      <div className="space-y-3">
-        <h2 className="text-2xl font-bold">Define control + variants</h2>
-        <pre className="bg-muted rounded-lg border p-4 text-sm">
-          {`import { SpecExperimentRegistry } from '@contractspec/lib.growth/spec-experiments';
+			<div className="space-y-3">
+				<h2 className="font-bold text-2xl">Define control + variants</h2>
+				<pre className="rounded-lg border bg-muted p-4 text-sm">
+					{`import { SpecExperimentRegistry } from '@contractspec/lib.growth/spec-experiments';
 
 const registry = new SpecExperimentRegistry().register({
   target: { name: 'billing.createInvoice', version: 4 },
@@ -33,25 +33,25 @@ const registry = new SpecExperimentRegistry().register({
   rolloutStages: [0.01, 0.1, 0.5, 1],
   guardrails: { errorRateThreshold: 0.02, latencyP99ThresholdMs: 500 },
 });`}
-        </pre>
-      </div>
+				</pre>
+			</div>
 
-      <div className="space-y-3">
-        <h2 className="text-2xl font-bold">Attach to runtime</h2>
-        <pre className="bg-muted rounded-lg border p-4 text-sm">
-          {`import { createSpecVariantResolver } from '@contractspec/lib.growth/spec-experiments';
+			<div className="space-y-3">
+				<h2 className="font-bold text-2xl">Attach to runtime</h2>
+				<pre className="rounded-lg border bg-muted p-4 text-sm">
+					{`import { createSpecVariantResolver } from '@contractspec/lib.growth/spec-experiments';
 
 adapterContext.specVariantResolver = createSpecVariantResolver({
   adapter,
   resolveUserId: (ctx) => ctx.userId ?? ctx.organizationId ?? 'anon',
 });`}
-        </pre>
-      </div>
+				</pre>
+			</div>
 
-      <div className="space-y-3">
-        <h2 className="text-2xl font-bold">Track outcomes + auto-rollback</h2>
-        <pre className="bg-muted rounded-lg border p-4 text-sm">
-          {`import {
+			<div className="space-y-3">
+				<h2 className="font-bold text-2xl">Track outcomes + auto-rollback</h2>
+				<pre className="rounded-lg border bg-muted p-4 text-sm">
+					{`import {
   SpecExperimentAnalyzer,
   SpecExperimentController,
 } from '@contractspec/lib.growth/spec-experiments';
@@ -62,28 +62,28 @@ const controller = new SpecExperimentController({
   analyzer,
   onRollback: (target, evaluation) => notifyOps(target, evaluation.reasons),
 });`}
-        </pre>
-      </div>
+				</pre>
+			</div>
 
-      <div className="grid gap-4 md:grid-cols-2">
-        {[
-          {
-            title: 'Deterministic bucketing',
-            description:
-              'ExperimentRunner reuses the same hashing logic as growth experiments—every user sticks to a variant.',
-          },
-          {
-            title: 'Multi-stage rollouts',
-            description:
-              'Use `rolloutStages` to shift 1% → 10% → 50% → 100%. Guardrails trigger rollbacks automatically.',
-          },
-        ].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>
-  );
+			<div className="grid gap-4 md:grid-cols-2">
+				{[
+					{
+						title: 'Deterministic bucketing',
+						description:
+							'ExperimentRunner reuses the same hashing logic as growth experiments—every user sticks to a variant.',
+					},
+					{
+						title: 'Multi-stage rollouts',
+						description:
+							'Use `rolloutStages` to shift 1% → 10% → 50% → 100%. Guardrails trigger rollbacks automatically.',
+					},
+				].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>
+	);
 }

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

@@ -2,74 +2,74 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function AdvancedTelemetryPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Telemetry</h1>
-        <p className="text-muted-foreground">
-          A <strong>TelemetrySpec</strong> defines what metrics, logs, and
-          traces to collect for observability. ContractSpec automatically
-          instruments your application based on these specs, ensuring you have
-          the visibility you need to monitor, debug, and optimize your system.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Telemetry</h1>
+				<p className="text-muted-foreground">
+					A <strong>TelemetrySpec</strong> defines what metrics, logs, and
+					traces to collect for observability. ContractSpec automatically
+					instruments your application based on these specs, ensuring you have
+					the visibility you need to monitor, debug, and optimize your system.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Why telemetry matters</h2>
-        <p className="text-muted-foreground">
-          You can't fix what you can't see. Telemetry provides visibility into
-          how your application is performing, where errors are occurring, and
-          how users are interacting with your system. Without proper
-          instrumentation, you're flying blind in production.
-        </p>
-        <p className="text-muted-foreground">
-          ContractSpec takes a spec-first approach to telemetry: you declare
-          what you want to observe, and runtime adapters instrument operations
-          automatically. This ensures consistent, comprehensive coverage without
-          manual effort.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Why telemetry matters</h2>
+				<p className="text-muted-foreground">
+					You can't fix what you can't see. Telemetry provides visibility into
+					how your application is performing, where errors are occurring, and
+					how users are interacting with your system. Without proper
+					instrumentation, you're flying blind in production.
+				</p>
+				<p className="text-muted-foreground">
+					ContractSpec takes a spec-first approach to telemetry: you declare
+					what you want to observe, and runtime adapters instrument operations
+					automatically. This ensures consistent, comprehensive coverage without
+					manual effort.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Three pillars of observability</h2>
-        <div className="space-y-3">
-          <div>
-            <h3 className="text-lg font-semibold">Metrics</h3>
-            <p className="text-muted-foreground">
-              Numerical measurements collected over time. Examples: request
-              count, error rate, latency percentiles, active users, queue depth.
-              Metrics are cheap to collect and store, making them ideal for
-              high-level monitoring and alerting.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Logs</h3>
-            <p className="text-muted-foreground">
-              Timestamped text records of events. Examples: "User 123 logged
-              in", "Payment failed for order 456", "Database connection pool
-              exhausted". Logs provide detailed context for debugging specific
-              issues.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Traces</h3>
-            <p className="text-muted-foreground">
-              Records of requests as they flow through your system. A trace
-              shows the complete path of a request—which services it touched,
-              how long each step took, and where errors occurred. Traces are
-              essential for debugging distributed systems.
-            </p>
-          </div>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Three pillars of observability</h2>
+				<div className="space-y-3">
+					<div>
+						<h3 className="font-semibold text-lg">Metrics</h3>
+						<p className="text-muted-foreground">
+							Numerical measurements collected over time. Examples: request
+							count, error rate, latency percentiles, active users, queue depth.
+							Metrics are cheap to collect and store, making them ideal for
+							high-level monitoring and alerting.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Logs</h3>
+						<p className="text-muted-foreground">
+							Timestamped text records of events. Examples: "User 123 logged
+							in", "Payment failed for order 456", "Database connection pool
+							exhausted". Logs provide detailed context for debugging specific
+							issues.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Traces</h3>
+						<p className="text-muted-foreground">
+							Records of requests as they flow through your system. A trace
+							shows the complete path of a request—which services it touched,
+							how long each step took, and where errors occurred. Traces are
+							essential for debugging distributed systems.
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example TelemetrySpec</h2>
-        <p className="text-muted-foreground">
-          Here's how telemetry is configured 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 { defineTelemetry } from '@contractspec/lib.contracts-spec/telemetry';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example TelemetrySpec</h2>
+				<p className="text-muted-foreground">
+					Here's how telemetry is configured 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 { defineTelemetry } from '@contractspec/lib.contracts-spec/telemetry';
 
 export const OrderProcessingTelemetry = defineTelemetry({
   meta: {
@@ -115,149 +115,149 @@ export const OrderProcessingTelemetry = defineTelemetry({
     },
   ],
 });`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Automatic instrumentation</h2>
-        <p className="text-muted-foreground">
-          ContractSpec automatically instruments:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>All operations</strong> – Request count, latency, error rate
-            per Command/Query
-          </li>
-          <li>
-            <strong>All workflows</strong> – Step execution time, retry counts,
-            compensation events
-          </li>
-          <li>
-            <strong>All data views</strong> – Query execution time, result set
-            size
-          </li>
-          <li>
-            <strong>All policy decisions</strong> – Decision time, permit/deny
-            ratio
-          </li>
-          <li>
-            <strong>System resources</strong> – CPU, memory, disk, network usage
-          </li>
-        </ul>
-        <p className="text-muted-foreground">
-          You don't need to add instrumentation code manually—the runtime
-          handles it based on your specs.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Automatic instrumentation</h2>
+				<p className="text-muted-foreground">
+					ContractSpec automatically instruments:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>All operations</strong> – Request count, latency, error rate
+						per Command/Query
+					</li>
+					<li>
+						<strong>All workflows</strong> – Step execution time, retry counts,
+						compensation events
+					</li>
+					<li>
+						<strong>All data views</strong> – Query execution time, result set
+						size
+					</li>
+					<li>
+						<strong>All policy decisions</strong> – Decision time, permit/deny
+						ratio
+					</li>
+					<li>
+						<strong>System resources</strong> – CPU, memory, disk, network usage
+					</li>
+				</ul>
+				<p className="text-muted-foreground">
+					You don't need to add instrumentation code manually—the runtime
+					handles it based on your specs.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">
-          Integration with observability platforms
-        </h2>
-        <p className="text-muted-foreground">
-          ContractSpec supports multiple observability backends:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Prometheus</strong> – For metrics collection and alerting
-          </li>
-          <li>
-            <strong>Grafana</strong> – For dashboards and visualization
-          </li>
-          <li>
-            <strong>Jaeger / Tempo</strong> – For distributed tracing
-          </li>
-          <li>
-            <strong>Loki</strong> – For log aggregation
-          </li>
-          <li>
-            <strong>Datadog</strong> – All-in-one observability platform
-          </li>
-          <li>
-            <strong>New Relic</strong> – Application performance monitoring
-          </li>
-          <li>
-            <strong>Honeycomb</strong> – Observability for complex systems
-          </li>
-        </ul>
-        <p className="text-muted-foreground">
-          You can configure multiple backends and send telemetry to all of them
-          simultaneously.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">
+					Integration with observability platforms
+				</h2>
+				<p className="text-muted-foreground">
+					ContractSpec supports multiple observability backends:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Prometheus</strong> – For metrics collection and alerting
+					</li>
+					<li>
+						<strong>Grafana</strong> – For dashboards and visualization
+					</li>
+					<li>
+						<strong>Jaeger / Tempo</strong> – For distributed tracing
+					</li>
+					<li>
+						<strong>Loki</strong> – For log aggregation
+					</li>
+					<li>
+						<strong>Datadog</strong> – All-in-one observability platform
+					</li>
+					<li>
+						<strong>New Relic</strong> – Application performance monitoring
+					</li>
+					<li>
+						<strong>Honeycomb</strong> – Observability for complex systems
+					</li>
+				</ul>
+				<p className="text-muted-foreground">
+					You can configure multiple backends and send telemetry to all of them
+					simultaneously.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Sampling and performance</h2>
-        <p className="text-muted-foreground">
-          Collecting telemetry has a cost—CPU, memory, network bandwidth, and
-          storage. ContractSpec provides several mechanisms to control overhead:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Sampling</strong> – Trace only a percentage of requests
-            (e.g., 10%)
-          </li>
-          <li>
-            <strong>Adaptive sampling</strong> – Automatically reduce sampling
-            rate under high load
-          </li>
-          <li>
-            <strong>Tail-based sampling</strong> – Keep traces for failed
-            requests, sample successful ones
-          </li>
-          <li>
-            <strong>Field redaction</strong> – Remove sensitive data from traces
-            and logs
-          </li>
-          <li>
-            <strong>Aggregation</strong> – Pre-aggregate metrics before sending
-            to reduce network traffic
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Sampling and performance</h2>
+				<p className="text-muted-foreground">
+					Collecting telemetry has a cost—CPU, memory, network bandwidth, and
+					storage. ContractSpec provides several mechanisms to control overhead:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Sampling</strong> – Trace only a percentage of requests
+						(e.g., 10%)
+					</li>
+					<li>
+						<strong>Adaptive sampling</strong> – Automatically reduce sampling
+						rate under high load
+					</li>
+					<li>
+						<strong>Tail-based sampling</strong> – Keep traces for failed
+						requests, sample successful ones
+					</li>
+					<li>
+						<strong>Field redaction</strong> – Remove sensitive data from traces
+						and logs
+					</li>
+					<li>
+						<strong>Aggregation</strong> – Pre-aggregate metrics before sending
+						to reduce network traffic
+					</li>
+				</ul>
+			</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 high-level metrics (request rate, error rate, latency)
-            and add more detailed instrumentation as needed.
-          </li>
-          <li>
-            Use structured logging—log events with structured fields, not
-            free-form text.
-          </li>
-          <li>
-            Set up alerts for critical metrics so you're notified when things go
-            wrong.
-          </li>
-          <li>
-            Use traces to debug complex issues—they show the complete picture of
-            a request.
-          </li>
-          <li>
-            Redact sensitive data from logs and traces to comply with privacy
-            regulations.
-          </li>
-          <li>
-            Review dashboards regularly to understand normal behavior—this makes
-            anomalies easier to spot.
-          </li>
-          <li>
-            Use sampling to control costs, but always trace errors and slow
-            requests.
-          </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 high-level metrics (request rate, error rate, latency)
+						and add more detailed instrumentation as needed.
+					</li>
+					<li>
+						Use structured logging—log events with structured fields, not
+						free-form text.
+					</li>
+					<li>
+						Set up alerts for critical metrics so you're notified when things go
+						wrong.
+					</li>
+					<li>
+						Use traces to debug complex issues—they show the complete picture of
+						a request.
+					</li>
+					<li>
+						Redact sensitive data from logs and traces to comply with privacy
+						regulations.
+					</li>
+					<li>
+						Review dashboards regularly to understand normal behavior—this makes
+						anomalies easier to spot.
+					</li>
+					<li>
+						Use sampling to control costs, but always trace errors and slow
+						requests.
+					</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/advanced/mcp" className="btn-ghost">
-          Previous: MCP Adapters
-        </Link>
-        <Link href="/docs/comparison" className="btn-primary">
-          Next: Comparison <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/advanced/mcp" className="btn-ghost">
+					Previous: MCP Adapters
+				</Link>
+				<Link href="/docs/comparison" className="btn-primary">
+					Next: Comparison <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }