@contractspec/bundle.library 3.7.5 → 3.7.7

package/src/components/docs/knowledge/KnowledgeSpacesPage.tsx

@@ -8,22 +8,22 @@ import { ChevronRight } from 'lucide-react';
 // };
 
 export function KnowledgeSpacesPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Knowledge Spaces</h1>
-        <p className="text-muted-foreground">
-          A <strong>KnowledgeSpaceSpec</strong> defines a logical domain of
-          knowledge with a specific category, storage strategy, and intended
-          audience. Spaces are defined globally and populated per-tenant through
-          knowledge sources.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Knowledge Spaces</h1>
+				<p className="text-muted-foreground">
+					A <strong>KnowledgeSpaceSpec</strong> defines a logical domain of
+					knowledge with a specific category, storage strategy, and intended
+					audience. Spaces are defined globally and populated per-tenant through
+					knowledge sources.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">KnowledgeSpaceSpec</h2>
-        <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm">
-          <pre>{`type KnowledgeSpaceSpec = {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">KnowledgeSpaceSpec</h2>
+				<div className="overflow-x-auto rounded-lg border border-border bg-background/50 p-4 font-mono text-muted-foreground text-sm">
+					<pre>{`type KnowledgeSpaceSpec = {
   id: string;
   label: string;
   description: string;
@@ -49,16 +49,16 @@ export function KnowledgeSpacesPage() {
   createdAt: string;
   updatedAt: string;
 };`}</pre>
-        </div>
-      </div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Common knowledge spaces</h2>
-        <div className="space-y-6">
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 text-lg font-semibold">Product Canon</h3>
-            <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded border p-3 font-mono text-xs">
-              <pre>{`{
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Common knowledge spaces</h2>
+				<div className="space-y-6">
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold text-lg">Product Canon</h3>
+						<div className="overflow-x-auto rounded border border-border bg-background/50 p-3 font-mono text-muted-foreground text-xs">
+							<pre>{`{
   id: "product-canon",
   label: "Product Canon",
   description: "Official product specifications and schemas",
@@ -69,17 +69,17 @@ export function KnowledgeSpacesPage() {
   vectorDimensions: 1536,
   retentionPolicy: { versions: 10 }
 }`}</pre>
-            </div>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Use cases:</strong> Invoice generation, quote creation,
-              product recommendations, schema validation
-            </p>
-          </div>
+						</div>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Use cases:</strong> Invoice generation, quote creation,
+							product recommendations, schema validation
+						</p>
+					</div>
 
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 text-lg font-semibold">Support History</h3>
-            <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded border p-3 font-mono text-xs">
-              <pre>{`{
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold text-lg">Support History</h3>
+						<div className="overflow-x-auto rounded border border-border bg-background/50 p-3 font-mono text-muted-foreground text-xs">
+							<pre>{`{
   id: "support-history",
   label: "Support History",
   description: "Past support tickets and resolutions",
@@ -90,19 +90,19 @@ export function KnowledgeSpacesPage() {
   vectorDimensions: 1536,
   retentionPolicy: { days: 365 }
 }`}</pre>
-            </div>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Use cases:</strong> Customer support, troubleshooting,
-              similar issue detection
-            </p>
-          </div>
+						</div>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Use cases:</strong> Customer support, troubleshooting,
+							similar issue detection
+						</p>
+					</div>
 
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 text-lg font-semibold">
-              External Provider Docs
-            </h3>
-            <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded border p-3 font-mono text-xs">
-              <pre>{`{
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold text-lg">
+							External Provider Docs
+						</h3>
+						<div className="overflow-x-auto rounded border border-border bg-background/50 p-3 font-mono text-muted-foreground text-xs">
+							<pre>{`{
   id: "provider-docs",
   label: "External Provider Docs",
   description: "Third-party integration documentation",
@@ -112,17 +112,17 @@ export function KnowledgeSpacesPage() {
   indexProvider: "elasticsearch",
   retentionPolicy: { days: 90 }
 }`}</pre>
-            </div>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Use cases:</strong> Integration help, API reference,
-              troubleshooting external services
-            </p>
-          </div>
+						</div>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Use cases:</strong> Integration help, API reference,
+							troubleshooting external services
+						</p>
+					</div>
 
-          <div className="card-subtle p-4">
-            <h3 className="mb-2 text-lg font-semibold">Agent Scratchpad</h3>
-            <div className="bg-background/50 border-border text-muted-foreground overflow-x-auto rounded border p-3 font-mono text-xs">
-              <pre>{`{
+					<div className="card-subtle p-4">
+						<h3 className="mb-2 font-semibold text-lg">Agent Scratchpad</h3>
+						<div className="overflow-x-auto rounded border border-border bg-background/50 p-3 font-mono text-muted-foreground text-xs">
+							<pre>{`{
   id: "agent-scratchpad",
   label: "Agent Scratchpad",
   description: "Temporary agent working memory",
@@ -133,83 +133,83 @@ export function KnowledgeSpacesPage() {
   vectorDimensions: 1536,
   retentionPolicy: { days: 1 }
 }`}</pre>
-            </div>
-            <p className="text-muted-foreground mt-2 text-sm">
-              <strong>Use cases:</strong> Conversation continuity, intermediate
-              calculations, session state
-            </p>
-          </div>
-        </div>
-      </div>
+						</div>
+						<p className="mt-2 text-muted-foreground text-sm">
+							<strong>Use cases:</strong> Conversation continuity, intermediate
+							calculations, session state
+						</p>
+					</div>
+				</div>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Storage strategies</h2>
-        <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">Strategy</th>
-                <th className="px-4 py-3 font-semibold">Best For</th>
-                <th className="px-4 py-3 font-semibold">Providers</th>
-              </tr>
-            </thead>
-            <tbody className="divide-border/50 divide-y">
-              <tr>
-                <td className="px-4 py-3 font-mono text-xs">vector</td>
-                <td className="px-4 py-3">
-                  Semantic search, RAG, similarity matching
-                </td>
-                <td className="px-4 py-3">Qdrant, Pinecone, Weaviate</td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 font-mono text-xs">search</td>
-                <td className="px-4 py-3">
-                  Keyword search, exact matching, filtering
-                </td>
-                <td className="px-4 py-3">Elasticsearch, Algolia</td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 font-mono text-xs">hybrid</td>
-                <td className="px-4 py-3">
-                  Combined semantic + keyword search
-                </td>
-                <td className="px-4 py-3">Qdrant + Elasticsearch</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Storage strategies</h2>
+				<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">Strategy</th>
+								<th className="px-4 py-3 font-semibold">Best For</th>
+								<th className="px-4 py-3 font-semibold">Providers</th>
+							</tr>
+						</thead>
+						<tbody className="divide-y divide-border/50">
+							<tr>
+								<td className="px-4 py-3 font-mono text-xs">vector</td>
+								<td className="px-4 py-3">
+									Semantic search, RAG, similarity matching
+								</td>
+								<td className="px-4 py-3">Qdrant, Pinecone, Weaviate</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 font-mono text-xs">search</td>
+								<td className="px-4 py-3">
+									Keyword search, exact matching, filtering
+								</td>
+								<td className="px-4 py-3">Elasticsearch, Algolia</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 font-mono text-xs">hybrid</td>
+								<td className="px-4 py-3">
+									Combined semantic + keyword search
+								</td>
+								<td className="px-4 py-3">Qdrant + Elasticsearch</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>
-            Choose storage strategy based on query patterns - use vector for
-            semantic, search for exact
-          </li>
-          <li>
-            Set appropriate retention policies - canonical is permanent,
-            ephemeral is short-lived
-          </li>
-          <li>
-            Use consistent vector dimensions across spaces that will be queried
-            together
-          </li>
-          <li>Document the intended audience and use cases for each space</li>
-          <li>
-            Monitor space size and query performance - add sharding if needed
-          </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>
+						Choose storage strategy based on query patterns - use vector for
+						semantic, search for exact
+					</li>
+					<li>
+						Set appropriate retention policies - canonical is permanent,
+						ephemeral is short-lived
+					</li>
+					<li>
+						Use consistent vector dimensions across spaces that will be queried
+						together
+					</li>
+					<li>Document the intended audience and use cases for each space</li>
+					<li>
+						Monitor space size and query performance - add sharding if needed
+					</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/knowledge/categories" className="btn-ghost">
-          Previous: Categories
-        </Link>
-        <Link href="/docs/knowledge/sources" className="btn-primary">
-          Knowledge Sources <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/knowledge/categories" className="btn-ghost">
+					Previous: Categories
+				</Link>
+				<Link href="/docs/knowledge/sources" className="btn-primary">
+					Knowledge Sources <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

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

@@ -1,5 +1,5 @@
-export { KnowledgeOverviewPage } from './KnowledgeOverviewPage';
 export { KnowledgeCategoriesPage } from './KnowledgeCategoriesPage';
 export { KnowledgeExamplesPage } from './KnowledgeExamplesPage';
+export { KnowledgeOverviewPage } from './KnowledgeOverviewPage';
 export { KnowledgeSourcesPage } from './KnowledgeSourcesPage';
 export { KnowledgeSpacesPage } from './KnowledgeSpacesPage';

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

@@ -1,72 +1,72 @@
+import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
-import { CodeBlock, InstallCommand } from '@contractspec/lib.design-system';
 
 export function LibrariesAccessibilityPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">@contractspec/lib.accessibility</h1>
-        <p className="text-muted-foreground">
-          Stable exports of accessibility primitives for LSSM web apps, ensuring
-          WCAG compliance and inclusive design.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">@contractspec/lib.accessibility</h1>
+				<p className="text-muted-foreground">
+					Stable exports of accessibility primitives for LSSM web apps, ensuring
+					WCAG compliance and inclusive design.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.accessibility" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.accessibility" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Exports</h2>
-        <ul className="text-muted-foreground space-y-2">
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">SkipLink</code>
-            : A link to skip navigation, visible on focus
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              VisuallyHidden
-            </code>
-            : Hide content visually but keep it for screen readers
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              SRLiveRegionProvider
-            </code>
-            ,{' '}
-            <code className="bg-background/50 rounded px-2 py-1">
-              useSRLiveRegion
-            </code>
-            : Manage live region announcements
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              RouteAnnouncer
-            </code>
-            : Announce page title/path changes on navigation
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              FocusOnRouteChange
-            </code>
-            : Reset focus to body or main content on navigation
-          </li>
-          <li>
-            <code className="bg-background/50 rounded px-2 py-1">
-              useReducedMotion
-            </code>
-            : Detect if the user prefers reduced motion
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Exports</h2>
+				<ul className="space-y-2 text-muted-foreground">
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">SkipLink</code>
+						: A link to skip navigation, visible on focus
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							VisuallyHidden
+						</code>
+						: Hide content visually but keep it for screen readers
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							SRLiveRegionProvider
+						</code>
+						,{' '}
+						<code className="rounded bg-background/50 px-2 py-1">
+							useSRLiveRegion
+						</code>
+						: Manage live region announcements
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							RouteAnnouncer
+						</code>
+						: Announce page title/path changes on navigation
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							FocusOnRouteChange
+						</code>
+						: Reset focus to body or main content on navigation
+					</li>
+					<li>
+						<code className="rounded bg-background/50 px-2 py-1">
+							useReducedMotion
+						</code>
+						: Detect if the user prefers reduced motion
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example: App Setup</h2>
-        <CodeBlock
-          language="tsx"
-          code={`import {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example: App Setup</h2>
+				<CodeBlock
+					language="tsx"
+					code={`import {
   SRLiveRegionProvider,
   RouteAnnouncer,
   SkipLink
@@ -87,14 +87,14 @@ export function RootLayout({ children }) {
     </html>
   );
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Example: Live Announcements</h2>
-        <CodeBlock
-          language="tsx"
-          code={`import { useSRLiveRegion } from '@contractspec/lib.accessibility';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Example: Live Announcements</h2>
+				<CodeBlock
+					language="tsx"
+					code={`import { useSRLiveRegion } from '@contractspec/lib.accessibility';
 
 export function TodoList() {
   const { announce } = useSRLiveRegion();
@@ -106,32 +106,32 @@ export function TodoList() {
 
   return <button onClick={addTodo}>Add Todo</button>;
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">WCAG Compliance</h2>
-        <p className="text-muted-foreground">
-          These components map directly to WCAG 2.1 Level AA requirements
-          documented in <code>docs/accessibility_wcag_compliance_specs.md</code>
-          :
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>2.4.1 Bypass Blocks (SkipLink)</li>
-          <li>4.1.3 Status Messages (LiveRegion)</li>
-          <li>2.4.3 Focus Order (FocusOnRouteChange)</li>
-          <li>2.3.3 Animation from Interactions (useReducedMotion)</li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">WCAG Compliance</h2>
+				<p className="text-muted-foreground">
+					These components map directly to WCAG 2.1 Level AA requirements
+					documented in <code>docs/accessibility_wcag_compliance_specs.md</code>
+					:
+				</p>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>2.4.1 Bypass Blocks (SkipLink)</li>
+					<li>4.1.3 Status Messages (LiveRegion)</li>
+					<li>2.4.3 Focus Order (FocusOnRouteChange)</li>
+					<li>2.3.3 Animation from Interactions (useReducedMotion)</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries/design-system" className="btn-ghost">
-          Previous: Design System
-        </Link>
-        <Link href="/docs/libraries" className="btn-primary">
-          Back to Libraries <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/libraries/design-system" className="btn-ghost">
+					Previous: Design System
+				</Link>
+				<Link href="/docs/libraries" className="btn-primary">
+					Back to Libraries <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }