@contractspec/bundle.library 3.7.6 → 3.8.2

package/src/components/docs/libraries/LibrariesCostTrackingPage.tsx

@@ -3,27 +3,27 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function LibrariesCostTrackingPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Cost Tracking Library</h1>
-        <p className="text-muted-foreground text-lg">
-          <code>@contractspec/lib.cost-tracking</code> transforms raw telemetry
-          into dollars: DB/API/compute costs per operation, budget alerts per
-          tenant, and actionable optimization tips.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Cost Tracking Library</h1>
+				<p className="text-lg text-muted-foreground">
+					<code>@contractspec/lib.cost-tracking</code> transforms raw telemetry
+					into dollars: DB/API/compute costs per operation, budget alerts per
+					tenant, and actionable optimization tips.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.cost-tracking" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.cost-tracking" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Record Samples</h2>
-        <CodeBlock
-          language="typescript"
-          code={`const tracker = new CostTracker();
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Record Samples</h2>
+				<CodeBlock
+					language="typescript"
+					code={`const tracker = new CostTracker();
 tracker.recordSample({
   operation: 'orders.list',
   tenantId: 'acme',
@@ -32,40 +32,40 @@ tracker.recordSample({
   computeMs: 180,
   externalCalls: [{ provider: 'stripe', cost: 0.02 }],
 });`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Budget Alerts</h2>
-        <CodeBlock
-          language="typescript"
-          code={`const budgets = new BudgetAlertManager({
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Budget Alerts</h2>
+				<CodeBlock
+					language="typescript"
+					code={`const budgets = new BudgetAlertManager({
   budgets: [{ tenantId: 'acme', monthlyLimit: 150 }],
   onAlert: ({ tenantId, total }) => notifyFinance(tenantId, total),
 });
 
 tracker.getTotals({ tenantId: 'acme' }).forEach((summary) => budgets.track(summary));`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Optimization Suggestions</h2>
-        <p className="text-muted-foreground text-sm">
-          Feed summaries into <code>OptimizationRecommender</code> to surface
-          N+1 queries, compute-heavy steps, or expensive external calls. Store
-          the generated suggestions in the new Prisma model to power Ops
-          playbooks.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Optimization Suggestions</h2>
+				<p className="text-muted-foreground text-sm">
+					Feed summaries into <code>OptimizationRecommender</code> to surface
+					N+1 queries, compute-heavy steps, or expensive external calls. Store
+					the generated suggestions in the new Prisma model to power Ops
+					playbooks.
+				</p>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries" className="btn-ghost">
-          Back to Libraries
-        </Link>
-        <Link href="/docs/libraries/slo" className="btn-primary">
-          Next: SLO <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries" className="btn-ghost">
+					Back to Libraries
+				</Link>
+				<Link href="/docs/libraries/slo" className="btn-primary">
+					Next: SLO <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/libraries/LibrariesDataBackendPage.tsx

@@ -1,75 +1,75 @@
+import { CodeBlock } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
-import { CodeBlock } from '@contractspec/lib.design-system';
 
 export function LibrariesDataBackendPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Data & Backend</h1>
-        <p className="text-muted-foreground">
-          A collection of robust, platform-agnostic libraries for building the
-          backend infrastructure of your LSSM applications.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Data & Backend</h1>
+				<p className="text-muted-foreground">
+					A collection of robust, platform-agnostic libraries for building the
+					backend infrastructure of your LSSM applications.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Libraries</h2>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Libraries</h2>
 
-        <div className="space-y-6">
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">
-              @contractspec/app.cli-database
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Prisma Wrapper & CLI</strong>. Provides a unified way to
-              manage database schemas, migrations, and clients. Includes seeders
-              and factory patterns for testing.
-            </p>
-          </div>
+				<div className="space-y-6">
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">
+							@contractspec/app.cli-database
+						</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Prisma Wrapper & CLI</strong>. Provides a unified way to
+							manage database schemas, migrations, and clients. Includes seeders
+							and factory patterns for testing.
+						</p>
+					</div>
 
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">@contractspec/lib.bus</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Type-Safe Event Bus</strong>. Decouple your architecture
-              with typed events. Supports in-memory dispatch for monoliths and
-              can be extended for distributed message queues (Redis, SQS).
-            </p>
-          </div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">@contractspec/lib.bus</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Type-Safe Event Bus</strong>. Decouple your architecture
+							with typed events. Supports in-memory dispatch for monoliths and
+							can be extended for distributed message queues (Redis, SQS).
+						</p>
+					</div>
 
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">@contractspec/lib.logger</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>High-Performance Logging</strong>. Optimized for Bun and
-              structured JSON output. Includes plugins for ElysiaJS to log HTTP
-              requests automatically.
-            </p>
-          </div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">@contractspec/lib.logger</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>High-Performance Logging</strong>. Optimized for Bun and
+							structured JSON output. Includes plugins for ElysiaJS to log HTTP
+							requests automatically.
+						</p>
+					</div>
 
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">@contractspec/lib.error</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Standardized Errors</strong>. Use `AppError` with standard
-              codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP
-              responses and error handling across services.
-            </p>
-          </div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">@contractspec/lib.error</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Standardized Errors</strong>. Use `AppError` with standard
+							codes (NOT_FOUND, UNAUTHORIZED) to ensure consistent HTTP
+							responses and error handling across services.
+						</p>
+					</div>
 
-          <div className="card-subtle p-6">
-            <h3 className="text-lg font-bold">@contractspec/lib.exporter</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Data Export</strong>. Generate CSV and XML files from your
-              data. Platform-agnostic and streaming-friendly.
-            </p>
-          </div>
-        </div>
-      </div>
+					<div className="card-subtle p-6">
+						<h3 className="font-bold text-lg">@contractspec/lib.exporter</h3>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Data Export</strong>. Generate CSV and XML files from your
+							data. Platform-agnostic and streaming-friendly.
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example: Unified Backend Flow</h2>
-        <CodeBlock
-          language="typescript"
-          code={`import { logger } from '@contractspec/lib.logger';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example: Unified Backend Flow</h2>
+				<CodeBlock
+					language="typescript"
+					code={`import { logger } from '@contractspec/lib.logger';
 import { AppError } from '@contractspec/lib.error';
 import { db } from '@contractspec/app.cli-database';
 import { EventBus } from '@contractspec/lib.bus';
@@ -88,17 +88,17 @@ export async function createUser(email: string) {
   
   return user;
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries/runtime" className="btn-primary">
-          Next: Runtime <ChevronRight size={16} />
-        </Link>
-        <Link href="/docs/libraries" className="btn-ghost">
-          Back to Libraries
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries/runtime" className="btn-primary">
+					Next: Runtime <ChevronRight size={16} />
+				</Link>
+				<Link href="/docs/libraries" className="btn-ghost">
+					Back to Libraries
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/libraries/LibrariesDataViewsPage.tsx

@@ -3,39 +3,39 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function LibrariesDataViewsPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">DataViews Runtime Library</h1>
-        <p className="text-muted-foreground text-lg">
-          The <code>@contractspec/lib.contracts-spec/data-views</code> and{' '}
-          <code>@contractspec/lib.design-system</code> libraries provide the
-          runtime logic and UI components to render DataViews in your
-          application.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">DataViews Runtime Library</h1>
+				<p className="text-lg text-muted-foreground">
+					The <code>@contractspec/lib.contracts-spec/data-views</code> and{' '}
+					<code>@contractspec/lib.design-system</code> libraries provide the
+					runtime logic and UI components to render DataViews in your
+					application.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand
-          package={[
-            '@contractspec/lib.contracts-spec',
-            '@contractspec/lib.design-system',
-          ]}
-        />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand
+					package={[
+						'@contractspec/lib.contracts-spec',
+						'@contractspec/lib.design-system',
+					]}
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">DataViewRenderer</h2>
-        <p className="text-muted-foreground">
-          The primary component for rendering any DataView. It automatically
-          selects the correct layout (List, Table, Grid, Detail) based on the
-          spec.
-        </p>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">DataViewRenderer</h2>
+				<p className="text-muted-foreground">
+					The primary component for rendering any DataView. It automatically
+					selects the correct layout (List, Table, Grid, Detail) based on the
+					spec.
+				</p>
 
-        <CodeBlock
-          language="tsx"
-          code={`import { DataViewRenderer } from '@contractspec/lib.design-system';
+				<CodeBlock
+					language="tsx"
+					code={`import { DataViewRenderer } from '@contractspec/lib.design-system';
 import { MyUserList } from './specs/users.data-view';
 
 export function UserPage() {
@@ -48,42 +48,42 @@ export function UserPage() {
     />
   );
 }`}
-        />
+				/>
 
-        <h3 className="text-xl font-semibold">Props</h3>
-        <ul className="text-muted-foreground list-disc space-y-2 pl-6">
-          <li>
-            <code>spec</code>: The DataViewSpec definition.
-          </li>
-          <li>
-            <code>items</code>: Array of data items to render.
-          </li>
-          <li>
-            <code>filters</code>: Current filter state object.
-          </li>
-          <li>
-            <code>onFilterChange</code>: Callback when filters change.
-          </li>
-          <li>
-            <code>pagination</code>: Object with <code>page</code>,{' '}
-            <code>pageSize</code>, <code>total</code>.
-          </li>
-          <li>
-            <code>onPageChange</code>: Callback when page changes.
-          </li>
-        </ul>
-      </div>
+				<h3 className="font-semibold text-xl">Props</h3>
+				<ul className="list-disc space-y-2 pl-6 text-muted-foreground">
+					<li>
+						<code>spec</code>: The DataViewSpec definition.
+					</li>
+					<li>
+						<code>items</code>: Array of data items to render.
+					</li>
+					<li>
+						<code>filters</code>: Current filter state object.
+					</li>
+					<li>
+						<code>onFilterChange</code>: Callback when filters change.
+					</li>
+					<li>
+						<code>pagination</code>: Object with <code>page</code>,{' '}
+						<code>pageSize</code>, <code>total</code>.
+					</li>
+					<li>
+						<code>onPageChange</code>: Callback when page changes.
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Query Generation</h2>
-        <p className="text-muted-foreground">
-          The <code>DataViewQueryGenerator</code> utility helps translate
-          DataView parameters (filters, sorting, pagination) into query
-          arguments for your backend.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Query Generation</h2>
+				<p className="text-muted-foreground">
+					The <code>DataViewQueryGenerator</code> utility helps translate
+					DataView parameters (filters, sorting, pagination) into query
+					arguments for your backend.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { DataViewQueryGenerator } from '@contractspec/lib.contracts-spec/data-views/query-generator';
 
 const generator = new DataViewQueryGenerator(MyUserList);
 const query = generator.generate({
@@ -92,17 +92,17 @@ const query = generator.generate({
 });
 
 // query.input contains { skip: 0, take: 20, role: 'admin' }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries" className="btn-ghost">
-          Back to Libraries
-        </Link>
-        <Link href="/docs/libraries/data-backend" className="btn-primary">
-          Next: Data & Backend <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries" className="btn-ghost">
+					Back to Libraries
+				</Link>
+				<Link href="/docs/libraries/data-backend" className="btn-primary">
+					Next: Data & Backend <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }