@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/integrations/IntegrationsStripePage.tsx

@@ -8,49 +8,49 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function IntegrationsStripePage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Stripe</h1>
-        <p className="text-muted-foreground">
-          The Stripe integration enables payment processing, subscription
-          management, and invoicing in your ContractSpec applications. All
-          Stripe operations are type-safe, policy-enforced, and automatically
-          logged.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Stripe</h1>
+				<p className="text-muted-foreground">
+					The Stripe integration enables payment processing, subscription
+					management, and invoicing in your ContractSpec applications. All
+					Stripe operations are type-safe, policy-enforced, and automatically
+					logged.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Setup</h2>
-        <p className="text-muted-foreground">
-          Add your Stripe credentials to your environment variables:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`# .env
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Setup</h2>
+				<p className="text-muted-foreground">
+					Add your Stripe credentials to your environment variables:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`# .env
 STRIPE_SECRET_KEY=sk_test_...
 STRIPE_PUBLISHABLE_KEY=pk_test_...
 STRIPE_WEBHOOK_SECRET=whsec_...`}</pre>
-        </div>
-        <p className="text-muted-foreground text-sm">
-          Get your API keys from the{' '}
-          <a
-            href="https://dashboard.stripe.com/apikeys"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            Stripe Dashboard
-          </a>
-          .
-        </p>
-      </div>
+				</div>
+				<p className="text-muted-foreground text-sm">
+					Get your API keys from the{' '}
+					<a
+						href="https://dashboard.stripe.com/apikeys"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						Stripe Dashboard
+					</a>
+					.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Available capabilities</h2>
-        <div className="space-y-3">
-          <h3 className="text-lg font-semibold">Payment Intents</h3>
-          <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-            <pre>{`capabilityId: stripe-create-payment-intent
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Available capabilities</h2>
+				<div className="space-y-3">
+					<h3 className="font-semibold text-lg">Payment Intents</h3>
+					<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+						<pre>{`capabilityId: stripe-create-payment-intent
 provider:
   type: stripe
   operation: createPaymentIntent
@@ -76,13 +76,13 @@ outputs:
     type: string
   status:
     type: string`}</pre>
-          </div>
-        </div>
+					</div>
+				</div>
 
-        <div className="space-y-3">
-          <h3 className="text-lg font-semibold">Customers</h3>
-          <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-            <pre>{`capabilityId: stripe-create-customer
+				<div className="space-y-3">
+					<h3 className="font-semibold text-lg">Customers</h3>
+					<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+						<pre>{`capabilityId: stripe-create-customer
 provider:
   type: stripe
   operation: createCustomer
@@ -102,13 +102,13 @@ outputs:
     type: string
   email:
     type: string`}</pre>
-          </div>
-        </div>
+					</div>
+				</div>
 
-        <div className="space-y-3">
-          <h3 className="text-lg font-semibold">Subscriptions</h3>
-          <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-            <pre>{`capabilityId: stripe-create-subscription
+				<div className="space-y-3">
+					<h3 className="font-semibold text-lg">Subscriptions</h3>
+					<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+						<pre>{`capabilityId: stripe-create-subscription
 provider:
   type: stripe
   operation: createSubscription
@@ -129,56 +129,56 @@ outputs:
     type: string
   currentPeriodEnd:
     type: timestamp`}</pre>
-          </div>
-        </div>
-      </div>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Webhooks</h2>
-        <p className="text-muted-foreground">
-          ContractSpec automatically handles Stripe webhooks. Configure your
-          webhook endpoint in the Stripe Dashboard:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`https://your-app.com/api/webhooks/stripe`}</pre>
-        </div>
-        <p className="text-muted-foreground">Subscribe to these events:</p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              payment_intent.succeeded
-            </code>
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              payment_intent.payment_failed
-            </code>
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              customer.subscription.created
-            </code>
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              customer.subscription.updated
-            </code>
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              customer.subscription.deleted
-            </code>
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Webhooks</h2>
+				<p className="text-muted-foreground">
+					ContractSpec automatically handles Stripe webhooks. Configure your
+					webhook endpoint in the Stripe Dashboard:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`https://your-app.com/api/webhooks/stripe`}</pre>
+				</div>
+				<p className="text-muted-foreground">Subscribe to these events:</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							payment_intent.succeeded
+						</code>
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							payment_intent.payment_failed
+						</code>
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							customer.subscription.created
+						</code>
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							customer.subscription.updated
+						</code>
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							customer.subscription.deleted
+						</code>
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example workflow</h2>
-        <p className="text-muted-foreground">
-          Here's a complete payment workflow using Stripe:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`workflowId: process-payment
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example workflow</h2>
+				<p className="text-muted-foreground">
+					Here's a complete payment workflow using Stripe:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`workflowId: process-payment
 version: '1.0.0'.0.0
 
 steps:
@@ -215,62 +215,62 @@ steps:
       template: "payment-error"
       data:
         error: $\{error.message}`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Testing</h2>
-        <p className="text-muted-foreground">
-          Use Stripe's test cards for development:
-        </p>
-        <div className="border-border/50 overflow-x-auto rounded-lg border">
-          <table className="w-full text-left text-sm">
-            <thead className="bg-card/50">
-              <tr className="border-border/50 border-b">
-                <th className="px-4 py-3 font-semibold">Card Number</th>
-                <th className="px-4 py-3 font-semibold">Scenario</th>
-              </tr>
-            </thead>
-            <tbody className="divide-border/50 divide-y">
-              <tr>
-                <td className="px-4 py-3 font-mono">4242 4242 4242 4242</td>
-                <td className="px-4 py-3">Successful payment</td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 font-mono">4000 0000 0000 9995</td>
-                <td className="px-4 py-3">Insufficient funds</td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 font-mono">4000 0000 0000 0002</td>
-                <td className="px-4 py-3">Card declined</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Testing</h2>
+				<p className="text-muted-foreground">
+					Use Stripe's test cards for development:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border/50">
+					<table className="w-full text-left text-sm">
+						<thead className="bg-card/50">
+							<tr className="border-border/50 border-b">
+								<th className="px-4 py-3 font-semibold">Card Number</th>
+								<th className="px-4 py-3 font-semibold">Scenario</th>
+							</tr>
+						</thead>
+						<tbody className="divide-y divide-border/50">
+							<tr>
+								<td className="px-4 py-3 font-mono">4242 4242 4242 4242</td>
+								<td className="px-4 py-3">Successful payment</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 font-mono">4000 0000 0000 9995</td>
+								<td className="px-4 py-3">Insufficient funds</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 font-mono">4000 0000 0000 0002</td>
+								<td className="px-4 py-3">Card declined</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</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>Always use test mode during development</li>
-          <li>Verify webhook signatures to prevent fraud</li>
-          <li>Handle idempotency for payment operations</li>
-          <li>Store customer IDs for recurring payments</li>
-          <li>
-            Use metadata to link Stripe objects to your application records
-          </li>
-          <li>Monitor failed payments and retry logic</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>Always use test mode during development</li>
+					<li>Verify webhook signatures to prevent fraud</li>
+					<li>Handle idempotency for payment operations</li>
+					<li>Store customer IDs for recurring payments</li>
+					<li>
+						Use metadata to link Stripe objects to your application records
+					</li>
+					<li>Monitor failed payments and retry logic</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/integrations" className="btn-ghost">
-          Back to Integrations
-        </Link>
-        <Link href="/docs/integrations/postmark" className="btn-primary">
-          Next: Postmark <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/integrations" className="btn-ghost">
+					Back to Integrations
+				</Link>
+				<Link href="/docs/integrations/postmark" className="btn-primary">
+					Next: Postmark <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/integrations/IntegrationsTwilioPage.tsx

@@ -7,30 +7,30 @@ import Link from '@contractspec/lib.ui-link';
 // };
 
 export function IntegrationsTwilioPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Twilio</h1>
-        <p className="text-muted-foreground">
-          Send SMS notifications, alerts, and two-factor authentication codes
-          using Twilio's reliable messaging platform.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Twilio</h1>
+				<p className="text-muted-foreground">
+					Send SMS notifications, alerts, and two-factor authentication codes
+					using Twilio's reliable messaging platform.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Setup</h2>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`# .env
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Setup</h2>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`# .env
 TWILIO_ACCOUNT_SID=...
 TWILIO_AUTH_TOKEN=...
 TWILIO_PHONE_NUMBER=+1234567890`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Sending SMS</h2>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`capabilityId: twilio-send-sms
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Sending SMS</h2>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`capabilityId: twilio-send-sms
 provider:
   type: twilio
   operation: sendSMS
@@ -48,38 +48,38 @@ outputs:
     type: string
   status:
     type: string`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Use cases</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>Order confirmations and shipping updates</li>
-          <li>Two-factor authentication codes</li>
-          <li>Appointment reminders</li>
-          <li>Alert notifications</li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Use cases</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>Order confirmations and shipping updates</li>
+					<li>Two-factor authentication codes</li>
+					<li>Appointment reminders</li>
+					<li>Alert notifications</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>Always use E.164 format for phone numbers (+1234567890)</li>
-          <li>Keep messages under 160 characters to avoid splitting</li>
-          <li>Implement rate limiting to prevent spam</li>
-          <li>Handle delivery failures gracefully</li>
-          <li>Respect opt-out 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>Always use E.164 format for phone numbers (+1234567890)</li>
+					<li>Keep messages under 160 characters to avoid splitting</li>
+					<li>Implement rate limiting to prevent spam</li>
+					<li>Handle delivery failures gracefully</li>
+					<li>Respect opt-out requests</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/integrations/s3" className="btn-ghost">
-          Previous: S3 Storage
-        </Link>
-        <Link href="/docs/integrations/slack" className="btn-primary">
-          Next: Slack Messaging
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/integrations/s3" className="btn-ghost">
+					Previous: S3 Storage
+				</Link>
+				<Link href="/docs/integrations/slack" className="btn-primary">
+					Next: Slack Messaging
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/integrations/IntegrationsWhatsappMetaPage.tsx

@@ -2,21 +2,21 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function IntegrationsWhatsappMetaPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">WhatsApp Meta</h1>
-        <p className="text-muted-foreground">
-          Meta WhatsApp is the primary WhatsApp channel for ContractSpec's
-          messaging runtime, with signed webhook verification and reliable
-          outbound delivery.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">WhatsApp Meta</h1>
+				<p className="text-muted-foreground">
+					Meta WhatsApp is the primary WhatsApp channel for ContractSpec's
+					messaging runtime, with signed webhook verification and reliable
+					outbound delivery.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Required secrets and config</h2>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`// secret payload
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Required secrets and config</h2>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`// secret payload
 {
   "accessToken": "...",
   "appSecret": "...",
@@ -28,63 +28,63 @@ export function IntegrationsWhatsappMetaPage() {
   "phoneNumberId": "120000000001",
   "apiVersion": "v22.0"
 }`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Webhook endpoints</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            Verification challenge:{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              GET /webhooks/whatsapp/meta
-            </code>
-          </li>
-          <li>
-            Inbound messages:{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              POST /webhooks/whatsapp/meta
-            </code>
-          </li>
-          <li>
-            Signatures are validated with{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              x-hub-signature-256
-            </code>
-            .
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Webhook endpoints</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						Verification challenge:{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							GET /webhooks/whatsapp/meta
+						</code>
+					</li>
+					<li>
+						Inbound messages:{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							POST /webhooks/whatsapp/meta
+						</code>
+					</li>
+					<li>
+						Signatures are validated with{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							x-hub-signature-256
+						</code>
+						.
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Workspace mapping</h2>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`CHANNEL_WORKSPACE_MAP_WHATSAPP_META={"120000000001":"workspace-acme"}`}</pre>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Workspace mapping</h2>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`CHANNEL_WORKSPACE_MAP_WHATSAPP_META={"120000000001":"workspace-acme"}`}</pre>
+				</div>
+			</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 verify and app secrets separate from access tokens.</li>
-          <li>
-            Map each phone number ID to a workspace for strict tenant routing.
-          </li>
-          <li>
-            Use Twilio WhatsApp only as fallback when you need active-passive
-            routing.
-          </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 verify and app secrets separate from access tokens.</li>
+					<li>
+						Map each phone number ID to a workspace for strict tenant routing.
+					</li>
+					<li>
+						Use Twilio WhatsApp only as fallback when you need active-passive
+						routing.
+					</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/integrations/github" className="btn-ghost">
-          Previous: GitHub Messaging
-        </Link>
-        <Link href="/docs/integrations/whatsapp-twilio" className="btn-primary">
-          Next: WhatsApp Twilio <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/integrations/github" className="btn-ghost">
+					Previous: GitHub Messaging
+				</Link>
+				<Link href="/docs/integrations/whatsapp-twilio" className="btn-primary">
+					Next: WhatsApp Twilio <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }