@contractspec/bundle.library 0.0.0-canary-20260206014742

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

@@ -0,0 +1,113 @@
+import Link from '@contractspec/lib.ui-link';
+import { ChevronRight } from 'lucide-react';
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
+
+export function LibrariesUIKitPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">@contractspec/lib.ui-kit</h1>
+        <p className="text-muted-foreground">
+          Universal UI components for React Native and Web, built on top of
+          <code>nativewind</code> and <code>@rn-primitives</code>.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Installation</h2>
+        <InstallCommand package="@contractspec/lib.ui-kit" />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Key Features</h2>
+        <ul className="text-muted-foreground list-inside list-disc space-y-2">
+          <li>
+            <strong>Universal</strong>: Components render natively on
+            iOS/Android and as standard HTML on web
+          </li>
+          <li>
+            <strong>Styled with NativeWind</strong>: Uses Tailwind CSS classes
+            for styling
+          </li>
+          <li>
+            <strong>Accessible</strong>: Leverages <code>@rn-primitives</code>{' '}
+            (Radix UI for Native)
+          </li>
+          <li>
+            <strong>Atomic Design</strong>: Exports atoms, molecules, and
+            organisms
+          </li>
+        </ul>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Example Usage</h2>
+        <CodeBlock
+          language="tsx"
+          code={`import { Button } from '@contractspec/lib.ui-kit/ui/button';
+import { Text } from '@contractspec/lib.ui-kit/ui/text';
+import { Card, CardHeader, CardTitle, CardContent } from '@contractspec/lib.ui-kit/ui/card';
+
+export function MyComponent() {
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent className="gap-4">
+        <Text>This works on Web and Native.</Text>
+        <Button onPress={() => console.log('Clicked!')}>
+          Click me
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}`}
+        />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Core Components</h2>
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="card-subtle p-4">
+            <h3 className="mb-2 font-semibold">Form Controls</h3>
+            <ul className="text-muted-foreground space-y-1 text-sm">
+              <li>Button</li>
+              <li>Input</li>
+              <li>Checkbox</li>
+              <li>Switch</li>
+              <li>Select</li>
+            </ul>
+          </div>
+          <div className="card-subtle p-4">
+            <h3 className="mb-2 font-semibold">Layout</h3>
+            <ul className="text-muted-foreground space-y-1 text-sm">
+              <li>Card</li>
+              <li>Stack</li>
+              <li>Separator</li>
+              <li>Sheet</li>
+            </ul>
+          </div>
+          <div className="card-subtle p-4">
+            <h3 className="mb-2 font-semibold">Feedback</h3>
+            <ul className="text-muted-foreground space-y-1 text-sm">
+              <li>Alert</li>
+              <li>Skeleton</li>
+              <li>Progress</li>
+              <li>Tooltip</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4 pt-4">
+        <Link href="/docs/libraries/schema" className="btn-ghost">
+          Previous: Schema
+        </Link>
+        <Link href="/docs/libraries/design-system" className="btn-primary">
+          Next: Design System <ChevronRight size={16} />
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
+import Link from '@contractspec/lib.ui-link';
+import { ChevronRight } from 'lucide-react';
+
+export function LibrariesWorkflowComposerPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Workflow Composer</h1>
+        <p className="text-muted-foreground text-lg">
+          `@contractspec/lib.workflow-composer` injects
+          tenant-/role-/device-specific steps into base WorkflowSpecs and keeps
+          transitions valid.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Installation</h2>
+        <InstallCommand package="@contractspec/lib.workflow-composer" />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Register extensions</h2>
+        <CodeBlock
+          language="typescript"
+          code={`const composer = new WorkflowComposer();
+
+composer.register({
+  workflow: 'billing.invoiceApproval',
+  tenantId: 'acme',
+  customSteps: [
+    {
+      after: 'validate-invoice',
+      inject: {
+        id: 'acme-legal',
+        type: 'human',
+        label: 'ACME Legal Review',
+      },
+      transitionTo: 'final-approval',
+    },
+  ],
+  hiddenSteps: ['internal-audit'],
+});`}
+        />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Compose at runtime</h2>
+        <CodeBlock
+          language="typescript"
+          code={`const tenantWorkflow = composer.compose({
+  base: BaseInvoiceWorkflow,
+  tenantId: 'acme',
+});
+
+workflowRunner.execute(tenantWorkflow, ctx);`}
+        />
+      </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/workflows" className="btn-primary">
+          Next: Workflow Runtime <ChevronRight size={16} />
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,111 @@
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
+import Link from '@contractspec/lib.ui-link';
+import { ChevronRight } from 'lucide-react';
+
+export function LibrariesWorkflowsPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Workflow Runtime Library</h1>
+        <p className="text-muted-foreground text-lg">
+          The <code>@contractspec/lib.contracts/workflow</code> library provides
+          the core <code>WorkflowRunner</code> for executing stateful, durable
+          workflows.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Installation</h2>
+        <InstallCommand package="@contractspec/lib.contracts" />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">WorkflowRunner</h2>
+        <p className="text-muted-foreground">
+          The runner manages execution state, step transitions, retries, and
+          compensation.
+        </p>
+
+        <CodeBlock
+          language="typescript"
+          code={`import { WorkflowRunner } from '@contractspec/lib.contracts/workflow/runner';
+import { InMemoryStateStore } from '@contractspec/lib.contracts/workflow/adapters/memory-store';
+import { WorkflowRegistry } from '@contractspec/lib.contracts/workflow/spec';
+
+const registry = new WorkflowRegistry();
+registry.register(MyWorkflow);
+
+const runner = new WorkflowRunner({
+  registry,
+  stateStore: new InMemoryStateStore(),
+  opExecutor: async (op, input, ctx) => {
+    // Execute operation using your adapter (REST, GraphQL, etc.)
+    return await myAdapter.execute(op, input);
+  },
+});
+
+// Start a workflow
+const workflowId = await runner.start('my.workflow', 1, { userId: '123' });
+
+// Execute next step (usually called by a worker or queue consumer)
+await runner.executeStep(workflowId);`}
+        />
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">State Persistence</h2>
+        <p className="text-muted-foreground">
+          The runner relies on a <code>StateStore</code> to persist workflow
+          execution history. ContractSpec ships with:
+        </p>
+        <ul className="text-muted-foreground list-disc space-y-2 pl-6">
+          <li>
+            <code>InMemoryStateStore</code> - for testing and development.
+          </li>
+          <li>
+            <code>PrismaStateStore</code> - for production using Prisma ORM.
+          </li>
+        </ul>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Events</h2>
+        <p className="text-muted-foreground">
+          The runner emits events that you can subscribe to for monitoring:
+        </p>
+        <ul className="text-muted-foreground list-disc space-y-2 pl-6">
+          <li>
+            <code>workflow.started</code>
+          </li>
+          <li>
+            <code>workflow.step_completed</code>
+          </li>
+          <li>
+            <code>workflow.step_failed</code>
+          </li>
+          <li>
+            <code>workflow.step_retrying</code>
+          </li>
+          <li>
+            <code>workflow.completed</code>
+          </li>
+          <li>
+            <code>workflow.cancelled</code>
+          </li>
+          <li>
+            <code>workflow.compensation_step_completed</code>
+          </li>
+        </ul>
+      </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/data-views" className="btn-primary">
+          Next: Data Views <ChevronRight size={16} />
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+export { LibrariesOverviewPage } from './LibrariesOverviewPage';
+export { LibrariesContractsPage } from './LibrariesContractsPage';
+export { LibrariesAiAgentPage } from './LibrariesAiAgentPage';
+export { LibrariesAnalyticsPage } from './LibrariesAnalyticsPage';
+export { LibrariesAccessibilityPage } from './LibrariesAccessibilityPage';
+export { LibrariesContentGenPage } from './LibrariesContentGenPage';
+export { LibrariesCostTrackingPage } from './LibrariesCostTrackingPage';
+export { LibrariesDataBackendPage } from './LibrariesDataBackendPage';
+export { LibrariesDataViewsPage } from './LibrariesDataViewsPage';
+export { LibrariesDesignSystemPage } from './LibrariesDesignSystemPage';
+export { LibrariesEvolutionPage } from './LibrariesEvolutionPage';
+export { LibrariesGraphQLPage } from './LibrariesGraphQLPage';
+export { LibrariesGrowthPage } from './LibrariesGrowthPage';
+export { LibrariesMultiTenancyPage } from './LibrariesMultiTenancyPage';
+export { LibrariesObservabilityPage } from './LibrariesObservabilityPage';
+export { LibrariesOverlayEnginePage } from './LibrariesOverlayEnginePage';
+export { LibrariesPersonalizationPage } from './LibrariesPersonalizationPage';
+export { LibrariesProgressiveDeliveryPage } from './LibrariesProgressiveDeliveryPage';
+export { LibrariesResiliencePage } from './LibrariesResiliencePage';
+export { LibrariesRuntimePage } from './LibrariesRuntimePage';
+export { LibrariesSchemaPage } from './LibrariesSchemaPage';
+export { LibrariesSLOPage } from './LibrariesSLOPage';
+export { LibrariesSupportBotPage } from './LibrariesSupportBotPage';
+export { LibrariesTestingPage } from './LibrariesTestingPage';
+export { LibrariesUIKitPage } from './LibrariesUIKitPage';
+export { LibrariesWorkflowsPage } from './LibrariesWorkflowsPage';
+export { LibrariesWorkflowComposerPage } from './LibrariesWorkflowComposerPage';

package/src/components/docs/manifesto/ManifestoPage.tsx

@@ -0,0 +1,138 @@
+// export const metadata = {
+//   title: 'Manifesto: ContractSpec',
+//   description:
+//     'Our philosophy: compiler not prison, no lock-in, standard tech, incremental adoption, AI governance.',
+// };
+
+export function ManifestoPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Manifesto</h1>
+        <p className="text-muted-foreground text-lg">
+          ContractSpec is the deterministic, spec-first compiler that keeps
+          AI-written software coherent, safe, and regenerable. We're building
+          the safety layer for AI-coded systems.
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        <div className="space-y-3">
+          <h2 className="text-2xl font-bold">Compiler, not prison</h2>
+          <p className="text-muted-foreground">
+            ContractSpec is a tool in your toolchain, not a platform you're
+            locked into. Like TypeScript compiles to JavaScript, ContractSpec
+            compiles specs to standard code. The generated output is
+            yours—readable, modifiable, and ejectable at any time.
+          </p>
+          <p className="text-muted-foreground">
+            We believe developers should own their code. There's no proprietary
+            runtime, no vendor-specific abstractions, no magic that hides
+            complexity. You can always see what ContractSpec generates,
+            understand it, and take it with you if you leave.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <h2 className="text-2xl font-bold">Standard tech, no magic</h2>
+          <p className="text-muted-foreground">
+            Everything ContractSpec generates uses technology you already know:
+            TypeScript, Zod, Prisma, GraphQL, REST, React. There's no new
+            language to learn, no YAML configuration hell, no DSL that only
+            works in our ecosystem.
+          </p>
+          <p className="text-muted-foreground">
+            Specs are just TypeScript. If you can write{' '}
+            <code className="rounded bg-violet-500/10 px-1.5 py-0.5 text-sm">
+              z.object({'{'} name: z.string() {'}'})
+            </code>
+            , you can write a ContractSpec. Your existing skills transfer
+            directly.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <h2 className="text-2xl font-bold">Incremental adoption</h2>
+          <p className="text-muted-foreground">
+            You don't rewrite your app to use ContractSpec. You stabilize one
+            module at a time. Start with a single API endpoint, a single data
+            model, a single contract. See the value. Expand gradually.
+          </p>
+          <p className="text-muted-foreground">
+            This isn't a big-bang migration. It's a safety layer you add
+            incrementally to existing AI-generated chaos. No pressure. No
+            deadlines. Your pace.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <h2 className="text-2xl font-bold">AI governance</h2>
+          <p className="text-muted-foreground">
+            In 2025, AI agents generate enormous amounts of code. But they can't
+            enforce invariants, they break multi-surface consistency, and they
+            hallucinate refactors. The result is code that's hard to maintain
+            and dangerous to trust.
+          </p>
+          <p className="text-muted-foreground">
+            ContractSpec provides the governance layer. Contracts define what
+            the system <em>should</em> do. AI agents read specs, not
+            implementations. Code that violates contracts gets flagged and
+            rejected before it can cause damage.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <h2 className="text-2xl font-bold">Multi-surface consistency</h2>
+          <p className="text-muted-foreground">
+            One spec generates API endpoints, database schemas, UI types, event
+            definitions, and MCP tools. All surfaces stay in sync because they
+            share the same source of truth.
+          </p>
+          <p className="text-muted-foreground">
+            No more chasing drift between your API and your database. No more
+            frontend types that don't match backend contracts. One change to the
+            spec, all surfaces update consistently.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <h2 className="text-2xl font-bold">Safe regeneration</h2>
+          <p className="text-muted-foreground">
+            You can regenerate code at any time without fear. Specs enforce
+            invariants. Breaking changes are caught at compile time, not in
+            production. Roll back to any previous version with confidence.
+          </p>
+          <p className="text-muted-foreground">
+            This is the promise of spec-first development: the code is derived
+            from the spec, so regenerating it is always safe. No more "don't
+            touch that file" warnings. No more fear of AI-generated spaghetti.
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Join us</h2>
+        <p className="text-muted-foreground">
+          We're building the safety layer for AI-coded systems. If you believe
+          developers should own their code, that AI needs governance, and that
+          standard tech beats proprietary magic—we'd love to have you.
+        </p>
+        <p className="text-muted-foreground">
+          You keep your app. We stabilize it, one module at a time. You own the
+          code. It's standard tech.{' '}
+          <span className="font-semibold text-violet-400">
+            We're the compiler, not the prison.
+          </span>
+        </p>
+        <div className="flex flex-wrap gap-4 pt-4">
+          <a href="/install" className="btn-primary">
+            Install OSS Core
+          </a>
+          <a href="/contact#waitlist" className="btn-ghost">
+            Join Studio Waitlist
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/docs/ops/AutoEvolutionOpsPage.tsx

@@ -0,0 +1,103 @@
+// export const metadata: Metadata = {
+//   title: 'Auto-Evolution Runbook | ContractSpec',
+//   description:
+//     'Operate the telemetry → intent → spec pipeline with guardrails and approvals.',
+// };
+
+export function OpsAutoEvolutionPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Auto-Evolution Runbook</h1>
+        <p className="text-muted-foreground text-lg">
+          Configure sampling, approvals, experiments, and golden tests so your
+          app keeps improving without regressions.
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold">Pipeline overview</h2>
+        <ol className="text-muted-foreground list-decimal space-y-2 pl-6 text-sm">
+          <li>
+            Tracing middleware emits telemetry samples with tenant/user context.
+          </li>
+          <li>IntentAggregator batches samples (15m window, configurable).</li>
+          <li>IntentDetector raises error/latency/throughput signals.</li>
+          <li>SpecGenerator produces proposals with confidence scores.</li>
+          <li>ApprovalWorkflow routes low-confidence suggestions to humans.</li>
+          <li>
+            SpecExperimentRegistry rolls out approved variants using guardrails.
+          </li>
+          <li>
+            TrafficRecorder captures new traffic and GoldenTestGenerator outputs
+            suites.
+          </li>
+        </ol>
+      </div>
+
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold">Key environment variables</h2>
+        <pre className="bg-muted rounded-lg border p-4 text-sm">
+          {`# Telemetry sampling
+AUTO_EVOLUTION_SAMPLE_RATE=0.02
+AUTO_EVOLUTION_WINDOW_MS=900000
+
+# Suggestion thresholds
+AUTO_EVOLUTION_MIN_CONFIDENCE=0.55
+AUTO_EVOLUTION_AUTO_APPROVE=0.2
+
+# Guardrails (fallback defaults)
+AUTO_EVOLUTION_MAX_ERROR_RATE=0.02
+AUTO_EVOLUTION_MAX_P99_MS=500`}
+        </pre>
+      </div>
+
+      <div className="space-y-3">
+        <h2 className="text-2xl font-bold">Operations checklist</h2>
+        <ul className="text-muted-foreground list-disc space-y-2 pl-6 text-sm">
+          <li>
+            Review new `SpecSuggestion` records every morning (UI coming soon;
+            Prisma view today).
+          </li>
+          <li>Keep at least one reviewer per domain on-call for approvals.</li>
+          <li>
+            Attach `SpecExperimentAdapter.trackOutcome` to every runtime
+            adapter.
+          </li>
+          <li>
+            Schedule `contractspec test generate` nightly (or on deploy) to
+            refresh golden suites.
+          </li>
+          <li>
+            Feed `runGoldenTests` into CI to gate merges touching evolved specs.
+          </li>
+        </ul>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {[
+          {
+            title: 'Sampling',
+            description:
+              'Start at 1–2% of traffic. Increase only after sanitization is verified.',
+          },
+          {
+            title: 'Approvals',
+            description:
+              'High-risk ops (money, compliance) should never auto-approve. Use ApprovalWorkflow notes for audit.',
+          },
+          {
+            title: 'On-call alerts',
+            description:
+              'Tie SpecExperimentController rollbacks into PagerDuty/Slack so engineers see guardrail trips immediately.',
+          },
+        ].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>
+  );
+}

package/src/components/docs/ops/DistributedTracingOpsPage.tsx

@@ -0,0 +1,40 @@
+// export const metadata: Metadata = {
+//   title: 'Distributed Tracing Operations | ContractSpec',
+//   description: 'Running and configuring distributed tracing in production.',
+// };
+
+export function OpsDistributedTracingPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Distributed Tracing</h1>
+        <p className="text-muted-foreground text-lg">
+          ContractSpec uses OpenTelemetry (OTel) for distributed tracing. This
+          guide explains how to configure exporters and collectors.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Configuration</h2>
+        <p>Configure the OTel SDK via environment variables:</p>
+        <pre className="bg-muted rounded-lg border p-4 text-sm">
+          {`OTEL_SERVICE_NAME=my-service
+OTEL_EXPORTER_OTLP_ENDPOINT=http://otel-collector:4318
+OTEL_TRACES_SAMPLER=parentbased_traceidratio
+OTEL_TRACES_SAMPLER_ARG=0.1`}
+        </pre>
+      </div>
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-bold">Exporters</h2>
+        <p>By default, the OTLP exporter is used. You can point it to:</p>
+        <ul className="list-disc space-y-2 pl-6">
+          <li>Jaeger</li>
+          <li>Tempo (Grafana)</li>
+          <li>Honeycomb</li>
+          <li>Datadog (via OTel Collector)</li>
+        </ul>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { OpsAutoEvolutionPage } from './AutoEvolutionOpsPage';
+export { OpsDistributedTracingPage } from './DistributedTracingOpsPage';