@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/getting-started/TroubleshootingPage.tsx

@@ -1,81 +1,81 @@
+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 TroubleshootingPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">Troubleshooting</h1>
-        <p className="text-muted-foreground text-lg">
-          Common issues and fixes when installing or generating with
-          ContractSpec.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">Troubleshooting</h1>
+				<p className="text-lg text-muted-foreground">
+					Common issues and fixes when installing or generating with
+					ContractSpec.
+				</p>
+			</div>
 
-      <div className="space-y-6">
-        <div className="card-subtle space-y-3 p-6">
-          <h2 className="text-2xl font-bold">Command not found</h2>
-          <ul className="text-muted-foreground space-y-2">
-            <li>Reinstall the CLI and ensure it is in your PATH.</li>
-            <li>Confirm Node.js 20+ or Bun 1.0+ is installed.</li>
-          </ul>
-        </div>
+			<div className="space-y-6">
+				<div className="card-subtle space-y-3 p-6">
+					<h2 className="font-bold text-2xl">Command not found</h2>
+					<ul className="space-y-2 text-muted-foreground">
+						<li>Reinstall the CLI and ensure it is in your PATH.</li>
+						<li>Confirm Node.js 20+ or Bun 1.0+ is installed.</li>
+					</ul>
+				</div>
 
-        <div className="card-subtle space-y-3 p-6">
-          <h2 className="text-2xl font-bold">Specs not discovered</h2>
-          <ul className="text-muted-foreground space-y-2">
-            <li>
-              Run <code>contractspec list</code> to see discovered specs.
-            </li>
-            <li>Verify your spec path conventions in .contractsrc.json.</li>
-          </ul>
-        </div>
+				<div className="card-subtle space-y-3 p-6">
+					<h2 className="font-bold text-2xl">Specs not discovered</h2>
+					<ul className="space-y-2 text-muted-foreground">
+						<li>
+							Run <code>contractspec list</code> to see discovered specs.
+						</li>
+						<li>Verify your spec path conventions in .contractsrc.json.</li>
+					</ul>
+				</div>
 
-        <div className="card-subtle space-y-3 p-6">
-          <h2 className="text-2xl font-bold">Build or validate fails</h2>
-          <ul className="text-muted-foreground space-y-2">
-            <li>
-              Run <code>contractspec validate</code> to surface schema errors.
-            </li>
-            <li>Check that generated files were not manually edited.</li>
-          </ul>
-        </div>
+				<div className="card-subtle space-y-3 p-6">
+					<h2 className="font-bold text-2xl">Build or validate fails</h2>
+					<ul className="space-y-2 text-muted-foreground">
+						<li>
+							Run <code>contractspec validate</code> to surface schema errors.
+						</li>
+						<li>Check that generated files were not manually edited.</li>
+					</ul>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Diagnostics</h2>
-          <CodeBlock
-            language="bash"
-            filename="troubleshooting-diagnostics"
-            code={`contractspec --version
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Diagnostics</h2>
+					<CodeBlock
+						language="bash"
+						filename="troubleshooting-diagnostics"
+						code={`contractspec --version
 contractspec list
 contractspec validate src/contracts/mySpec.ts`}
-          />
-        </div>
+					/>
+				</div>
 
-        <div className="card-subtle space-y-3 p-6">
-          <h2 className="text-2xl font-bold">Still blocked?</h2>
-          <ul className="text-muted-foreground space-y-2">
-            <li>
-              Confirm compatibility requirements for runtime and framework.
-            </li>
-            <li>Re-run builds on a clean branch to isolate changes.</li>
-            <li>Use a new spec and minimal adapter to validate setup.</li>
-          </ul>
-        </div>
-      </div>
+				<div className="card-subtle space-y-3 p-6">
+					<h2 className="font-bold text-2xl">Still blocked?</h2>
+					<ul className="space-y-2 text-muted-foreground">
+						<li>
+							Confirm compatibility requirements for runtime and framework.
+						</li>
+						<li>Re-run builds on a clean branch to isolate changes.</li>
+						<li>Use a new spec and minimal adapter to validate setup.</li>
+					</ul>
+				</div>
+			</div>
 
-      <div className="flex flex-wrap items-center gap-3 pt-2">
-        <Link href="/docs/getting-started/start-here" className="btn-ghost">
-          Start here
-        </Link>
-        <Link href="/docs/getting-started/compatibility" className="btn-ghost">
-          Compatibility
-        </Link>
-        <Link href="/docs/getting-started/installation" className="btn-primary">
-          Next: Installation <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex flex-wrap items-center gap-3 pt-2">
+				<Link href="/docs/getting-started/start-here" className="btn-ghost">
+					Start here
+				</Link>
+				<Link href="/docs/getting-started/compatibility" className="btn-ghost">
+					Compatibility
+				</Link>
+				<Link href="/docs/getting-started/installation" className="btn-primary">
+					Next: Installation <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/getting-started/VSCodeExtensionPage.tsx

@@ -1,248 +1,248 @@
+import { CodeBlock } from '@contractspec/lib.design-system';
 import Link from '@contractspec/lib.ui-link';
 import { ChevronRight, ExternalLink } from 'lucide-react';
-import { CodeBlock } from '@contractspec/lib.design-system';
 
 export function VSCodeExtensionPage() {
-  const features = [
-    {
-      category: 'Core Functionality',
-      items: [
-        'Real-time validation with instant feedback on spec errors',
-        'Build/Scaffold handlers and components from specs',
-        'Interactive spec creation wizard',
-        'Watch mode for auto-rebuild on changes',
-        'Sync all specs in workspace with one command',
-      ],
-    },
-    {
-      category: 'Visual Navigation',
-      items: [
-        'Specs Explorer sidebar with organized tree view',
-        'Dependencies view to visualize spec relationships',
-        'Build Results tracking with history',
-        'Circular dependency detection',
-      ],
-    },
-    {
-      category: 'Comparison & Export',
-      items: [
-        'Semantic and text diff between specs',
-        'Git comparison with baseline branches',
-        'OpenAPI 3.1 specification export',
-      ],
-    },
-  ];
+	const features = [
+		{
+			category: 'Core Functionality',
+			items: [
+				'Real-time validation with instant feedback on spec errors',
+				'Build/Scaffold handlers and components from specs',
+				'Interactive spec creation wizard',
+				'Watch mode for auto-rebuild on changes',
+				'Sync all specs in workspace with one command',
+			],
+		},
+		{
+			category: 'Visual Navigation',
+			items: [
+				'Specs Explorer sidebar with organized tree view',
+				'Dependencies view to visualize spec relationships',
+				'Build Results tracking with history',
+				'Circular dependency detection',
+			],
+		},
+		{
+			category: 'Comparison & Export',
+			items: [
+				'Semantic and text diff between specs',
+				'Git comparison with baseline branches',
+				'OpenAPI 3.1 specification export',
+			],
+		},
+	];
 
-  const commands = [
-    {
-      name: 'Create New Spec',
-      description: 'Interactive wizard to create specs',
-    },
-    {
-      name: 'Validate Current Spec',
-      description: 'Validate the currently open spec',
-    },
-    {
-      name: 'Build/Scaffold from Current Spec',
-      description: 'Generate handler/component',
-    },
-    { name: 'Toggle Watch Mode', description: 'Auto-rebuild on changes' },
-    { name: 'Sync All Specs', description: 'Build all specs in workspace' },
-    {
-      name: 'Analyze Spec Dependencies',
-      description: 'Visualize spec dependencies',
-    },
-    {
-      name: 'Compare Specs',
-      description: 'Semantic or text diff between specs',
-    },
-    {
-      name: 'Export to OpenAPI',
-      description: 'Generate OpenAPI specification',
-    },
-  ];
+	const commands = [
+		{
+			name: 'Create New Spec',
+			description: 'Interactive wizard to create specs',
+		},
+		{
+			name: 'Validate Current Spec',
+			description: 'Validate the currently open spec',
+		},
+		{
+			name: 'Build/Scaffold from Current Spec',
+			description: 'Generate handler/component',
+		},
+		{ name: 'Toggle Watch Mode', description: 'Auto-rebuild on changes' },
+		{ name: 'Sync All Specs', description: 'Build all specs in workspace' },
+		{
+			name: 'Analyze Spec Dependencies',
+			description: 'Visualize spec dependencies',
+		},
+		{
+			name: 'Compare Specs',
+			description: 'Semantic or text diff between specs',
+		},
+		{
+			name: 'Export to OpenAPI',
+			description: 'Generate OpenAPI specification',
+		},
+	];
 
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-4xl font-bold">VS Code Extension</h1>
-        <p className="text-muted-foreground text-lg">
-          Spec-first development directly in VS Code. Validate, scaffold, and
-          explore your contract specifications with real-time feedback.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-2">
+				<h1 className="font-bold text-4xl">VS Code Extension</h1>
+				<p className="text-lg text-muted-foreground">
+					Spec-first development directly in VS Code. Validate, scaffold, and
+					explore your contract specifications with real-time feedback.
+				</p>
+			</div>
 
-      <div className="flex flex-wrap gap-3">
-        <a
-          href="https://marketplace.visualstudio.com/items?itemName=lssm.vscode-contractspec"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="btn-primary inline-flex items-center gap-2"
-        >
-          Install Extension <ExternalLink size={16} />
-        </a>
-        <a
-          href="vscode:extension/lssm.vscode-contractspec"
-          className="btn-ghost inline-flex items-center gap-2"
-        >
-          Open in VS Code
-        </a>
-      </div>
+			<div className="flex flex-wrap gap-3">
+				<a
+					href="https://marketplace.visualstudio.com/items?itemName=lssm.vscode-contractspec"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="btn-primary inline-flex items-center gap-2"
+				>
+					Install Extension <ExternalLink size={16} />
+				</a>
+				<a
+					href="vscode:extension/lssm.vscode-contractspec"
+					className="btn-ghost inline-flex items-center gap-2"
+				>
+					Open in VS Code
+				</a>
+			</div>
 
-      <div className="space-y-6">
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Installation</h2>
-          <div className="space-y-2">
-            <p className="text-muted-foreground text-sm">
-              <strong>Option 1:</strong> Install from VS Code Marketplace
-            </p>
-            <CodeBlock
-              language="bash"
-              code="code --install-extension lssm.vscode-contractspec"
-            />
-            <p className="text-muted-foreground mt-4 text-sm">
-              <strong>Option 2:</strong> Search for &quot;ContractSpec&quot; in
-              VS Code Extensions (Ctrl/Cmd+Shift+X)
-            </p>
-          </div>
-        </div>
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Installation</h2>
+					<div className="space-y-2">
+						<p className="text-muted-foreground text-sm">
+							<strong>Option 1:</strong> Install from VS Code Marketplace
+						</p>
+						<CodeBlock
+							language="bash"
+							code="code --install-extension lssm.vscode-contractspec"
+						/>
+						<p className="mt-4 text-muted-foreground text-sm">
+							<strong>Option 2:</strong> Search for &quot;ContractSpec&quot; in
+							VS Code Extensions (Ctrl/Cmd+Shift+X)
+						</p>
+					</div>
+				</div>
 
-        <div className="space-y-4">
-          <h2 className="text-2xl font-bold">Features</h2>
-          <div className="grid gap-4 md:grid-cols-3">
-            {features.map((section) => (
-              <div key={section.category} className="card-subtle space-y-3 p-4">
-                <h3 className="font-bold text-violet-400">
-                  {section.category}
-                </h3>
-                <ul className="space-y-2">
-                  {section.items.map((item) => (
-                    <li
-                      key={item}
-                      className="text-muted-foreground flex items-start gap-2 text-sm"
-                    >
-                      <span className="mt-1 text-violet-400">-</span>
-                      <span>{item}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </div>
+				<div className="space-y-4">
+					<h2 className="font-bold text-2xl">Features</h2>
+					<div className="grid gap-4 md:grid-cols-3">
+						{features.map((section) => (
+							<div key={section.category} className="card-subtle space-y-3 p-4">
+								<h3 className="font-bold text-violet-400">
+									{section.category}
+								</h3>
+								<ul className="space-y-2">
+									{section.items.map((item) => (
+										<li
+											key={item}
+											className="flex items-start gap-2 text-muted-foreground text-sm"
+										>
+											<span className="mt-1 text-violet-400">-</span>
+											<span>{item}</span>
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</div>
+				</div>
 
-        <div className="space-y-4">
-          <h2 className="text-2xl font-bold">Commands</h2>
-          <p className="text-muted-foreground">
-            Access commands via Command Palette (Ctrl/Cmd+Shift+P) with prefix{' '}
-            <code>ContractSpec:</code>
-          </p>
-          <div className="grid gap-3 md:grid-cols-2">
-            {commands.map((cmd) => (
-              <div
-                key={cmd.name}
-                className="card-subtle flex items-center gap-3 p-3"
-              >
-                <div className="flex-1">
-                  <p className="font-mono text-sm font-medium">{cmd.name}</p>
-                  <p className="text-muted-foreground text-xs">
-                    {cmd.description}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
+				<div className="space-y-4">
+					<h2 className="font-bold text-2xl">Commands</h2>
+					<p className="text-muted-foreground">
+						Access commands via Command Palette (Ctrl/Cmd+Shift+P) with prefix{' '}
+						<code>ContractSpec:</code>
+					</p>
+					<div className="grid gap-3 md:grid-cols-2">
+						{commands.map((cmd) => (
+							<div
+								key={cmd.name}
+								className="card-subtle flex items-center gap-3 p-3"
+							>
+								<div className="flex-1">
+									<p className="font-medium font-mono text-sm">{cmd.name}</p>
+									<p className="text-muted-foreground text-xs">
+										{cmd.description}
+									</p>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Sidebar Views</h2>
-          <p className="text-muted-foreground">
-            The extension adds a ContractSpec activity bar (icon in sidebar)
-            with three views:
-          </p>
-          <div className="grid gap-4 md:grid-cols-3">
-            <div className="card-subtle space-y-2 p-4">
-              <h4 className="font-bold">Specs Explorer</h4>
-              <p className="text-muted-foreground text-sm">
-                Browse all specs organized by type. Shows name, version, and
-                stability. Click to open, right-click for actions.
-              </p>
-            </div>
-            <div className="card-subtle space-y-2 p-4">
-              <h4 className="font-bold">Dependencies</h4>
-              <p className="text-muted-foreground text-sm">
-                Visualize spec relationships. Detect circular dependencies.
-                Navigate to referenced specs.
-              </p>
-            </div>
-            <div className="card-subtle space-y-2 p-4">
-              <h4 className="font-bold">Build Results</h4>
-              <p className="text-muted-foreground text-sm">
-                Track build history (last 20). Success/failure indicators. Click
-                to open generated files.
-              </p>
-            </div>
-          </div>
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Sidebar Views</h2>
+					<p className="text-muted-foreground">
+						The extension adds a ContractSpec activity bar (icon in sidebar)
+						with three views:
+					</p>
+					<div className="grid gap-4 md:grid-cols-3">
+						<div className="card-subtle space-y-2 p-4">
+							<h4 className="font-bold">Specs Explorer</h4>
+							<p className="text-muted-foreground text-sm">
+								Browse all specs organized by type. Shows name, version, and
+								stability. Click to open, right-click for actions.
+							</p>
+						</div>
+						<div className="card-subtle space-y-2 p-4">
+							<h4 className="font-bold">Dependencies</h4>
+							<p className="text-muted-foreground text-sm">
+								Visualize spec relationships. Detect circular dependencies.
+								Navigate to referenced specs.
+							</p>
+						</div>
+						<div className="card-subtle space-y-2 p-4">
+							<h4 className="font-bold">Build Results</h4>
+							<p className="text-muted-foreground text-sm">
+								Track build history (last 20). Success/failure indicators. Click
+								to open generated files.
+							</p>
+						</div>
+					</div>
+				</div>
 
-        <div className="space-y-3">
-          <h2 className="text-2xl font-bold">Getting Started</h2>
-          <ol className="text-muted-foreground list-inside list-decimal space-y-2">
-            <li>Install the extension from VS Code Marketplace</li>
-            <li>Open a workspace with ContractSpec files (or create one)</li>
-            <li>Start the walkthrough: Help - Welcome - ContractSpec</li>
-            <li>
-              Create your first spec: Click <strong>+</strong> in Specs Explorer
-              or run <code>ContractSpec: Create New Spec</code>
-            </li>
-            <li>Build from it: Click the build icon in the editor title bar</li>
-          </ol>
-        </div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">Getting Started</h2>
+					<ol className="list-inside list-decimal space-y-2 text-muted-foreground">
+						<li>Install the extension from VS Code Marketplace</li>
+						<li>Open a workspace with ContractSpec files (or create one)</li>
+						<li>Start the walkthrough: Help - Welcome - ContractSpec</li>
+						<li>
+							Create your first spec: Click <strong>+</strong> in Specs Explorer
+							or run <code>ContractSpec: Create New Spec</code>
+						</li>
+						<li>Build from it: Click the build icon in the editor title bar</li>
+					</ol>
+				</div>
 
-        <div className="card-subtle space-y-4 p-6">
-          <h3 className="font-bold">Configuration</h3>
-          <p className="text-muted-foreground text-sm">
-            Configure the extension in VS Code Settings:
-          </p>
-          <div className="overflow-x-auto">
-            <table className="text-muted-foreground w-full text-sm">
-              <thead>
-                <tr className="border-border border-b">
-                  <th className="p-2 text-left font-medium">Setting</th>
-                  <th className="p-2 text-left font-medium">Description</th>
-                  <th className="p-2 text-left font-medium">Default</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-border border-b">
-                  <td className="p-2 font-mono text-xs">validation.onSave</td>
-                  <td className="p-2">Run validation on save</td>
-                  <td className="p-2">true</td>
-                </tr>
-                <tr className="border-border border-b">
-                  <td className="p-2 font-mono text-xs">validation.onOpen</td>
-                  <td className="p-2">Run validation on open</td>
-                  <td className="p-2">true</td>
-                </tr>
-                <tr className="border-border border-b">
-                  <td className="p-2 font-mono text-xs">api.baseUrl</td>
-                  <td className="p-2">Base URL for ContractSpec API</td>
-                  <td className="p-2">(empty)</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
+				<div className="card-subtle space-y-4 p-6">
+					<h3 className="font-bold">Configuration</h3>
+					<p className="text-muted-foreground text-sm">
+						Configure the extension in VS Code Settings:
+					</p>
+					<div className="overflow-x-auto">
+						<table className="w-full text-muted-foreground text-sm">
+							<thead>
+								<tr className="border-border border-b">
+									<th className="p-2 text-left font-medium">Setting</th>
+									<th className="p-2 text-left font-medium">Description</th>
+									<th className="p-2 text-left font-medium">Default</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr className="border-border border-b">
+									<td className="p-2 font-mono text-xs">validation.onSave</td>
+									<td className="p-2">Run validation on save</td>
+									<td className="p-2">true</td>
+								</tr>
+								<tr className="border-border border-b">
+									<td className="p-2 font-mono text-xs">validation.onOpen</td>
+									<td className="p-2">Run validation on open</td>
+									<td className="p-2">true</td>
+								</tr>
+								<tr className="border-border border-b">
+									<td className="p-2 font-mono text-xs">api.baseUrl</td>
+									<td className="p-2">Base URL for ContractSpec API</td>
+									<td className="p-2">(empty)</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/getting-started/tools/cli" className="btn-ghost">
-          Back: CLI
-        </Link>
-        <Link href="/docs/specs" className="btn-primary">
-          Next: Core Concepts <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/getting-started/tools/cli" className="btn-ghost">
+					Back: CLI
+				</Link>
+				<Link href="/docs/specs" className="btn-primary">
+					Next: Core Concepts <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }