@contractspec/bundle.library 3.7.6 → 3.8.2

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

@@ -1,310 +1,146 @@
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
-// export const metadata = {
-//   title: 'Libraries: ContractSpec Docs',
-//   description:
-//     'Explore the LSSM library ecosystem for building type-safe, policy-enforced applications.',
-// };
+const libraryGroups = [
+	{
+		title: 'Contract and schema foundation',
+		body: 'Use these packages to define explicit contracts, schemas, and generated artifacts without inventing a new platform-specific language.',
+		items: [
+			{
+				title: '@contractspec/lib.contracts-spec',
+				description:
+					'Define operations, events, policies, and generated surfaces in TypeScript.',
+				href: '/docs/libraries/contracts',
+			},
+			{
+				title: '@contractspec/lib.schema',
+				description:
+					'Share type-safe schema definitions across validation, clients, and runtime adapters.',
+				href: '/docs/libraries/schema',
+			},
+		],
+	},
+	{
+		title: 'Runtime and surface libraries',
+		body: 'These packages execute the contract model across UI, data, observability, workflows, and generated runtime behavior.',
+		items: [
+			{
+				title: '@contractspec/lib.runtime',
+				description:
+					'Run typed capability surfaces, execute policies, and connect runtime adapters.',
+				href: '/docs/libraries/runtime',
+			},
+			{
+				title: '@contractspec/lib.ui-kit',
+				description:
+					'Render shared surfaces across web and React Native without forking the contract layer.',
+				href: '/docs/libraries/ui-kit',
+			},
+			{
+				title: '@contractspec/lib.design-system',
+				description:
+					'Build higher-level product surfaces and documented marketing/docs primitives on top of the UI kit.',
+				href: '/docs/libraries/design-system',
+			},
+			{
+				title: '@contractspec/lib.data-views',
+				description:
+					'Generate and render list/detail style surfaces that stay aligned with data contracts.',
+				href: '/docs/libraries/data-views',
+			},
+		],
+	},
+	{
+		title: 'Operator and system packages',
+		body: 'These packages matter once the system is live and you need governance, resilience, and observability.',
+		items: [
+			{
+				title: '@contractspec/lib.observability',
+				description:
+					'Trace, log, and measure contract execution using the same system boundaries.',
+				href: '/docs/libraries/observability',
+			},
+			{
+				title: '@contractspec/lib.resilience',
+				description:
+					'Add circuit breakers, retries, and failure controls without hiding the integration model.',
+				href: '/docs/libraries/resilience',
+			},
+			{
+				title: '@contractspec/lib.multi-tenancy',
+				description:
+					'Keep tenant-specific config, policy, and surface resolution explicit.',
+				href: '/docs/libraries/multi-tenancy',
+			},
+			{
+				title: '@contractspec/lib.workflow-composer',
+				description:
+					'Compose and extend workflows without smearing orchestration concerns across apps.',
+				href: '/docs/libraries/workflow-composer',
+			},
+		],
+	},
+];
 
 export function LibrariesOverviewPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Libraries Overview</h1>
-        <p className="text-muted-foreground">
-          The LSSM ecosystem provides a comprehensive set of TypeScript
-          libraries for building modern web and mobile applications. All
-          libraries are designed to work together seamlessly while remaining
-          modular and independently useful.
-        </p>
-      </div>
+	return (
+		<div className="space-y-10">
+			<div className="space-y-3">
+				<p className="editorial-kicker">Build</p>
+				<h1 className="font-serif text-4xl tracking-[-0.04em] md:text-5xl">
+					The OSS foundation is a library system, not a closed platform.
+				</h1>
+				<p className="max-w-3xl text-lg text-muted-foreground leading-8">
+					ContractSpec is assembled from libraries that remain useful on their
+					own and stronger together. Start with the contract and schema
+					foundation, then add runtime, UI, integration, and operator packages
+					as your system grows.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Core Libraries</h2>
-        <div className="grid gap-4 md:grid-cols-2">
-          <Link
-            href="/docs/libraries/contracts"
-            className="card-subtle group p-6 transition-colors hover:border-violet-500/50"
-          >
-            <h3 className="text-lg font-bold transition-colors group-hover:text-violet-400">
-              @contractspec/lib.contracts-spec
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Define operations, events, and policies in pure TypeScript.
-              Runtime adapters serve them as REST/GraphQL/MCP endpoints.
-            </p>
-            <div className="mt-3 flex items-center gap-2 text-sm text-violet-400">
-              Learn more <ChevronRight size={14} />
-            </div>
-          </Link>
+			<div className="editorial-proof-strip">
+				<div className="editorial-stat">
+					<span className="editorial-label">Layering rule</span>
+					<span className="editorial-stat-value">libs → bundles → apps</span>
+				</div>
+				<p className="max-w-2xl text-muted-foreground text-sm leading-7">
+					Keep reusable behavior in libraries, compose it into bundle-level
+					surfaces, and reserve app packages for concrete delivery shells.
+				</p>
+			</div>
 
-          <Link
-            href="/docs/libraries/schema"
-            className="card-subtle group p-6 transition-colors hover:border-violet-500/50"
-          >
-            <h3 className="text-lg font-bold transition-colors group-hover:text-violet-400">
-              @contractspec/lib.schema
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Type-safe schema models that export to Zod, Pothos GraphQL, and
-              JSON Schema from a single source.
-            </p>
-            <div className="mt-3 flex items-center gap-2 text-sm text-violet-400">
-              Learn more <ChevronRight size={14} />
-            </div>
-          </Link>
-        </div>
-      </div>
+			<div className="space-y-6">
+				{libraryGroups.map((group) => (
+					<section key={group.title} className="editorial-panel space-y-5">
+						<div className="space-y-2">
+							<h2 className="font-serif text-3xl tracking-[-0.03em]">
+								{group.title}
+							</h2>
+							<p className="text-muted-foreground text-sm leading-7">
+								{group.body}
+							</p>
+						</div>
 
-      <div className="space-y-4">
-        <h2 className="flex items-center gap-2 text-2xl font-bold">
-          AI-Native Operations
-          <span className="badge badge-secondary text-xs">Featured</span>
-        </h2>
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {[
-            {
-              title: '@contractspec/lib.ai-agent',
-              description:
-                'Agent specs, runner, memory, and approval workflow for safe AI copilots.',
-              href: '/docs/libraries/ai-agent',
-            },
-            {
-              title: '@contractspec/lib.support-bot',
-              description:
-                'Classification, RAG resolver, auto-responder, and performance loop for L1 automation.',
-              href: '/docs/libraries/support-bot',
-            },
-            {
-              title: '@contractspec/lib.content-gen',
-              description:
-                'Blog, landing, email, social, and SEO generators powered by ContentBriefs.',
-              href: '/docs/libraries/content-gen',
-            },
-            {
-              title: '@contractspec/lib.analytics',
-              description:
-                'Funnels, cohorts, churn scoring, and hypothesis generation without a warehouse.',
-              href: '/docs/libraries/analytics',
-            },
-            {
-              title: '@contractspec/lib.growth',
-              description:
-                'Experiment registry, runner, tracker, and stats engine for deterministic A/B tests.',
-              href: '/docs/libraries/growth',
-            },
-            {
-              title: '@contractspec/lib.design-system',
-              description:
-                'Now includes ApprovalQueue + AgentMonitor for human-in-the-loop decisions.',
-              href: '/docs/libraries/design-system',
-            },
-          ].map((lib) => (
-            <Link
-              key={lib.title}
-              href={lib.href}
-              className="card-subtle group p-6 transition-colors hover:border-violet-500/50"
-            >
-              <h3 className="text-lg font-bold transition-colors group-hover:text-violet-400">
-                {lib.title}
-              </h3>
-              <p className="text-muted-foreground mt-2 text-sm">
-                {lib.description}
-              </p>
-              <div className="mt-3 flex items-center gap-2 text-sm text-violet-400">
-                Learn more <ChevronRight size={14} />
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="flex items-center gap-2 text-2xl font-bold">
-          Personalization & Customization
-          <span className="badge badge-primary text-xs">Featured</span>
-        </h2>
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {[
-            {
-              title: '@contractspec/lib.personalization',
-              description:
-                'Track behavior, analyze unused UI, and feed overlay/workflow adapters.',
-              href: '/docs/libraries/personalization',
-            },
-            {
-              title: '@contractspec/lib.overlay-engine',
-              description:
-                'Signed overlays with validator, registry, runtime engine, and React hooks.',
-              href: '/docs/libraries/overlay-engine',
-            },
-            {
-              title: '@contractspec/lib.workflow-composer',
-              description:
-                'Tenant-aware workflow extensions with step injection helpers.',
-              href: '/docs/libraries/workflow-composer',
-            },
-          ].map((lib) => (
-            <Link
-              key={lib.title}
-              href={lib.href}
-              className="card-subtle group p-6 transition-colors hover:border-violet-500/50"
-            >
-              <h3 className="text-lg font-bold transition-colors group-hover:text-violet-400">
-                {lib.title}
-              </h3>
-              <p className="text-muted-foreground mt-2 text-sm">
-                {lib.description}
-              </p>
-              <div className="mt-3 flex items-center gap-2 text-sm text-violet-400">
-                Learn more <ChevronRight size={14} />
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">UI Libraries</h2>
-        <div className="grid gap-4 md:grid-cols-2">
-          <Link
-            href="/docs/libraries/ui-kit"
-            className="card-subtle group p-6 transition-colors hover:border-violet-500/50"
-          >
-            <h3 className="text-lg font-bold transition-colors group-hover:text-violet-400">
-              @contractspec/lib.ui-kit
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Universal UI components for React Native and Web, built on
-              NativeWind and @rn-primitives.
-            </p>
-            <div className="mt-3 flex items-center gap-2 text-sm text-violet-400">
-              Learn more <ChevronRight size={14} />
-            </div>
-          </Link>
-
-          <Link
-            href="/docs/libraries/design-system"
-            className="card-subtle group p-6 transition-colors hover:border-violet-500/50"
-          >
-            <h3 className="text-lg font-bold transition-colors group-hover:text-violet-400">
-              @contractspec/lib.design-system
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              High-level design system components, patterns, and layouts. Built
-              on top of ui-kit.
-            </p>
-            <div className="mt-3 flex items-center gap-2 text-sm text-violet-400">
-              Learn more <ChevronRight size={14} />
-            </div>
-          </Link>
-
-          <Link
-            href="/docs/libraries/accessibility"
-            className="card-subtle group p-6 transition-colors hover:border-violet-500/50"
-          >
-            <h3 className="text-lg font-bold transition-colors group-hover:text-violet-400">
-              @contractspec/lib.accessibility
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Accessibility primitives for WCAG compliance: skip links, live
-              regions, focus management, and more.
-            </p>
-            <div className="mt-3 flex items-center gap-2 text-sm text-violet-400">
-              Learn more <ChevronRight size={14} />
-            </div>
-          </Link>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Data & Backend</h2>
-        <div className="grid gap-4 md:grid-cols-3">
-          <div className="card-subtle p-4">
-            <h3 className="font-semibold">@contractspec/app.cli-database</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Prisma wrapper and CLI for schema management
-            </p>
-          </div>
-          <div className="card-subtle p-4">
-            <h3 className="font-semibold">@contractspec/lib.bus</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Type-safe event bus for in-memory and distributed events
-            </p>
-          </div>
-          <div className="card-subtle p-4">
-            <h3 className="font-semibold">@contractspec/lib.logger</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Structured logging optimized for Bun with Elysia integration
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">GraphQL</h2>
-        <div className="grid gap-4 md:grid-cols-3">
-          <div className="card-subtle p-4">
-            <h3 className="font-semibold">@contractspec/lib.graphql-core</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Shared Pothos builder with plugins
-            </p>
-          </div>
-          <div className="card-subtle p-4">
-            <h3 className="font-semibold">@contractspec/lib.graphql-prisma</h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Prisma integration for Pothos schemas
-            </p>
-          </div>
-          <div className="card-subtle p-4">
-            <h3 className="font-semibold">
-              @contractspec/lib.graphql-federation
-            </h3>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Apollo Federation support for Pothos
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Philosophy</h2>
-        <p className="text-muted-foreground">
-          All LSSM libraries follow these principles:
-        </p>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            <strong>Type Safety First</strong>: Full TypeScript support with
-            strict types.
-          </li>
-          <li>
-            <strong>Modular</strong>: Use only what you need, tree-shake the
-            rest.
-          </li>
-          <li>
-            <strong>Platform Aware</strong>: Optimized for both Web and Native
-            where applicable.
-          </li>
-          <li>
-            <strong>Single Source of Truth</strong>: Avoid duplication between
-            layers (REST, GraphQL, Zod).
-          </li>
-          <li>
-            <strong>Developer Experience</strong>: Clear APIs, comprehensive
-            docs, and helpful error messages.
-          </li>
-        </ul>
-      </div>
-
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/libraries/contracts" className="btn-primary">
-          Explore Contracts <ChevronRight size={16} />
-        </Link>
-        <Link href="/docs/getting-started" className="btn-ghost">
-          Getting Started
-        </Link>
-      </div>
-    </div>
-  );
+						<div className="grid gap-4 md:grid-cols-2">
+							{group.items.map((item) => (
+								<Link
+									key={item.title}
+									href={item.href}
+									className="rounded-[24px] border border-border/75 bg-background/70 p-5 transition-colors hover:border-[color:rgb(162_79_42_/_0.45)]"
+								>
+									<h3 className="font-semibold text-lg">{item.title}</h3>
+									<p className="mt-2 text-muted-foreground text-sm leading-7">
+										{item.description}
+									</p>
+									<div className="mt-3 flex items-center gap-2 text-[color:var(--rust)] text-sm">
+										Learn more <ChevronRight size={14} />
+									</div>
+								</Link>
+							))}
+						</div>
+					</section>
+				))}
+			</div>
+		</div>
+	);
 }

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

@@ -3,32 +3,32 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function LibrariesPersonalizationPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">
-          @contractspec/lib.personalization
-        </h1>
-        <p className="text-muted-foreground text-lg">
-          Track field/feature/workflow usage, analyze drop-offs, and convert
-          insights into OverlaySpecs or workflow tweaks.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">
+					@contractspec/lib.personalization
+				</h1>
+				<p className="text-lg text-muted-foreground">
+					Track field/feature/workflow usage, analyze drop-offs, and convert
+					insights into OverlaySpecs or workflow tweaks.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Installation</h2>
-        <InstallCommand package="@contractspec/lib.personalization" />
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Installation</h2>
+				<InstallCommand package="@contractspec/lib.personalization" />
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Tracker</h2>
-        <p className="text-muted-foreground">
-          Buffer events per tenant/user and emit OpenTelemetry counters
-          automatically.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { createBehaviorTracker } from '@contractspec/lib.personalization';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Tracker</h2>
+				<p className="text-muted-foreground">
+					Buffer events per tenant/user and emit OpenTelemetry counters
+					automatically.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { createBehaviorTracker } from '@contractspec/lib.personalization';
 
 const tracker = createBehaviorTracker({
   store,
@@ -37,50 +37,50 @@ const tracker = createBehaviorTracker({
 
 tracker.trackFieldAccess({ operation: 'billing.createOrder', field: 'items' });
 tracker.trackWorkflowStep({ workflow: 'invoice', step: 'review', status: 'entered' });`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Analyzer</h2>
-        <p className="text-muted-foreground">
-          Summarize events and highlight unused UI, frequent fields, and
-          workflow bottlenecks.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { BehaviorAnalyzer } from '@contractspec/lib.personalization/analyzer';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Analyzer</h2>
+				<p className="text-muted-foreground">
+					Summarize events and highlight unused UI, frequent fields, and
+					workflow bottlenecks.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { BehaviorAnalyzer } from '@contractspec/lib.personalization/analyzer';
 
 const analyzer = new BehaviorAnalyzer(store);
 const insights = await analyzer.analyze({ tenantId: 'acme', userId: 'ops-42' });
 // { unusedFields: ['internalNotes'], workflowBottlenecks: [...] }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Adapter</h2>
-        <p className="text-muted-foreground">
-          Convert insights into overlays or workflow extension hints.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`import { insightsToOverlaySuggestion } from '@contractspec/lib.personalization/adapter';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Adapter</h2>
+				<p className="text-muted-foreground">
+					Convert insights into overlays or workflow extension hints.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`import { insightsToOverlaySuggestion } from '@contractspec/lib.personalization/adapter';
 
 const overlay = insightsToOverlaySuggestion(insights, {
   overlayId: 'acme-order-form',
   tenantId: 'acme',
   capability: 'billing.createOrder',
 });`}
-        />
-      </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/overlay-engine" className="btn-primary">
-          Next: Overlay Engine <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/overlay-engine" className="btn-primary">
+					Next: Overlay Engine <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }