@contractspec/bundle.library 3.7.6 → 3.7.7

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

@@ -4,35 +4,35 @@
 // };
 
 export function SafetyTenantIsolationPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Tenant Isolation</h1>
-        <p className="text-muted-foreground text-lg">
-          Preventing cross-tenant data leaks is the #1 security priority for any
-          SaaS. ContractSpec employs "Defense in Depth" to ensure safety.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Tenant Isolation</h1>
+				<p className="text-lg text-muted-foreground">
+					Preventing cross-tenant data leaks is the #1 security priority for any
+					SaaS. ContractSpec employs "Defense in Depth" to ensure safety.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Layer 1: RLS Middleware</h2>
-        <p>
-          The primary defense is the Prisma middleware that rewrites queries to
-          include <code>WHERE tenantId = ?</code>. This protects against
-          developer error (forgetting to filter).
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Layer 1: RLS Middleware</h2>
+				<p>
+					The primary defense is the Prisma middleware that rewrites queries to
+					include <code>WHERE tenantId = ?</code>. This protects against
+					developer error (forgetting to filter).
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Layer 2: Isolation Validator</h2>
-        <p>
-          For high-security environments, you can use the{' '}
-          <code>IsolationValidator</code> in your test suite to verify that
-          every query generated by your operations actually includes the tenant
-          ID.
-        </p>
-        <pre className="bg-muted rounded-lg border p-4 text-sm">
-          {`import { IsolationValidator } from '@contractspec/lib.multi-tenancy/isolation';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Layer 2: Isolation Validator</h2>
+				<p>
+					For high-security environments, you can use the{' '}
+					<code>IsolationValidator</code> in your test suite to verify that
+					every query generated by your operations actually includes the tenant
+					ID.
+				</p>
+				<pre className="rounded-lg border bg-muted p-4 text-sm">
+					{`import { IsolationValidator } from '@contractspec/lib.multi-tenancy/isolation';
 
 test('findUser query is isolated', () => {
   const isValid = IsolationValidator.validateQuery(
@@ -43,17 +43,17 @@ test('findUser query is isolated', () => {
   );
   expect(isValid).toBe(true);
 });`}
-        </pre>
-      </div>
+				</pre>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Layer 3: Policy Engine</h2>
-        <p>
-          The Policy Decision Point (PDP) verifies that the authenticated user
-          actually belongs to the requested tenant before any operation logic
-          runs.
-        </p>
-      </div>
-    </div>
-  );
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Layer 3: Policy Engine</h2>
+				<p>
+					The Policy Decision Point (PDP) verifies that the authenticated user
+					actually belongs to the requested tenant before any operation logic
+					runs.
+				</p>
+			</div>
+		</div>
+	);
 }

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

@@ -1,7 +1,7 @@
-export { SafetyOverviewPage } from './SafetyOverviewPage';
-export { SafetySigningPage } from './SafetySigningPage';
 export { SafetyAuditingPage } from './SafetyAuditingPage';
 export { SafetyMigrationsPage } from './SafetyMigrationsPage';
+export { SafetyOverviewPage } from './SafetyOverviewPage';
 export { SafetyPDPPage } from './SafetyPDPPage';
-export { SafetyTenantIsolationPage } from './SafetyTenantIsolationPage';
 export { SafetySecurityTrustPage } from './SafetySecurityTrustPage';
+export { SafetySigningPage } from './SafetySigningPage';
+export { SafetyTenantIsolationPage } from './SafetyTenantIsolationPage';

package/src/components/docs/shared/StudioPrompt.tsx

@@ -1,25 +1,25 @@
 import Link from '@contractspec/lib.ui-link';
 
 interface StudioPromptProps {
-  title?: string;
-  body?: string;
-  ctaLabel?: string;
-  href?: string;
+	title?: string;
+	body?: string;
+	ctaLabel?: string;
+	href?: string;
 }
 
 export function StudioPrompt({
-  title = 'Want to turn product signals into spec-first deliverables?',
-  body = 'ContractSpec Studio ingests evidence from meetings, support, analytics, docs, and code, then compiles decisions into spec diffs and task packs.',
-  ctaLabel = 'Try Studio',
-  href = 'https://www.contractspec.studio',
+	title = 'Need the operating layer on top of OSS ContractSpec?',
+	body = 'ContractSpec Studio helps teams turn evidence into proposed spec changes, governed delivery loops, and execution-ready task packs while keeping the open contract system as the source of truth.',
+	ctaLabel = 'See what Studio adds',
+	href = 'https://www.contractspec.studio/docs',
 }: StudioPromptProps) {
-  return (
-    <div className="card-subtle space-y-3 p-6">
-      <h3 className="text-lg font-semibold">{title}</h3>
-      <p className="text-muted-foreground text-sm">{body}</p>
-      <Link href={href} className="btn-primary">
-        {ctaLabel}
-      </Link>
-    </div>
-  );
+	return (
+		<div className="card-subtle space-y-3 p-6">
+			<h3 className="font-semibold text-lg">{title}</h3>
+			<p className="text-muted-foreground text-sm">{body}</p>
+			<Link href={href} className="btn-primary">
+				{ctaLabel}
+			</Link>
+		</div>
+	);
 }

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

@@ -7,32 +7,32 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function SpecsCapabilitiesPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">Capabilities</h1>
-        <p className="text-muted-foreground text-lg">
-          Capabilities are the core building block of ContractSpec. They define
-          what your app can do.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">Capabilities</h1>
+				<p className="text-lg text-muted-foreground">
+					Capabilities are the core building block of ContractSpec. They define
+					what your app can do.
+				</p>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Overview</h2>
-          <p className="text-muted-foreground">
-            A ContractSpec (or Capability) is a typed, declarative description
-            of an operation. It defines the operation's name, version, inputs,
-            outputs, policies, and side effects. Runtime adapters automatically
-            serve these as REST/GraphQL/MCP endpoints with full validation and
-            policy enforcement.
-          </p>
-        </div>
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Overview</h2>
+					<p className="text-muted-foreground">
+						A ContractSpec (or Capability) is a typed, declarative description
+						of an operation. It defines the operation's name, version, inputs,
+						outputs, policies, and side effects. Runtime adapters automatically
+						serve these as REST/GraphQL/MCP endpoints with full validation and
+						policy enforcement.
+					</p>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Defining a Command (Write)</h2>
-          <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-            <pre>{`import { defineCommand } from '@contractspec/lib.contracts-spec';
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Defining a Command (Write)</h2>
+					<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+						<pre>{`import { defineCommand } from '@contractspec/lib.contracts-spec';
 import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 const TransferFundsInput = new SchemaModel({
@@ -71,61 +71,61 @@ export const TransferFunds = defineCommand({
     flags: ['payments_enabled'],
   },
 });`}</pre>
-          </div>
-        </div>
+					</div>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Schema Types</h2>
-          <p className="text-muted-foreground">
-            ContractSpec uses <code>@contractspec/lib.schema</code> for I/O
-            definitions. This provides Zod validation, GraphQL types, and JSON
-            Schema from a single source.
-          </p>
-          <ul className="text-muted-foreground space-y-2">
-            <li>
-              •{' '}
-              <code className="bg-background/50 rounded px-2 py-1">
-                ScalarTypeEnum.NonEmptyString()
-              </code>{' '}
-              - Non-empty text
-            </li>
-            <li>
-              •{' '}
-              <code className="bg-background/50 rounded px-2 py-1">
-                ScalarTypeEnum.PositiveNumber()
-              </code>{' '}
-              - Positive numbers
-            </li>
-            <li>
-              •{' '}
-              <code className="bg-background/50 rounded px-2 py-1">
-                ScalarTypeEnum.DateTime()
-              </code>{' '}
-              - ISO 8601 timestamps
-            </li>
-            <li>
-              •{' '}
-              <code className="bg-background/50 rounded px-2 py-1">
-                ScalarTypeEnum.Email()
-              </code>{' '}
-              - Valid email addresses
-            </li>
-            <li>
-              •{' '}
-              <code className="bg-background/50 rounded px-2 py-1">
-                defineEnum(...)
-              </code>{' '}
-              - Type-safe enums
-            </li>
-          </ul>
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Schema Types</h2>
+					<p className="text-muted-foreground">
+						ContractSpec uses <code>@contractspec/lib.schema</code> for I/O
+						definitions. This provides Zod validation, GraphQL types, and JSON
+						Schema from a single source.
+					</p>
+					<ul className="space-y-2 text-muted-foreground">
+						<li>
+							•{' '}
+							<code className="rounded bg-background/50 px-2 py-1">
+								ScalarTypeEnum.NonEmptyString()
+							</code>{' '}
+							- Non-empty text
+						</li>
+						<li>
+							•{' '}
+							<code className="rounded bg-background/50 px-2 py-1">
+								ScalarTypeEnum.PositiveNumber()
+							</code>{' '}
+							- Positive numbers
+						</li>
+						<li>
+							•{' '}
+							<code className="rounded bg-background/50 px-2 py-1">
+								ScalarTypeEnum.DateTime()
+							</code>{' '}
+							- ISO 8601 timestamps
+						</li>
+						<li>
+							•{' '}
+							<code className="rounded bg-background/50 px-2 py-1">
+								ScalarTypeEnum.Email()
+							</code>{' '}
+							- Valid email addresses
+						</li>
+						<li>
+							•{' '}
+							<code className="rounded bg-background/50 px-2 py-1">
+								defineEnum(...)
+							</code>{' '}
+							- Type-safe enums
+						</li>
+					</ul>
+				</div>
 
-        <div className="flex items-center gap-4 pt-4">
-          <Link href="/docs/specs/dataviews" className="btn-primary">
-            Next: DataViews <ChevronRight size={16} />
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+				<div className="flex items-center gap-4 pt-4">
+					<Link href="/docs/specs/dataviews" className="btn-primary">
+						Next: DataViews <ChevronRight size={16} />
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }

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

@@ -8,71 +8,71 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function SpecsDataViewsPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">DataViews</h1>
-        <p className="text-muted-foreground">
-          A <strong>DataViewSpec</strong> describes how data should be queried,
-          filtered, sorted, and presented to users. Runtime adapters execute
-          optimized database queries and serve list views, detail views, and
-          search interfaces while respecting policy constraints.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">DataViews</h1>
+				<p className="text-muted-foreground">
+					A <strong>DataViewSpec</strong> describes how data should be queried,
+					filtered, sorted, and presented to users. Runtime adapters execute
+					optimized database queries and serve list views, detail views, and
+					search interfaces while respecting policy constraints.
+				</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">Data sources</h3>
-            <p className="text-muted-foreground">
-              A DataView connects to one or more data sources—databases, APIs,
-              or other capabilities. You specify the source and the fields you
-              want to expose.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Filtering</h3>
-            <p className="text-muted-foreground">
-              Define filters that users can apply to narrow down results.
-              Filters can be simple (e.g., "status equals 'active'") or complex
-              (e.g., "created within the last 30 days AND assigned to current
-              user").
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Sorting</h3>
-            <p className="text-muted-foreground">
-              Specify which fields can be sorted and the default sort order.
-              ContractSpec generates efficient database queries with proper
-              indexes.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Pagination</h3>
-            <p className="text-muted-foreground">
-              DataViews automatically support pagination to handle large
-              datasets. You can configure page size limits and cursor-based or
-              offset-based pagination.
-            </p>
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold">Aggregations</h3>
-            <p className="text-muted-foreground">
-              Compute aggregates like counts, sums, averages, and group-by
-              operations. These are useful for dashboards and summary views.
-            </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">Data sources</h3>
+						<p className="text-muted-foreground">
+							A DataView connects to one or more data sources—databases, APIs,
+							or other capabilities. You specify the source and the fields you
+							want to expose.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Filtering</h3>
+						<p className="text-muted-foreground">
+							Define filters that users can apply to narrow down results.
+							Filters can be simple (e.g., "status equals 'active'") or complex
+							(e.g., "created within the last 30 days AND assigned to current
+							user").
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Sorting</h3>
+						<p className="text-muted-foreground">
+							Specify which fields can be sorted and the default sort order.
+							ContractSpec generates efficient database queries with proper
+							indexes.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Pagination</h3>
+						<p className="text-muted-foreground">
+							DataViews automatically support pagination to handle large
+							datasets. You can configure page size limits and cursor-based or
+							offset-based pagination.
+						</p>
+					</div>
+					<div>
+						<h3 className="font-semibold text-lg">Aggregations</h3>
+						<p className="text-muted-foreground">
+							Compute aggregates like counts, sums, averages, and group-by
+							operations. These are useful for dashboards and summary views.
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example DataViewSpec</h2>
-        <p className="text-muted-foreground">
-          Here's a DataView for listing orders 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 { defineDataView } from '@contractspec/lib.contracts-spec';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example DataViewSpec</h2>
+				<p className="text-muted-foreground">
+					Here's a DataView for listing orders 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 { defineDataView } from '@contractspec/lib.contracts-spec';
 import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
 
 export const OrderList = defineDataView({
@@ -113,87 +113,87 @@ export const OrderList = defineDataView({
     maxPageSize: 200,
   },
 });`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Policy integration</h2>
-        <p className="text-muted-foreground">
-          DataViews automatically enforce{' '}
-          <Link
-            href="/docs/specs/policy"
-            className="text-violet-400 hover:text-violet-300"
-          >
-            PolicySpecs
-          </Link>
-          . If a user doesn't have permission to see certain fields, those
-          fields are automatically filtered out or redacted. If a user can only
-          see their own data, the query is automatically scoped.
-        </p>
-        <p className="text-muted-foreground">
-          This means you define the data view once, and it works correctly for
-          all users based on their permissions—no need to write separate queries
-          for different roles.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Policy integration</h2>
+				<p className="text-muted-foreground">
+					DataViews automatically enforce{' '}
+					<Link
+						href="/docs/specs/policy"
+						className="text-violet-400 hover:text-violet-300"
+					>
+						PolicySpecs
+					</Link>
+					. If a user doesn't have permission to see certain fields, those
+					fields are automatically filtered out or redacted. If a user can only
+					see their own data, the query is automatically scoped.
+				</p>
+				<p className="text-muted-foreground">
+					This means you define the data view once, and it works correctly for
+					all users based on their permissions—no need to write separate queries
+					for different roles.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Served outputs</h2>
-        <p className="text-muted-foreground">
-          From a DataViewSpec, ContractSpec serves:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Database queries</strong> – Optimized SQL or NoSQL queries
-            executed at runtime
-          </li>
-          <li>
-            <strong>API endpoints</strong> – RESTful or GraphQL endpoints for
-            fetching data
-          </li>
-          <li>
-            <strong>UI components</strong> – List views, tables, cards, and
-            detail views
-          </li>
-          <li>
-            <strong>Search interfaces</strong> – Full-text search with
-            autocomplete
-          </li>
-          <li>
-            <strong>Export functions</strong> – CSV, JSON, or Excel exports
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Served outputs</h2>
+				<p className="text-muted-foreground">
+					From a DataViewSpec, ContractSpec serves:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						<strong>Database queries</strong> – Optimized SQL or NoSQL queries
+						executed at runtime
+					</li>
+					<li>
+						<strong>API endpoints</strong> – RESTful or GraphQL endpoints for
+						fetching data
+					</li>
+					<li>
+						<strong>UI components</strong> – List views, tables, cards, and
+						detail views
+					</li>
+					<li>
+						<strong>Search interfaces</strong> – Full-text search with
+						autocomplete
+					</li>
+					<li>
+						<strong>Export functions</strong> – CSV, JSON, or Excel exports
+					</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>
-            Only expose fields that users actually need—this improves
-            performance and security.
-          </li>
-          <li>Use appropriate indexes for sortable and filterable fields.</li>
-          <li>
-            Set reasonable pagination limits to prevent performance issues.
-          </li>
-          <li>
-            Use aggregations sparingly—they can be expensive on large datasets.
-          </li>
-          <li>
-            Test DataViews with realistic data volumes to ensure they perform
-            well.
-          </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>
+						Only expose fields that users actually need—this improves
+						performance and security.
+					</li>
+					<li>Use appropriate indexes for sortable and filterable fields.</li>
+					<li>
+						Set reasonable pagination limits to prevent performance issues.
+					</li>
+					<li>
+						Use aggregations sparingly—they can be expensive on large datasets.
+					</li>
+					<li>
+						Test DataViews with realistic data volumes to ensure they perform
+						well.
+					</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/specs/workflows" className="btn-primary">
-          Next: Workflows <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/specs/workflows" className="btn-primary">
+					Next: Workflows <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }