@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/safety/SafetyPDPPage.tsx

@@ -8,114 +8,114 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function SafetyPDPPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Policy Decision Points</h1>
-        <p className="text-muted-foreground">
-          A <strong>Policy Decision Point (PDP)</strong> is a centralized
-          component that evaluates access control policies and makes
-          authorization decisions. According to{' '}
-          <a
-            href="https://www.strongdm.com/blog/policy-decision-point"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            StrongDM
-          </a>
-          , the PDP "receives requests for access to resources, evaluates them
-          against policies, and returns a decision (permit or deny)."
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Policy Decision Points</h1>
+				<p className="text-muted-foreground">
+					A <strong>Policy Decision Point (PDP)</strong> is a centralized
+					component that evaluates access control policies and makes
+					authorization decisions. According to{' '}
+					<a
+						href="https://www.strongdm.com/blog/policy-decision-point"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						StrongDM
+					</a>
+					, the PDP "receives requests for access to resources, evaluates them
+					against policies, and returns a decision (permit or deny)."
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">
-          How the PDP works in ContractSpec
-        </h2>
-        <p className="text-muted-foreground">
-          In ContractSpec, the PDP is invoked on every operation—whether it's
-          rendering a UI component, executing a capability, or querying a data
-          view. The flow is:
-        </p>
-        <ol className="text-muted-foreground list-inside list-decimal space-y-3">
-          <li>
-            <strong>Request evaluation</strong> – The runtime sends a request to
-            the PDP containing:
-            <ul className="mt-2 ml-6 list-inside list-disc space-y-1">
-              <li>
-                The user's identity and attributes (roles, groups, location,
-                etc.)
-              </li>
-              <li>
-                The resource being accessed (capability, field, workflow step)
-              </li>
-              <li>The action being performed (read, write, execute)</li>
-              <li>
-                Contextual information (time of day, device type, IP address)
-              </li>
-            </ul>
-          </li>
-          <li>
-            <strong>Policy evaluation</strong> – The PDP evaluates the request
-            against all applicable <strong>PolicySpecs</strong>. These specs
-            define rules using attribute-based access control (ABAC) and can
-            reference:
-            <ul className="mt-2 ml-6 list-inside list-disc space-y-1">
-              <li>User attributes (e.g., "role == 'admin'")</li>
-              <li>Resource attributes (e.g., "field.sensitivity == 'PII'")</li>
-              <li>
-                Environmental attributes (e.g., "time.hour &gt;= 9 AND time.hour
-                &lt; 17")
-              </li>
-            </ul>
-          </li>
-          <li>
-            <strong>Decision return</strong> – The PDP returns one of:
-            <ul className="mt-2 ml-6 list-inside list-disc space-y-1">
-              <li>
-                <code className="bg-background/50 rounded px-2 py-1">
-                  PERMIT
-                </code>{' '}
-                – The operation is allowed.
-              </li>
-              <li>
-                <code className="bg-background/50 rounded px-2 py-1">DENY</code>{' '}
-                – The operation is blocked.
-              </li>
-              <li>
-                <code className="bg-background/50 rounded px-2 py-1">
-                  REDACT
-                </code>{' '}
-                – The operation is allowed, but sensitive fields are masked.
-              </li>
-            </ul>
-          </li>
-          <li>
-            <strong>Enforcement</strong> – The runtime enforces the decision. If
-            denied, the operation fails with a clear error message. If redacted,
-            sensitive fields are replaced with placeholders.
-          </li>
-          <li>
-            <strong>Auditing</strong> – Every PDP decision is logged to the{' '}
-            <Link
-              href="/docs/safety/auditing"
-              className="text-violet-400 hover:text-violet-300"
-            >
-              audit log
-            </Link>
-            , including the request, decision, and reasoning.
-          </li>
-        </ol>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">
+					How the PDP works in ContractSpec
+				</h2>
+				<p className="text-muted-foreground">
+					In ContractSpec, the PDP is invoked on every operation—whether it's
+					rendering a UI component, executing a capability, or querying a data
+					view. The flow is:
+				</p>
+				<ol className="list-inside list-decimal space-y-3 text-muted-foreground">
+					<li>
+						<strong>Request evaluation</strong> – The runtime sends a request to
+						the PDP containing:
+						<ul className="mt-2 ml-6 list-inside list-disc space-y-1">
+							<li>
+								The user's identity and attributes (roles, groups, location,
+								etc.)
+							</li>
+							<li>
+								The resource being accessed (capability, field, workflow step)
+							</li>
+							<li>The action being performed (read, write, execute)</li>
+							<li>
+								Contextual information (time of day, device type, IP address)
+							</li>
+						</ul>
+					</li>
+					<li>
+						<strong>Policy evaluation</strong> – The PDP evaluates the request
+						against all applicable <strong>PolicySpecs</strong>. These specs
+						define rules using attribute-based access control (ABAC) and can
+						reference:
+						<ul className="mt-2 ml-6 list-inside list-disc space-y-1">
+							<li>User attributes (e.g., "role == 'admin'")</li>
+							<li>Resource attributes (e.g., "field.sensitivity == 'PII'")</li>
+							<li>
+								Environmental attributes (e.g., "time.hour &gt;= 9 AND time.hour
+								&lt; 17")
+							</li>
+						</ul>
+					</li>
+					<li>
+						<strong>Decision return</strong> – The PDP returns one of:
+						<ul className="mt-2 ml-6 list-inside list-disc space-y-1">
+							<li>
+								<code className="rounded bg-background/50 px-2 py-1">
+									PERMIT
+								</code>{' '}
+								– The operation is allowed.
+							</li>
+							<li>
+								<code className="rounded bg-background/50 px-2 py-1">DENY</code>{' '}
+								– The operation is blocked.
+							</li>
+							<li>
+								<code className="rounded bg-background/50 px-2 py-1">
+									REDACT
+								</code>{' '}
+								– The operation is allowed, but sensitive fields are masked.
+							</li>
+						</ul>
+					</li>
+					<li>
+						<strong>Enforcement</strong> – The runtime enforces the decision. If
+						denied, the operation fails with a clear error message. If redacted,
+						sensitive fields are replaced with placeholders.
+					</li>
+					<li>
+						<strong>Auditing</strong> – Every PDP decision is logged to the{' '}
+						<Link
+							href="/docs/safety/auditing"
+							className="text-violet-400 hover:text-violet-300"
+						>
+							audit log
+						</Link>
+						, including the request, decision, and reasoning.
+					</li>
+				</ol>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example PolicySpec</h2>
-        <p className="text-muted-foreground">
-          Here's a simple policy that restricts access to PII 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>{`policyId: pii-access-control
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example PolicySpec</h2>
+				<p className="text-muted-foreground">
+					Here's a simple policy that restricts access to PII 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>{`policyId: pii-access-control
 version: '1.0.0'.0.0
 rules:
   - id: allow-admin-full-access
@@ -134,64 +134,64 @@ rules:
     condition: |
       user.role NOT IN ['admin', 'support'] AND
       field.sensitivity == 'PII'`}</pre>
-        </div>
-        <p className="text-muted-foreground">
-          With this policy, admins see all data, support staff see redacted PII,
-          and other users cannot access PII at all.
-        </p>
-      </div>
+				</div>
+				<p className="text-muted-foreground">
+					With this policy, admins see all data, support staff see redacted PII,
+					and other users cannot access PII at all.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">
-          Benefits of centralized decision-making
-        </h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Consistency</strong> – Policies are enforced uniformly
-            across all surfaces (API, UI, workflows).
-          </li>
-          <li>
-            <strong>Auditability</strong> – Every decision is logged, making it
-            easy to trace why access was granted or denied.
-          </li>
-          <li>
-            <strong>Flexibility</strong> – Policies can be updated without
-            changing application code.
-          </li>
-          <li>
-            <strong>Security</strong> – Reduces the risk of authorization bugs
-            by removing ad-hoc checks scattered throughout the codebase.
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">
+					Benefits of centralized decision-making
+				</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Consistency</strong> – Policies are enforced uniformly
+						across all surfaces (API, UI, workflows).
+					</li>
+					<li>
+						<strong>Auditability</strong> – Every decision is logged, making it
+						easy to trace why access was granted or denied.
+					</li>
+					<li>
+						<strong>Flexibility</strong> – Policies can be updated without
+						changing application code.
+					</li>
+					<li>
+						<strong>Security</strong> – Reduces the risk of authorization bugs
+						by removing ad-hoc checks scattered throughout the codebase.
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Performance considerations</h2>
-        <p className="text-muted-foreground">
-          Because the PDP is invoked on every operation, performance is
-          critical. ContractSpec optimizes this by:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>Caching policy decisions for identical requests</li>
-          <li>Compiling policies into efficient bytecode</li>
-          <li>
-            Evaluating only the minimal set of rules needed for each request
-          </li>
-          <li>Running the PDP in-process to avoid network latency</li>
-        </ul>
-        <p className="text-muted-foreground">
-          In practice, PDP overhead is typically less than 1ms per request.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Performance considerations</h2>
+				<p className="text-muted-foreground">
+					Because the PDP is invoked on every operation, performance is
+					critical. ContractSpec optimizes this by:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>Caching policy decisions for identical requests</li>
+					<li>Compiling policies into efficient bytecode</li>
+					<li>
+						Evaluating only the minimal set of rules needed for each request
+					</li>
+					<li>Running the PDP in-process to avoid network latency</li>
+				</ul>
+				<p className="text-muted-foreground">
+					In practice, PDP overhead is typically less than 1ms per request.
+				</p>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/safety/signing" className="btn-ghost">
-          Previous: Spec Signing
-        </Link>
-        <Link href="/docs/safety/auditing" className="btn-primary">
-          Next: Audit Logs <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/safety/signing" className="btn-ghost">
+					Previous: Spec Signing
+				</Link>
+				<Link href="/docs/safety/auditing" className="btn-primary">
+					Next: Audit Logs <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/safety/SafetySecurityTrustPage.tsx

@@ -2,99 +2,99 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function SafetySecurityTrustPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Security & Trust</h1>
-        <p className="text-muted-foreground">
-          ContractSpec focuses on deterministic, auditable software delivery.
-          This page summarizes our security posture and trust commitments so
-          teams can adopt with clarity.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Security & Trust</h1>
+				<p className="text-muted-foreground">
+					ContractSpec focuses on deterministic, auditable software delivery.
+					This page summarizes our security posture and trust commitments so
+					teams can adopt with clarity.
+				</p>
+			</div>
 
-      <div className="card-subtle space-y-4 p-6">
-        <h2 className="text-2xl font-bold">Security policy</h2>
-        <p className="text-muted-foreground text-sm">
-          We publish a dedicated security policy that explains how to report
-          vulnerabilities and how we respond.
-        </p>
-        <Link href="/SECURITY.md" className="btn-primary">
-          Read the security policy <ChevronRight size={16} />
-        </Link>
-      </div>
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">Security policy</h2>
+				<p className="text-muted-foreground text-sm">
+					We publish a dedicated security policy that explains how to report
+					vulnerabilities and how we respond.
+				</p>
+				<Link href="/SECURITY.md" className="btn-primary">
+					Read the security policy <ChevronRight size={16} />
+				</Link>
+			</div>
 
-      <div className="grid gap-4 md:grid-cols-2">
-        <div className="card-subtle space-y-3 p-6">
-          <h3 className="text-lg font-semibold">Release hygiene</h3>
-          <p className="text-muted-foreground text-sm">
-            We ship with deterministic CI, changesets, and contract validation
-            so teams can trust every release.
-          </p>
-          <ul className="text-muted-foreground space-y-2 text-sm">
-            <li>Changesets required for published packages.</li>
-            <li>CI gate for contract validation and drift detection.</li>
-            <li>Rollback-friendly release process.</li>
-          </ul>
-        </div>
+			<div className="grid gap-4 md:grid-cols-2">
+				<div className="card-subtle space-y-3 p-6">
+					<h3 className="font-semibold text-lg">Release hygiene</h3>
+					<p className="text-muted-foreground text-sm">
+						We ship with deterministic CI, changesets, and contract validation
+						so teams can trust every release.
+					</p>
+					<ul className="space-y-2 text-muted-foreground text-sm">
+						<li>Changesets required for published packages.</li>
+						<li>CI gate for contract validation and drift detection.</li>
+						<li>Rollback-friendly release process.</li>
+					</ul>
+				</div>
 
-        <div className="card-subtle space-y-3 p-6">
-          <h3 className="text-lg font-semibold">Data handling</h3>
-          <p className="text-muted-foreground text-sm">
-            ContractSpec promotes strict data classification and policy-driven
-            access. Specs can tag sensitive fields for enforcement.
-          </p>
-          <ul className="text-muted-foreground space-y-2 text-sm">
-            <li>Schema-level sensitivity tags.</li>
-            <li>Policy Decision Point enforcement.</li>
-            <li>Audit logs for operational traceability.</li>
-          </ul>
-        </div>
-      </div>
+				<div className="card-subtle space-y-3 p-6">
+					<h3 className="font-semibold text-lg">Data handling</h3>
+					<p className="text-muted-foreground text-sm">
+						ContractSpec promotes strict data classification and policy-driven
+						access. Specs can tag sensitive fields for enforcement.
+					</p>
+					<ul className="space-y-2 text-muted-foreground text-sm">
+						<li>Schema-level sensitivity tags.</li>
+						<li>Policy Decision Point enforcement.</li>
+						<li>Audit logs for operational traceability.</li>
+					</ul>
+				</div>
+			</div>
 
-      <div className="grid gap-4 md:grid-cols-2">
-        <div className="card-subtle space-y-3 p-6">
-          <h3 className="text-lg font-semibold">Supply chain</h3>
-          <p className="text-muted-foreground text-sm">
-            We track dependency updates and keep the monorepo build
-            reproducible.
-          </p>
-          <ul className="text-muted-foreground space-y-2 text-sm">
-            <li>Dependabot + Renovate-style updates where available.</li>
-            <li>Signed release artifacts planned for Studio release cycles.</li>
-            <li>Transparent changelogs for every package.</li>
-          </ul>
-        </div>
+			<div className="grid gap-4 md:grid-cols-2">
+				<div className="card-subtle space-y-3 p-6">
+					<h3 className="font-semibold text-lg">Supply chain</h3>
+					<p className="text-muted-foreground text-sm">
+						We track dependency updates and keep the monorepo build
+						reproducible.
+					</p>
+					<ul className="space-y-2 text-muted-foreground text-sm">
+						<li>Dependabot + Renovate-style updates where available.</li>
+						<li>Signed release artifacts planned for Studio release cycles.</li>
+						<li>Transparent changelogs for every package.</li>
+					</ul>
+				</div>
 
-        <div className="card-subtle space-y-3 p-6">
-          <h3 className="text-lg font-semibold">Responsible disclosure</h3>
-          <p className="text-muted-foreground text-sm">
-            We respond quickly to security reports and coordinate fixes before
-            public disclosure.
-          </p>
-          <ul className="text-muted-foreground space-y-2 text-sm">
-            <li>Security response within 5 business days.</li>
-            <li>Private disclosure via security@contractspec.io.</li>
-            <li>Credit for researchers (with permission).</li>
-          </ul>
-        </div>
-      </div>
+				<div className="card-subtle space-y-3 p-6">
+					<h3 className="font-semibold text-lg">Responsible disclosure</h3>
+					<p className="text-muted-foreground text-sm">
+						We respond quickly to security reports and coordinate fixes before
+						public disclosure.
+					</p>
+					<ul className="space-y-2 text-muted-foreground text-sm">
+						<li>Security response within 5 business days.</li>
+						<li>Private disclosure via security@contractspec.io.</li>
+						<li>Credit for researchers (with permission).</li>
+					</ul>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Next steps</h2>
-        <p className="text-muted-foreground">
-          Explore the broader safety controls or read the roadmap to see
-          upcoming trust investments.
-        </p>
-        <div className="flex flex-wrap gap-4 pt-4">
-          <Link href="/docs/safety" className="btn-ghost">
-            Safety overview <ChevronRight size={16} />
-          </Link>
-          <Link href="/ROADMAP.md" className="btn-ghost">
-            Roadmap <ChevronRight size={16} />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Next steps</h2>
+				<p className="text-muted-foreground">
+					Explore the broader safety controls or read the roadmap to see
+					upcoming trust investments.
+				</p>
+				<div className="flex flex-wrap gap-4 pt-4">
+					<Link href="/docs/safety" className="btn-ghost">
+						Safety overview <ChevronRight size={16} />
+					</Link>
+					<Link href="/ROADMAP.md" className="btn-ghost">
+						Roadmap <ChevronRight size={16} />
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/safety/SafetySigningPage.tsx

@@ -7,50 +7,50 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function SafetySigningPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">Spec Signing</h1>
-        <p className="text-muted-foreground text-lg">
-          Signing ensures specs haven't been tampered with and provides an audit
-          trail of all changes.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">Spec Signing</h1>
+				<p className="text-lg text-muted-foreground">
+					Signing ensures specs haven't been tampered with and provides an audit
+					trail of all changes.
+				</p>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">How it works</h2>
-          <p className="text-muted-foreground">
-            Every spec is cryptographically signed before deployment. The
-            signature proves that the spec hasn't been modified since it was
-            signed and creates a permanent record of who deployed it and when.
-          </p>
-        </div>
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">How it works</h2>
+					<p className="text-muted-foreground">
+						Every spec is cryptographically signed before deployment. The
+						signature proves that the spec hasn't been modified since it was
+						signed and creates a permanent record of who deployed it and when.
+					</p>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Signing a spec</h2>
-          <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-            <pre>{`contractspec sign app.spec.ts --key ~/.contractspec/key.pem
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Signing a spec</h2>
+					<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+						<pre>{`contractspec sign app.spec.ts --key ~/.contractspec/key.pem
 contractspec deploy --signed app.spec.ts.signed`}</pre>
-          </div>
-        </div>
+					</div>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Verifying signatures</h2>
-          <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-            <pre>{`contractspec verify app.spec.ts.signed
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Verifying signatures</h2>
+					<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+						<pre>{`contractspec verify app.spec.ts.signed
 # Output: ✓ Signature valid
 # Signed by: alice@example.com
 # Timestamp: 2024-11-08T10:30:00Z`}</pre>
-          </div>
-        </div>
+					</div>
+				</div>
 
-        <div className="flex items-center gap-4 pt-4">
-          <Link href="/docs/safety/pdp" className="btn-primary">
-            Next: Policy Decision Points <ChevronRight size={16} />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+				<div className="flex items-center gap-4 pt-4">
+					<Link href="/docs/safety/pdp" className="btn-primary">
+						Next: Policy Decision Points <ChevronRight size={16} />
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }