@contractspec/bundle.library 3.7.5 → 3.7.7

package/src/components/docs/specs/SpecsWorkflowsPage.tsx

@@ -8,95 +8,95 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function SpecsWorkflowsPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Workflows</h1>
-        <p className="text-muted-foreground">
-          A <strong>WorkflowSpec</strong> orchestrates multi-step processes. It
-          defines the sequence of operations, handles failures with retries and
-          compensation, and provides observability into long-running tasks.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Workflows</h1>
+				<p className="text-muted-foreground">
+					A <strong>WorkflowSpec</strong> orchestrates multi-step processes. It
+					defines the sequence of operations, handles failures with retries and
+					compensation, and provides observability into long-running tasks.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Core concepts</h2>
-        <div className="space-y-3">
-          <div>
-            <h3 className="text-lg font-semibold">Identifiers</h3>
-            <p className="text-muted-foreground">
-              Each workflow has a unique{' '}
-              <code className="bg-background/50 rounded px-2 py-1">
-                workflowId
-              </code>{' '}
-              and a{' '}
-              <code className="bg-background/50 rounded px-2 py-1">
-                version
-              </code>
-              . This allows you to run multiple versions of the same workflow
-              simultaneously during migrations or A/B tests.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Steps</h3>
-            <p className="text-muted-foreground">
-              A workflow is composed of <strong>steps</strong>. Each step
-              invokes a{' '}
-              <Link
-                href="/docs/specs/capabilities"
-                className="text-violet-400 hover:text-violet-300"
-              >
-                CapabilitySpec
-              </Link>
-              , passes inputs, and receives outputs. Steps can run sequentially
-              or in parallel.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Transitions</h3>
-            <p className="text-muted-foreground">
-              <strong>Transitions</strong> define the flow between steps. They
-              can be conditional (e.g., "if payment succeeds, go to step 3;
-              otherwise, go to step 5") or unconditional.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Retries</h3>
-            <p className="text-muted-foreground">
-              If a step fails, the workflow can retry it with exponential
-              backoff. You specify the maximum number of retries and the backoff
-              strategy in the spec.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Compensation</h3>
-            <p className="text-muted-foreground">
-              When a workflow fails partway through,{' '}
-              <strong>compensation</strong> steps undo the effects of completed
-              steps (e.g., refunding a payment, releasing a reservation). This
-              ensures consistency even in failure scenarios.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">SLAs</h3>
-            <p className="text-muted-foreground">
-              You can define Service Level Agreements (SLAs) for each step or
-              the entire workflow. If a step exceeds its SLA, the system can
-              trigger alerts or escalations.
-            </p>
-          </div>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Core concepts</h2>
+				<div className="space-y-3">
+					<div>
+						<h3 className="font-semibold text-lg">Identifiers</h3>
+						<p className="text-muted-foreground">
+							Each workflow has a unique{' '}
+							<code className="rounded bg-background/50 px-2 py-1">
+								workflowId
+							</code>{' '}
+							and a{' '}
+							<code className="rounded bg-background/50 px-2 py-1">
+								version
+							</code>
+							. This allows you to run multiple versions of the same workflow
+							simultaneously during migrations or A/B tests.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Steps</h3>
+						<p className="text-muted-foreground">
+							A workflow is composed of <strong>steps</strong>. Each step
+							invokes a{' '}
+							<Link
+								href="/docs/specs/capabilities"
+								className="text-violet-400 hover:text-violet-300"
+							>
+								CapabilitySpec
+							</Link>
+							, passes inputs, and receives outputs. Steps can run sequentially
+							or in parallel.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Transitions</h3>
+						<p className="text-muted-foreground">
+							<strong>Transitions</strong> define the flow between steps. They
+							can be conditional (e.g., "if payment succeeds, go to step 3;
+							otherwise, go to step 5") or unconditional.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Retries</h3>
+						<p className="text-muted-foreground">
+							If a step fails, the workflow can retry it with exponential
+							backoff. You specify the maximum number of retries and the backoff
+							strategy in the spec.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Compensation</h3>
+						<p className="text-muted-foreground">
+							When a workflow fails partway through,{' '}
+							<strong>compensation</strong> steps undo the effects of completed
+							steps (e.g., refunding a payment, releasing a reservation). This
+							ensures consistency even in failure scenarios.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">SLAs</h3>
+						<p className="text-muted-foreground">
+							You can define Service Level Agreements (SLAs) for each step or
+							the entire workflow. If a step exceeds its SLA, the system can
+							trigger alerts or escalations.
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">
-          Example WorkflowSpec (TypeScript)
-        </h2>
-        <p className="text-muted-foreground">
-          Here's a simplified example of a payment workflow 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 { defineWorkflow } from '@contractspec/lib.contracts-spec/workflow';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">
+					Example WorkflowSpec (TypeScript)
+				</h2>
+				<p className="text-muted-foreground">
+					Here's a simplified example of a payment workflow 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 { defineWorkflow } from '@contractspec/lib.contracts-spec/workflow';
 import { ValidatePaymentMethod, ChargePayment, SendEmail } from './specs';
 
 export const PaymentFlow = defineWorkflow({
@@ -149,77 +149,77 @@ export const PaymentFlow = defineWorkflow({
     alertOnBreach: true,
   },
 });`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Triggers</h2>
-        <p className="text-muted-foreground">
-          Workflows can be triggered in several ways:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Manual invocation</strong> – A user or system calls the
-            workflow via an API endpoint.
-          </li>
-          <li>
-            <strong>Event-driven</strong> – The workflow starts automatically
-            when a specific event occurs (e.g., a new order is created).
-          </li>
-          <li>
-            <strong>Scheduled</strong> – The workflow runs on a cron schedule
-            (e.g., nightly batch processing).
-          </li>
-          <li>
-            <strong>Chained</strong> – One workflow can invoke another as a
-            step.
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Triggers</h2>
+				<p className="text-muted-foreground">
+					Workflows can be triggered in several ways:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Manual invocation</strong> – A user or system calls the
+						workflow via an API endpoint.
+					</li>
+					<li>
+						<strong>Event-driven</strong> – The workflow starts automatically
+						when a specific event occurs (e.g., a new order is created).
+					</li>
+					<li>
+						<strong>Scheduled</strong> – The workflow runs on a cron schedule
+						(e.g., nightly batch processing).
+					</li>
+					<li>
+						<strong>Chained</strong> – One workflow can invoke another as a
+						step.
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Monitoring and versioning</h2>
-        <p className="text-muted-foreground">
-          ContractSpec automatically instruments workflows with telemetry. You
-          can view:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>Real-time execution status for each step</li>
-          <li>Historical run data and success/failure rates</li>
-          <li>Latency distributions and SLA compliance</li>
-          <li>Compensation events and retry attempts</li>
-        </ul>
-        <p className="text-muted-foreground">
-          When you update a workflow, you increment its version. Running
-          workflows continue on their original version, while new invocations
-          use the latest version. This allows safe, zero-downtime deployments.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Monitoring and versioning</h2>
+				<p className="text-muted-foreground">
+					ContractSpec automatically instruments workflows with telemetry. You
+					can view:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>Real-time execution status for each step</li>
+					<li>Historical run data and success/failure rates</li>
+					<li>Latency distributions and SLA compliance</li>
+					<li>Compensation events and retry attempts</li>
+				</ul>
+				<p className="text-muted-foreground">
+					When you update a workflow, you increment its version. Running
+					workflows continue on their original version, while new invocations
+					use the latest version. This allows safe, zero-downtime deployments.
+				</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>
-            Keep steps idempotent – they should be safe to retry without side
-            effects.
-          </li>
-          <li>
-            Define compensation for any step that modifies external state.
-          </li>
-          <li>Use meaningful step IDs that describe the operation.</li>
-          <li>Set realistic SLAs and monitor them in production.</li>
-          <li>Test failure scenarios locally 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>
+						Keep steps idempotent – they should be safe to retry without side
+						effects.
+					</li>
+					<li>
+						Define compensation for any step that modifies external state.
+					</li>
+					<li>Use meaningful step IDs that describe the operation.</li>
+					<li>Set realistic SLAs and monitor them in production.</li>
+					<li>Test failure scenarios locally before deploying.</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/specs/capabilities" className="btn-ghost">
-          Previous: Capabilities
-        </Link>
-        <Link href="/docs/safety" className="btn-primary">
-          Next: Safety Features <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/specs/capabilities" className="btn-ghost">
+					Previous: Capabilities
+				</Link>
+				<Link href="/docs/safety" className="btn-primary">
+					Next: Safety Features <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

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

@@ -1,6 +1,6 @@
-export { SpecsOverviewPage } from './SpecsOverviewPage';
 export { SpecsCapabilitiesPage } from './SpecsCapabilitiesPage';
 export { SpecsDataViewsPage } from './SpecsDataViewsPage';
-export { SpecsWorkflowsPage } from './SpecsWorkflowsPage';
-export { SpecsPolicyPage } from './SpecsPolicyPage';
 export { SpecsOverlaysPage } from './SpecsOverlaysPage';
+export { SpecsOverviewPage } from './SpecsOverviewPage';
+export { SpecsPolicyPage } from './SpecsPolicyPage';
+export { SpecsWorkflowsPage } from './SpecsWorkflowsPage';

package/src/components/docs/studio/StudioBYOKPage.tsx

@@ -1,15 +1,15 @@
 import Link from '@contractspec/lib.ui-link';
 
 export function StudioBYOKPage() {
-  return (
-    <main className="space-y-6 py-12">
-      <h1 className="text-3xl font-bold">Studio docs moved</h1>
-      <p className="text-muted-foreground text-sm">
-        Security and BYOK guidance now lives in the Studio app docs.
-      </p>
-      <Link href="https://www.contractspec.studio/docs" className="btn-primary">
-        Open Studio docs
-      </Link>
-    </main>
-  );
+	return (
+		<main className="space-y-6 py-12">
+			<h1 className="font-bold text-3xl">Studio docs moved</h1>
+			<p className="text-muted-foreground text-sm">
+				Security and BYOK guidance now lives in the Studio app docs.
+			</p>
+			<Link href="https://www.contractspec.studio/docs" className="btn-primary">
+				Open Studio docs
+			</Link>
+		</main>
+	);
 }

package/src/components/docs/studio/StudioDeploymentsPage.tsx

@@ -1,15 +1,15 @@
 import Link from '@contractspec/lib.ui-link';
 
 export function StudioDeploymentsPage() {
-  return (
-    <main className="space-y-6 py-12">
-      <h1 className="text-3xl font-bold">Studio docs moved</h1>
-      <p className="text-muted-foreground text-sm">
-        Deployment guidance now lives in the Studio app docs.
-      </p>
-      <Link href="https://www.contractspec.studio/docs" className="btn-primary">
-        Open Studio docs
-      </Link>
-    </main>
-  );
+	return (
+		<main className="space-y-6 py-12">
+			<h1 className="font-bold text-3xl">Studio docs moved</h1>
+			<p className="text-muted-foreground text-sm">
+				Deployment guidance now lives in the Studio app docs.
+			</p>
+			<Link href="https://www.contractspec.studio/docs" className="btn-primary">
+				Open Studio docs
+			</Link>
+		</main>
+	);
 }

package/src/components/docs/studio/StudioGettingStartedPage.tsx

@@ -1,15 +1,15 @@
 import Link from '@contractspec/lib.ui-link';
 
 export function StudioGettingStartedPage() {
-  return (
-    <main className="space-y-6 py-12">
-      <h1 className="text-3xl font-bold">Studio docs moved</h1>
-      <p className="text-muted-foreground text-sm">
-        The latest getting-started guide now lives in the Studio app docs.
-      </p>
-      <Link href="https://www.contractspec.studio/docs" className="btn-primary">
-        Open Studio docs
-      </Link>
-    </main>
-  );
+	return (
+		<main className="space-y-6 py-12">
+			<h1 className="font-bold text-3xl">Studio docs moved</h1>
+			<p className="text-muted-foreground text-sm">
+				The latest getting-started guide now lives in the Studio app docs.
+			</p>
+			<Link href="https://www.contractspec.studio/docs" className="btn-primary">
+				Open Studio docs
+			</Link>
+		</main>
+	);
 }

package/src/components/docs/studio/StudioIntegrationsPage.tsx

@@ -1,15 +1,15 @@
 import Link from '@contractspec/lib.ui-link';
 
 export function StudioIntegrationsPage() {
-  return (
-    <main className="space-y-6 py-12">
-      <h1 className="text-3xl font-bold">Studio docs moved</h1>
-      <p className="text-muted-foreground text-sm">
-        Integration guides now live in the Studio app docs.
-      </p>
-      <Link href="https://www.contractspec.studio/docs" className="btn-primary">
-        Open Studio docs
-      </Link>
-    </main>
-  );
+	return (
+		<main className="space-y-6 py-12">
+			<h1 className="font-bold text-3xl">Studio docs moved</h1>
+			<p className="text-muted-foreground text-sm">
+				Integration guides now live in the Studio app docs.
+			</p>
+			<Link href="https://www.contractspec.studio/docs" className="btn-primary">
+				Open Studio docs
+			</Link>
+		</main>
+	);
 }

package/src/components/docs/studio/StudioOverviewPage.tsx

@@ -1,81 +1,102 @@
 import Link from '@contractspec/lib.ui-link';
 
-const coreLoop = [
-  {
-    title: 'Evidence',
-    body: 'Ingest product signals from meetings, support, analytics, code reviews, docs, and Slack.',
-  },
-  {
-    title: 'Correlation',
-    body: 'Cluster signals into scored patterns with hybrid heuristics plus AI signature extraction.',
-  },
-  {
-    title: 'Decision',
-    body: 'Create timeboxed focus zones and evidence-backed briefs with citation chains.',
-  },
-  {
-    title: 'Change',
-    body: 'Compile patch intents into spec diffs, deterministic impact reports, and task packs.',
-  },
-  {
-    title: 'Export',
-    body: 'Push deliverables to Linear, Jira, Notion, and GitHub with full decision context.',
-  },
-  {
-    title: 'Check + Autopilot',
-    body: 'Verify outcomes, capture learning dividends, and automate safely with policy gates.',
-  },
+const studioAdds = [
+	'decision workflows that turn product evidence into proposed spec changes',
+	'governed execution loops and task packs on top of the OSS contract layer',
+	'operator surfaces for teams that need a managed workflow instead of raw building blocks',
+	'deeper product-facing workflows that sit above the open system without replacing it',
 ];
 
 export function StudioOverviewPage() {
-  return (
-    <main className="space-y-12 py-16">
-      <section className="section-padding space-y-4">
-        <p className="text-xs font-semibold tracking-[0.3em] text-violet-400 uppercase">
-          ContractSpec Studio
-        </p>
-        <h1 className="text-4xl font-bold md:text-5xl">
-          Compiler for product truth
-        </h1>
-        <p className="text-muted-foreground max-w-3xl text-lg">
-          ContractSpec Studio is the AI-powered product decision engine built on
-          top of ContractSpec. It turns product signals into spec-first
-          deliverables through a deterministic loop:
-        </p>
-        <p className="text-muted-foreground font-mono text-sm">
-          Evidence -&gt; Correlation -&gt; Decision -&gt; Change -&gt; Export
-          -&gt; Check -&gt; Notify -&gt; Autopilot
-        </p>
-      </section>
+	return (
+		<main className="space-y-10">
+			<section className="space-y-3">
+				<p className="editorial-kicker">Studio bridge</p>
+				<h1 className="font-serif text-4xl tracking-[-0.04em] md:text-5xl">
+					Studio is the operating layer built on top of OSS ContractSpec.
+				</h1>
+				<p className="max-w-3xl text-lg text-muted-foreground leading-8">
+					Start with the open system first: contracts, generated surfaces,
+					runtimes, integrations, and safe regeneration. Move to Studio when a
+					team wants the product-facing workflow, decision loop, and managed
+					operator surface on top of that foundation.
+				</p>
+			</section>
 
-      <section className="section-padding grid gap-4 md:grid-cols-2">
-        {coreLoop.map((step) => (
-          <article key={step.title} className="card-subtle space-y-2 p-6">
-            <h2 className="text-xl font-semibold">{step.title}</h2>
-            <p className="text-muted-foreground text-sm">{step.body}</p>
-          </article>
-        ))}
-      </section>
+			<section className="editorial-proof-strip">
+				<div className="editorial-stat">
+					<span className="editorial-label">What stays open</span>
+					<span className="editorial-stat-value">
+						contracts, code, generated surfaces
+					</span>
+				</div>
+				<p className="max-w-2xl text-muted-foreground text-sm leading-7">
+					Studio is additive. It does not replace the OSS source of truth or ask
+					teams to abandon their contract layer.
+				</p>
+			</section>
 
-      <section className="section-padding card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-semibold">Use Studio now</h2>
-        <p className="text-muted-foreground text-sm">
-          Studio is live and runs the same spec-first grammar as the OSS
-          compiler. Keep your contracts, keep your code, and add a full
-          decision-to-change workflow on top.
-        </p>
-        <div className="flex flex-wrap gap-3">
-          <Link href="https://www.contractspec.studio" className="btn-primary">
-            Try Studio
-          </Link>
-          <Link
-            href="https://www.contractspec.studio/docs"
-            className="btn-ghost"
-          >
-            Read Studio docs
-          </Link>
-        </div>
-      </section>
-    </main>
-  );
+			<section className="grid gap-4 md:grid-cols-2">
+				<article className="editorial-panel space-y-4">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Start with OSS when you need:
+					</h2>
+					<ul className="editorial-list">
+						<li>
+							<span className="editorial-list-marker" />
+							<span>
+								explicit contracts and generated surfaces you still own
+							</span>
+						</li>
+						<li>
+							<span className="editorial-list-marker" />
+							<span>incremental adoption inside an existing codebase</span>
+						</li>
+						<li>
+							<span className="editorial-list-marker" />
+							<span>
+								runtime governance, integrations, and safe regeneration without
+								a managed operating product
+							</span>
+						</li>
+					</ul>
+				</article>
+
+				<article className="editorial-panel space-y-4">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Adopt Studio when you need:
+					</h2>
+					<ul className="editorial-list">
+						{studioAdds.map((item) => (
+							<li key={item}>
+								<span className="editorial-list-marker" />
+								<span>{item}</span>
+							</li>
+						))}
+					</ul>
+				</article>
+			</section>
+
+			<section className="editorial-panel space-y-4">
+				<h2 className="font-serif text-3xl tracking-[-0.03em]">
+					Go to the Studio product docs for the full product surface
+				</h2>
+				<p className="text-muted-foreground text-sm leading-7">
+					The OSS site keeps this section intentionally short. Deep Studio
+					product guidance belongs in the Studio app docs.
+				</p>
+				<div className="flex flex-wrap gap-3">
+					<Link href="https://www.contractspec.studio" className="btn-primary">
+						Open Studio
+					</Link>
+					<Link
+						href="https://www.contractspec.studio/docs"
+						className="btn-ghost"
+					>
+						Read Studio docs
+					</Link>
+				</div>
+			</section>
+		</main>
+	);
 }