@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/comparison/ComparisonInternalToolBuildersPage.tsx

@@ -5,153 +5,153 @@
 // };
 
 export function ComparisonInternalToolBuildersPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Internal-tool builders</h1>
-        <p className="text-muted-foreground">
-          Internal-tool builders let teams quickly assemble dashboards and admin
-          panels. These platforms often provide drag-and-drop UIs and connectors
-          to databases and APIs, but they rely on developers to write custom
-          code for business logic and seldom enforce policies across surfaces.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Internal-tool builders</h1>
+				<p className="text-muted-foreground">
+					Internal-tool builders let teams quickly assemble dashboards and admin
+					panels. These platforms often provide drag-and-drop UIs and connectors
+					to databases and APIs, but they rely on developers to write custom
+					code for business logic and seldom enforce policies across surfaces.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Feature comparison</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">Feature</th>
-                <th className="px-4 py-3 font-semibold">Retool</th>
-                <th className="px-4 py-3 font-semibold">Appsmith</th>
-                <th className="px-4 py-3 font-semibold">ToolJet</th>
-                <th className="px-4 py-3 font-semibold">Budibase</th>
-              </tr>
-            </thead>
-            <tbody className="divide-border/50 divide-y">
-              <tr>
-                <td className="px-4 py-3 align-top font-semibold">
-                  UI builder
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Drag-and-drop canvas; shape UI components easily
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Visual builder with drag-and-drop widgets
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Drag-and-drop UI widgets (tables, charts, forms)
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Pre-built components and templates for mobile/desktop
-                </td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 align-top font-semibold">
-                  Custom code &amp; logic
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Full code insertion anywhere via IDE
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Logic via JavaScript or natural-language prompts in a central
-                  IDE
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Supports business logic in JavaScript or Python queries
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Custom logic via JavaScript; plugins and external embeds
-                </td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 align-top font-semibold">
-                  Data connectors
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Wide support for databases and APIs (PostgreSQL, MongoDB,
-                  GraphQL, etc.).
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Connects to LLMs and databases
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Built-in database; connects to PostgreSQL, MongoDB, APIs,
-                  GraphQL, SaaS
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Connects to external databases, REST, CSV or built-in DB
-                </td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 align-top font-semibold">
-                  Open source &amp; self-host
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Proprietary; cloud or on-prem subscription.
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Open source (Apache-2.0); self-host or cloud.
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Open source; self-host via Docker or cloud.
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Open source; self-host via Docker/Kubernetes
-                </td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 align-top font-semibold">
-                  Policy &amp; personalisation
-                </td>
-                <td className="px-4 py-3 align-top">
-                  No built-in policy engine; personalisation limited to user
-                  roles.
-                </td>
-                <td className="px-4 py-3 align-top">
-                  No typed policy engine; customisation depends on user roles.
-                </td>
-                <td className="px-4 py-3 align-top">
-                  No policy engine; personalisation via user roles.
-                </td>
-                <td className="px-4 py-3 align-top">
-                  No policy engine; personalisation via RBAC &amp; SSO
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Feature comparison</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">Feature</th>
+								<th className="px-4 py-3 font-semibold">Retool</th>
+								<th className="px-4 py-3 font-semibold">Appsmith</th>
+								<th className="px-4 py-3 font-semibold">ToolJet</th>
+								<th className="px-4 py-3 font-semibold">Budibase</th>
+							</tr>
+						</thead>
+						<tbody className="divide-y divide-border/50">
+							<tr>
+								<td className="px-4 py-3 align-top font-semibold">
+									UI builder
+								</td>
+								<td className="px-4 py-3 align-top">
+									Drag-and-drop canvas; shape UI components easily
+								</td>
+								<td className="px-4 py-3 align-top">
+									Visual builder with drag-and-drop widgets
+								</td>
+								<td className="px-4 py-3 align-top">
+									Drag-and-drop UI widgets (tables, charts, forms)
+								</td>
+								<td className="px-4 py-3 align-top">
+									Pre-built components and templates for mobile/desktop
+								</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 align-top font-semibold">
+									Custom code &amp; logic
+								</td>
+								<td className="px-4 py-3 align-top">
+									Full code insertion anywhere via IDE
+								</td>
+								<td className="px-4 py-3 align-top">
+									Logic via JavaScript or natural-language prompts in a central
+									IDE
+								</td>
+								<td className="px-4 py-3 align-top">
+									Supports business logic in JavaScript or Python queries
+								</td>
+								<td className="px-4 py-3 align-top">
+									Custom logic via JavaScript; plugins and external embeds
+								</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 align-top font-semibold">
+									Data connectors
+								</td>
+								<td className="px-4 py-3 align-top">
+									Wide support for databases and APIs (PostgreSQL, MongoDB,
+									GraphQL, etc.).
+								</td>
+								<td className="px-4 py-3 align-top">
+									Connects to LLMs and databases
+								</td>
+								<td className="px-4 py-3 align-top">
+									Built-in database; connects to PostgreSQL, MongoDB, APIs,
+									GraphQL, SaaS
+								</td>
+								<td className="px-4 py-3 align-top">
+									Connects to external databases, REST, CSV or built-in DB
+								</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 align-top font-semibold">
+									Open source &amp; self-host
+								</td>
+								<td className="px-4 py-3 align-top">
+									Proprietary; cloud or on-prem subscription.
+								</td>
+								<td className="px-4 py-3 align-top">
+									Open source (Apache-2.0); self-host or cloud.
+								</td>
+								<td className="px-4 py-3 align-top">
+									Open source; self-host via Docker or cloud.
+								</td>
+								<td className="px-4 py-3 align-top">
+									Open source; self-host via Docker/Kubernetes
+								</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 align-top font-semibold">
+									Policy &amp; personalisation
+								</td>
+								<td className="px-4 py-3 align-top">
+									No built-in policy engine; personalisation limited to user
+									roles.
+								</td>
+								<td className="px-4 py-3 align-top">
+									No typed policy engine; customisation depends on user roles.
+								</td>
+								<td className="px-4 py-3 align-top">
+									No policy engine; personalisation via user roles.
+								</td>
+								<td className="px-4 py-3 align-top">
+									No policy engine; personalisation via RBAC &amp; SSO
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
 
-      <div className="space-y-3">
-        <h2 className="text-2xl font-bold">ContractSpec’s differences</h2>
-        <ul className="text-muted-foreground space-y-2">
-          <li>
-            <strong>Typed specifications</strong> produce both the API and UI.
-            You define capabilities, data views and workflows, and the compiler
-            generates code, forms and screens—no manual widget wiring.
-          </li>
-          <li>
-            <strong>Policy enforcement</strong> at run time ensures PII and ABAC
-            rules across the entire app.
-          </li>
-          <li>
-            <strong>Overlay personalisation</strong> allows tenants and users to
-            change layouts safely without code.
-          </li>
-          <li>
-            <strong>Unified mobile/web runtime</strong> means you don’t need
-            separate builders for React Native vs web.
-          </li>
-        </ul>
-        <p className="text-muted-foreground">
-          Internal-tool builders are useful for quick dashboards. ContractSpec
-          extends this by generating the whole stack from specs and enforcing
-          policies throughout.
-        </p>
-      </div>
-    </div>
-  );
+			<div className="space-y-3">
+				<h2 className="font-bold text-2xl">ContractSpec’s differences</h2>
+				<ul className="space-y-2 text-muted-foreground">
+					<li>
+						<strong>Typed specifications</strong> produce both the API and UI.
+						You define capabilities, data views and workflows, and the compiler
+						generates code, forms and screens—no manual widget wiring.
+					</li>
+					<li>
+						<strong>Policy enforcement</strong> at run time ensures PII and ABAC
+						rules across the entire app.
+					</li>
+					<li>
+						<strong>Overlay personalisation</strong> allows tenants and users to
+						change layouts safely without code.
+					</li>
+					<li>
+						<strong>Unified mobile/web runtime</strong> means you don’t need
+						separate builders for React Native vs web.
+					</li>
+				</ul>
+				<p className="text-muted-foreground">
+					Internal-tool builders are useful for quick dashboards. ContractSpec
+					extends this by generating the whole stack from specs and enforcing
+					policies throughout.
+				</p>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/comparison/ComparisonOverviewPage.tsx

@@ -5,111 +5,111 @@
 // };
 
 export function ComparisonOverviewPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Comparison overview</h1>
-        <p className="text-muted-foreground">
-          ContractSpec sits at the intersection of several tool categories. To
-          appreciate its unique offering—typed specifications for back-end,
-          front-end, workflows and policies with a unified web/mobile
-          runtime—this section compares it to related products.
-        </p>
-        <p className="text-muted-foreground">
-          ContractSpec uses <strong>runtime adapters</strong> to serve typed{' '}
-          <strong>Operations</strong> (Commands/Queries),{' '}
-          <strong>DataViews</strong>, <strong>Workflows</strong>, and{' '}
-          <strong>Policies</strong> as REST/GraphQL/MCP endpoints. A{' '}
-          <strong>policy decision point</strong> governs every operation, and{' '}
-          <strong>OverlaySpecs</strong> allow non-technical users to personalise
-          screens safely. Few competitors offer this combination of runtime type
-          safety, policy enforcement, and end-user customisation.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Comparison overview</h1>
+				<p className="text-muted-foreground">
+					ContractSpec sits at the intersection of several tool categories. To
+					appreciate its unique offering—typed specifications for back-end,
+					front-end, workflows and policies with a unified web/mobile
+					runtime—this section compares it to related products.
+				</p>
+				<p className="text-muted-foreground">
+					ContractSpec uses <strong>runtime adapters</strong> to serve typed{' '}
+					<strong>Operations</strong> (Commands/Queries),{' '}
+					<strong>DataViews</strong>, <strong>Workflows</strong>, and{' '}
+					<strong>Policies</strong> as REST/GraphQL/MCP endpoints. A{' '}
+					<strong>policy decision point</strong> governs every operation, and{' '}
+					<strong>OverlaySpecs</strong> allow non-technical users to personalise
+					screens safely. Few competitors offer this combination of runtime type
+					safety, policy enforcement, and end-user customisation.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Tool categories</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">Category</th>
-                <th className="px-4 py-3 font-semibold">Examples</th>
-                <th className="px-4 py-3 font-semibold">What they do</th>
-                <th className="px-4 py-3 font-semibold">Limitations</th>
-              </tr>
-            </thead>
-            <tbody className="divide-border/50 divide-y">
-              <tr>
-                <td className="px-4 py-3 align-top">
-                  <strong>Workflow engines</strong>
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Prefect, Kestra, Temporal, Airflow, Dagster, Hatchet, Windmill
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Orchestrate code or data pipelines; handle retries, scheduling
-                  and observability
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Require writing code; no automatic UI generation or policy
-                  enforcement.
-                </td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 align-top">
-                  <strong>Internal-tool builders</strong>
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Retool, Appsmith, ToolJet, Budibase
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Drag-and-drop dashboards and admin panels; connect to
-                  databases/APIs
-                </td>
-                <td className="px-4 py-3 align-top">
-                  No typed back-end spec; limited enforcement of policies;
-                  custom code glues logic.
-                </td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 align-top">
-                  <strong>Automation platforms</strong>
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Zapier, Make, n8n, Pipedream
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Connect apps via triggers and actions; visual or low-code
-                  interfaces
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Automate tasks but do not generate full apps or enforce
-                  per-field policies.
-                </td>
-              </tr>
-              <tr>
-                <td className="px-4 py-3 align-top">
-                  <strong>Enterprise orchestrators</strong>
-                </td>
-                <td className="px-4 py-3 align-top">Redwood RunMyJobs</td>
-                <td className="px-4 py-3 align-top">
-                  Automate mission-critical workloads with self-service portals
-                  and SAP integrations
-                </td>
-                <td className="px-4 py-3 align-top">
-                  Focus on IT workloads; not built for custom app creation or
-                  per-user customisation.
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <p className="text-muted-foreground">
-          Use the pages below to explore each group in detail and see how
-          ContractSpec compares.
-        </p>
-      </div>
-    </div>
-  );
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Tool categories</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">Category</th>
+								<th className="px-4 py-3 font-semibold">Examples</th>
+								<th className="px-4 py-3 font-semibold">What they do</th>
+								<th className="px-4 py-3 font-semibold">Limitations</th>
+							</tr>
+						</thead>
+						<tbody className="divide-y divide-border/50">
+							<tr>
+								<td className="px-4 py-3 align-top">
+									<strong>Workflow engines</strong>
+								</td>
+								<td className="px-4 py-3 align-top">
+									Prefect, Kestra, Temporal, Airflow, Dagster, Hatchet, Windmill
+								</td>
+								<td className="px-4 py-3 align-top">
+									Orchestrate code or data pipelines; handle retries, scheduling
+									and observability
+								</td>
+								<td className="px-4 py-3 align-top">
+									Require writing code; no automatic UI generation or policy
+									enforcement.
+								</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 align-top">
+									<strong>Internal-tool builders</strong>
+								</td>
+								<td className="px-4 py-3 align-top">
+									Retool, Appsmith, ToolJet, Budibase
+								</td>
+								<td className="px-4 py-3 align-top">
+									Drag-and-drop dashboards and admin panels; connect to
+									databases/APIs
+								</td>
+								<td className="px-4 py-3 align-top">
+									No typed back-end spec; limited enforcement of policies;
+									custom code glues logic.
+								</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 align-top">
+									<strong>Automation platforms</strong>
+								</td>
+								<td className="px-4 py-3 align-top">
+									Zapier, Make, n8n, Pipedream
+								</td>
+								<td className="px-4 py-3 align-top">
+									Connect apps via triggers and actions; visual or low-code
+									interfaces
+								</td>
+								<td className="px-4 py-3 align-top">
+									Automate tasks but do not generate full apps or enforce
+									per-field policies.
+								</td>
+							</tr>
+							<tr>
+								<td className="px-4 py-3 align-top">
+									<strong>Enterprise orchestrators</strong>
+								</td>
+								<td className="px-4 py-3 align-top">Redwood RunMyJobs</td>
+								<td className="px-4 py-3 align-top">
+									Automate mission-critical workloads with self-service portals
+									and SAP integrations
+								</td>
+								<td className="px-4 py-3 align-top">
+									Focus on IT workloads; not built for custom app creation or
+									per-user customisation.
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+				<p className="text-muted-foreground">
+					Use the pages below to explore each group in detail and see how
+					ContractSpec compares.
+				</p>
+			</div>
+		</div>
+	);
 }