@contractspec/bundle.library 3.7.6 → 3.7.7

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

@@ -9,46 +9,46 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function IntegrationsPostmarkPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Postmark</h1>
-        <p className="text-muted-foreground">
-          Postmark is a transactional email service with industry-leading
-          deliverability. Use it to send order confirmations, password resets,
-          notifications, and other critical emails.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Postmark</h1>
+				<p className="text-muted-foreground">
+					Postmark is a transactional email service with industry-leading
+					deliverability. Use it to send order confirmations, password resets,
+					notifications, and other critical emails.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Setup</h2>
-        <p className="text-muted-foreground">
-          Add your Postmark 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 Postmark 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
 POSTMARK_API_TOKEN=...
 POSTMARK_FROM_EMAIL=noreply@example.com
 POSTMARK_FROM_NAME="Your App Name"`}</pre>
-        </div>
-        <p className="text-muted-foreground text-sm">
-          Get your API token from the{' '}
-          <a
-            href="https://account.postmarkapp.com/servers"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            Postmark Dashboard
-          </a>
-          .
-        </p>
-      </div>
+				</div>
+				<p className="text-muted-foreground text-sm">
+					Get your API token from the{' '}
+					<a
+						href="https://account.postmarkapp.com/servers"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						Postmark Dashboard
+					</a>
+					.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Sending emails</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: send-email
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Sending emails</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: send-email
 provider:
   type: postmark
   operation: sendEmail
@@ -77,17 +77,17 @@ outputs:
     type: string
   submittedAt:
     type: timestamp`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Using templates</h2>
-        <p className="text-muted-foreground">
-          Postmark templates allow you to design emails in their dashboard and
-          populate them with data:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`capabilityId: send-welcome-email
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Using templates</h2>
+				<p className="text-muted-foreground">
+					Postmark templates allow you to design emails in their dashboard and
+					populate them with data:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`capabilityId: send-welcome-email
 provider:
   type: postmark
   operation: sendEmail
@@ -103,59 +103,59 @@ config:
   templateData:
     user_name: \$\{input.userName\}
     login_url: "https://app.example.com/login"`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Webhooks</h2>
-        <p className="text-muted-foreground">
-          Postmark can notify your app about delivery, bounces, and opens:
-        </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/postmark`}</pre>
-        </div>
-        <p className="text-muted-foreground">
-          ContractSpec automatically processes these webhook events:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Delivery</strong> – Email was successfully delivered
-          </li>
-          <li>
-            <strong>Bounce</strong> – Email bounced (hard or soft)
-          </li>
-          <li>
-            <strong>SpamComplaint</strong> – Recipient marked email as spam
-          </li>
-          <li>
-            <strong>Open</strong> – Recipient opened the email
-          </li>
-          <li>
-            <strong>Click</strong> – Recipient clicked a link
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Webhooks</h2>
+				<p className="text-muted-foreground">
+					Postmark can notify your app about delivery, bounces, and opens:
+				</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/postmark`}</pre>
+				</div>
+				<p className="text-muted-foreground">
+					ContractSpec automatically processes these webhook events:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Delivery</strong> – Email was successfully delivered
+					</li>
+					<li>
+						<strong>Bounce</strong> – Email bounced (hard or soft)
+					</li>
+					<li>
+						<strong>SpamComplaint</strong> – Recipient marked email as spam
+					</li>
+					<li>
+						<strong>Open</strong> – Recipient opened the email
+					</li>
+					<li>
+						<strong>Click</strong> – Recipient clicked a link
+					</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>Use templates for consistent branding</li>
-          <li>Always provide both HTML and plain text versions</li>
-          <li>Monitor bounce rates and remove invalid addresses</li>
-          <li>Use message streams to separate different email types</li>
-          <li>Test emails in the Postmark sandbox before going live</li>
-          <li>Set up DKIM and SPF records for your domain</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>Use templates for consistent branding</li>
+					<li>Always provide both HTML and plain text versions</li>
+					<li>Monitor bounce rates and remove invalid addresses</li>
+					<li>Use message streams to separate different email types</li>
+					<li>Test emails in the Postmark sandbox before going live</li>
+					<li>Set up DKIM and SPF records for your domain</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/integrations/stripe" className="btn-ghost">
-          Previous: Stripe
-        </Link>
-        <Link href="/docs/integrations/resend" className="btn-primary">
-          Next: Resend <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/integrations/stripe" className="btn-ghost">
+					Previous: Stripe
+				</Link>
+				<Link href="/docs/integrations/resend" className="btn-primary">
+					Next: Resend <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

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

@@ -8,60 +8,60 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function IntegrationsPowensPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Powens Open Banking</h1>
-        <p className="text-muted-foreground">
-          Powens provides read-only open banking connectivity for ContractSpec
-          applications. The reference integration powers Pocket Family Office by
-          synchronising household bank accounts, transactions, and balances
-          while keeping all raw PII protected.
-        </p>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Setup</h2>
-        <p className="text-muted-foreground">
-          Create a Powens BYOK project, then store the credentials in your
-          secret manager. The ContractSpec integration expects the following
-          fields:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`{
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Powens Open Banking</h1>
+				<p className="text-muted-foreground">
+					Powens provides read-only open banking connectivity for ContractSpec
+					applications. The reference integration powers Pocket Family Office by
+					synchronising household bank accounts, transactions, and balances
+					while keeping all raw PII protected.
+				</p>
+			</div>
+
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Setup</h2>
+				<p className="text-muted-foreground">
+					Create a Powens BYOK project, then store the credentials in your
+					secret manager. The ContractSpec integration expects the following
+					fields:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`{
   "clientId": "powens-client-id",
   "clientSecret": "powens-client-secret",
   "apiKey": "optional-api-key",
   "webhookSecret": "optional-webhook-secret"
 }`}</pre>
-        </div>
-        <p className="text-muted-foreground text-sm">
-          Configure non-secret settings on the integration connection:
-        </p>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`environment: sandbox | production
+				</div>
+				<p className="text-muted-foreground text-sm">
+					Configure non-secret settings on the integration connection:
+				</p>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`environment: sandbox | production
 baseUrl?: https://api-sandbox.powens.com/v2
 region?: eu-west-1
 pollingIntervalMs?: 300000`}</pre>
-        </div>
-        <p className="text-muted-foreground text-sm">
-          See the{' '}
-          <a
-            href="https://docs.powens.com/documentation/integration-guides/quick-start/api-overview"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            Powens API documentation
-          </a>{' '}
-          for information on generating credentials and managing BYOK projects.
-        </p>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Capabilities</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: openbanking.accounts.read
+				</div>
+				<p className="text-muted-foreground text-sm">
+					See the{' '}
+					<a
+						href="https://docs.powens.com/documentation/integration-guides/quick-start/api-overview"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						Powens API documentation
+					</a>{' '}
+					for information on generating credentials and managing BYOK projects.
+				</p>
+			</div>
+
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Capabilities</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: openbanking.accounts.read
 provider:
   type: openbanking.powens
   operation: listAccounts
@@ -109,123 +109,123 @@ outputs:
   balances:
     type: AccountBalanceRecord[]
     description: "Current/available balances with timestamps"`}</pre>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Primary workflows</h2>
-        <div className="space-y-3">
-          <h3 className="text-lg font-semibold">Account sync</h3>
-          <p className="text-muted-foreground">
-            The workflow{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              pfo.workflow.sync-openbanking-accounts
-            </code>{' '}
-            refreshes account metadata, then surfaces canonical records to other
-            automations.
-          </p>
-        </div>
-        <div className="space-y-3">
-          <h3 className="text-lg font-semibold">Transaction sync</h3>
-          <p className="text-muted-foreground">
-            <code className="bg-background/50 rounded px-2 py-1">
-              pfo.workflow.sync-openbanking-transactions
-            </code>{' '}
-            ingests incremental transactions for each linked account and stores
-            them in the canonical ledger.
-          </p>
-        </div>
-        <div className="space-y-3">
-          <h3 className="text-lg font-semibold">Balance refresh</h3>
-          <p className="text-muted-foreground">
-            <code className="bg-background/50 rounded px-2 py-1">
-              pfo.workflow.refresh-openbanking-balances
-            </code>{' '}
-            retrieves current and available balances to power dashboards and
-            anomaly detection.
-          </p>
-        </div>
-        <div className="space-y-3">
-          <h3 className="text-lg font-semibold">Derived financial overview</h3>
-          <p className="text-muted-foreground">
-            <code className="bg-background/50 rounded px-2 py-1">
-              pfo.workflow.generate-openbanking-overview
-            </code>{' '}
-            aggregates balances, category breakdowns, and cashflow trends into
-            the <code>knowledge.financial-overview</code> space. Only derived
-            summaries are exposed to LLMs.
-          </p>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Telemetry & guardrails</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            Telemetry events such as{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              openbanking.accounts.synced
-            </code>{' '}
-            and{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              openbanking.transactions.synced
-            </code>{' '}
-            are emitted automatically with tenant, slot, and config metadata.
-          </li>
-          <li>
-            Guard helpers ensure the{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              primaryOpenBanking
-            </code>{' '}
-            slot is bound and healthy before workflows execute.
-          </li>
-          <li>
-            PII fields (IBAN, counterparty names, descriptions) are redacted via{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              redactOpenBankingTelemetryPayload
-            </code>{' '}
-            before logging or sending telemetry.
-          </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>
-            Use BYOK credentials per tenant to avoid cross-tenant exposure.
-          </li>
-          <li>
-            Store only canonical entities (BankAccountRecord,
-            BankTransactionRecord). Never persist raw Powens payloads or
-            customer PII in logs.
-          </li>
-          <li>
-            Run the transaction sync on a schedule appropriate for banking SLAs
-            (e.g. every 15 minutes for cashflow dashboards).
-          </li>
-          <li>
-            Pair ledger updates with derived summaries to feed the knowledge
-            layer instead of exposing raw transactions to agents.
-          </li>
-          <li>
-            Monitor telemetry for{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              openbanking.*.sync_failed
-            </code>{' '}
-            events to detect credential issues early.
-          </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/stripe" className="btn-primary">
-          Next: Stripe <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+				</div>
+			</div>
+
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Primary workflows</h2>
+				<div className="space-y-3">
+					<h3 className="font-semibold text-lg">Account sync</h3>
+					<p className="text-muted-foreground">
+						The workflow{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							pfo.workflow.sync-openbanking-accounts
+						</code>{' '}
+						refreshes account metadata, then surfaces canonical records to other
+						automations.
+					</p>
+				</div>
+				<div className="space-y-3">
+					<h3 className="font-semibold text-lg">Transaction sync</h3>
+					<p className="text-muted-foreground">
+						<code className="rounded bg-background/50 px-2 py-1">
+							pfo.workflow.sync-openbanking-transactions
+						</code>{' '}
+						ingests incremental transactions for each linked account and stores
+						them in the canonical ledger.
+					</p>
+				</div>
+				<div className="space-y-3">
+					<h3 className="font-semibold text-lg">Balance refresh</h3>
+					<p className="text-muted-foreground">
+						<code className="rounded bg-background/50 px-2 py-1">
+							pfo.workflow.refresh-openbanking-balances
+						</code>{' '}
+						retrieves current and available balances to power dashboards and
+						anomaly detection.
+					</p>
+				</div>
+				<div className="space-y-3">
+					<h3 className="font-semibold text-lg">Derived financial overview</h3>
+					<p className="text-muted-foreground">
+						<code className="rounded bg-background/50 px-2 py-1">
+							pfo.workflow.generate-openbanking-overview
+						</code>{' '}
+						aggregates balances, category breakdowns, and cashflow trends into
+						the <code>knowledge.financial-overview</code> space. Only derived
+						summaries are exposed to LLMs.
+					</p>
+				</div>
+			</div>
+
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Telemetry & guardrails</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						Telemetry events such as{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							openbanking.accounts.synced
+						</code>{' '}
+						and{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							openbanking.transactions.synced
+						</code>{' '}
+						are emitted automatically with tenant, slot, and config metadata.
+					</li>
+					<li>
+						Guard helpers ensure the{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							primaryOpenBanking
+						</code>{' '}
+						slot is bound and healthy before workflows execute.
+					</li>
+					<li>
+						PII fields (IBAN, counterparty names, descriptions) are redacted via{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							redactOpenBankingTelemetryPayload
+						</code>{' '}
+						before logging or sending telemetry.
+					</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>
+						Use BYOK credentials per tenant to avoid cross-tenant exposure.
+					</li>
+					<li>
+						Store only canonical entities (BankAccountRecord,
+						BankTransactionRecord). Never persist raw Powens payloads or
+						customer PII in logs.
+					</li>
+					<li>
+						Run the transaction sync on a schedule appropriate for banking SLAs
+						(e.g. every 15 minutes for cashflow dashboards).
+					</li>
+					<li>
+						Pair ledger updates with derived summaries to feed the knowledge
+						layer instead of exposing raw transactions to agents.
+					</li>
+					<li>
+						Monitor telemetry for{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							openbanking.*.sync_failed
+						</code>{' '}
+						events to detect credential issues early.
+					</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/stripe" className="btn-primary">
+					Next: Stripe <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }