@eventcatalog/core 5.0.0-beta.27 → 5.0.0-beta.29

package/eventcatalog/src/components/Settings/LlmAccessSettingsForm.tsx

@@ -64,44 +64,49 @@ export const LlmAccessSettingsForm = ({ canEdit, initial, apiBase, llmsTxtUrl, l
   };
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+    <>
       <Toaster richColors closeButton position="bottom-right" theme="system" />
-      {!canEdit && (
-        <div className="pb-6">
-          <ReadOnlyBanner />
-        </div>
-      )}
-
-      <Row
-        title="llms.txt"
-        description="Generate llms.txt files so tools like Claude, ChatGPT, and Cursor can read your catalog at /llms.txt."
-        canEdit={canEdit}
-        dirty={dirty}
-        saving={saving}
-        onSave={save}
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]"
       >
-        <ToggleRow
-          icon={<Bot className="h-4 w-4" aria-hidden />}
-          label={llmsTxtEnabled ? 'Enabled' : 'Disabled'}
-          hint={
-            llmsTxtEnabled ? 'AI tools can read your catalog at /llms.txt.' : 'AI tools will not be able to read your catalog.'
-          }
-          checked={llmsTxtEnabled}
-          disabled={!canEdit}
-          onChange={setLlmsTxtEnabled}
-        />
-        {llmsTxtEnabled && <LlmsTxtPreview url={llmsTxtUrl} fullUrl={llmsFullTxtUrl} />}
-      </Row>
+        {!canEdit && (
+          <div className="pb-6">
+            <ReadOnlyBanner />
+          </div>
+        )}
 
-      <Row
-        title="schemas.txt"
-        description="Give LLMs access to every schema across your organization in one place — events, commands, queries, and services."
-        canEdit={false}
-        dirty={false}
-      >
-        <SchemasTxtAvailable url={schemasTxtUrl} />
-      </Row>
-    </form>
+        <Row
+          title="llms.txt"
+          description="Generate llms.txt files so tools like Claude, ChatGPT, and Cursor can read your catalog at /llms.txt."
+          canEdit={canEdit}
+          dirty={dirty}
+          saving={saving}
+          onSave={save}
+        >
+          <ToggleRow
+            icon={<Bot className="h-4 w-4" aria-hidden />}
+            label={llmsTxtEnabled ? 'Enabled' : 'Disabled'}
+            hint={
+              llmsTxtEnabled ? 'AI tools can read your catalog at /llms.txt.' : 'AI tools will not be able to read your catalog.'
+            }
+            checked={llmsTxtEnabled}
+            disabled={!canEdit}
+            onChange={setLlmsTxtEnabled}
+          />
+          {llmsTxtEnabled && <LlmsTxtPreview url={llmsTxtUrl} fullUrl={llmsFullTxtUrl} />}
+        </Row>
+
+        <Row
+          title="schemas.txt"
+          description="Give LLMs access to every schema across your organization in one place — events, commands, queries, and services."
+          canEdit={false}
+          dirty={false}
+        >
+          <SchemasTxtAvailable url={schemasTxtUrl} />
+        </Row>
+      </form>
+    </>
   );
 };
 

package/eventcatalog/src/components/Settings/LogoUpload.tsx

@@ -75,7 +75,7 @@ export const LogoUpload = ({ canEdit, initialSrc, apiUrl, onSrcChange }: LogoUpl
       onDrop={onDrop}
       className={`relative flex items-center gap-5 rounded-lg border border-dashed px-4 py-4 transition-colors ${
         dragOver
-          ? 'border-[rgb(var(--ec-accent)/0.6)] bg-[rgb(var(--ec-accent-subtle)/0.4)]'
+          ? 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.04)]'
           : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.4)]'
       }`}
     >

package/eventcatalog/src/components/Settings/McpSettingsForm.tsx

@@ -26,7 +26,8 @@ interface Props {
 
 export const McpSettingsForm = ({ inSSR, mcpUrl, domainServers }: Props) => {
   return (
-    <div className="divide-y divide-[rgb(var(--ec-page-border))]">
+    // A top border, as on the other settings pages
+    <div className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]">
       <Row
         title="Catalog MCP Server"
         description="Connect AI agents (Claude, Cursor, VS Code and any MCP client) to every resource in your catalog: domains, services, messages, flows, schemas and the teams that own them."
@@ -63,7 +64,7 @@ const LivePill = () => (
 const CatalogServer = ({ url }: { url: string }) => (
   <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Library className="h-4 w-4" aria-hidden />
       </span>
       <div className="min-w-0 flex-1">
@@ -83,7 +84,7 @@ const CatalogServer = ({ url }: { url: string }) => (
         href={MCP_DOCS_URL}
         target="_blank"
         rel="noreferrer"
-        className="mt-3 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-accent))] hover:underline"
+        className="mt-3 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-page-text))] hover:underline"
       >
         How to connect a client
         <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
@@ -100,7 +101,7 @@ const DomainServers = ({ servers }: { servers: DomainMcpServer[] }) => (
           <a
             href={server.docsUrl}
             title={server.summary}
-            className="inline-flex min-w-0 items-center gap-2 text-[13px] font-medium text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))]"
+            className="inline-flex min-w-0 items-center gap-2 text-[13px] font-medium text-[rgb(var(--ec-page-text))] hover:underline"
           >
             <Boxes className="h-3.5 w-3.5 flex-shrink-0 self-center text-[rgb(var(--ec-icon-color))]" aria-hidden />
             <span className="truncate">{server.name}</span>
@@ -114,15 +115,15 @@ const DomainServers = ({ servers }: { servers: DomainMcpServer[] }) => (
 );
 
 const McpNeedsSSR = () => (
-  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-gradient-to-br from-[rgb(var(--ec-accent)/0.1)] via-[rgb(var(--ec-accent)/0.05)] to-transparent">
+  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <ServerCog className="h-4 w-4" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
           <p className="text-[13px] font-semibold text-[rgb(var(--ec-page-text))]">Server output mode required</p>
-          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-accent))]">
+          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text))]">
             SSR
           </span>
         </div>
@@ -134,7 +135,7 @@ const McpNeedsSSR = () => (
             href={MCP_DOCS_URL}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-accent))] px-3 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             MCP setup guide
             <ExternalLink className="h-3 w-3" aria-hidden />

package/eventcatalog/src/components/Settings/Row.tsx

@@ -3,7 +3,7 @@ import { AlertCircle } from 'lucide-react';
 export const cn = (...parts: Array<string | false | undefined | null>): string => parts.filter(Boolean).join(' ');
 
 export const inputBase =
-  'block w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg,var(--ec-page-bg)))] px-3 py-2 text-[13px] text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-page-text-muted)/0.7)] transition-colors focus:border-[rgb(var(--ec-accent)/0.6)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)] disabled:cursor-not-allowed disabled:opacity-60';
+  'block w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg,var(--ec-page-bg)))] px-3 py-2 text-[13px] text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-page-text-muted)/0.7)] transition-colors focus:border-[rgb(var(--ec-page-text)/0.5)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-page-text)/0.15)] disabled:cursor-not-allowed disabled:opacity-60';
 
 export const monoInput = 'font-mono text-[12.5px] tracking-tight';
 
@@ -11,7 +11,9 @@ export const inputError = 'border-red-500/70 focus:border-red-500 focus:ring-red
 
 interface RowProps {
   title: string;
-  description: string;
+  description: React.ReactNode;
+  /** Shown under the description, in the left column */
+  aside?: React.ReactNode;
   canEdit: boolean;
   dirty: boolean;
   saving?: boolean;
@@ -20,13 +22,14 @@ interface RowProps {
   children: React.ReactNode;
 }
 
-export const Row = ({ title, description, canEdit, dirty, saving, onSave, error, children }: RowProps) => (
+export const Row = ({ title, description, aside, canEdit, dirty, saving, onSave, error, children }: RowProps) => (
   <section className="grid grid-cols-1 gap-6 py-8 md:grid-cols-[minmax(0,_18rem)_minmax(0,_1fr)] md:gap-12">
     <header className="space-y-1.5">
       <h3 className="text-[14px] font-semibold tracking-tight text-[rgb(var(--ec-page-text))]">{title}</h3>
       <p className="text-[13px] leading-relaxed text-[rgb(var(--ec-content-text-muted,var(--ec-page-text-muted)))]">
         {description}
       </p>
+      {aside && <div className="pt-3">{aside}</div>}
     </header>
     <div className="space-y-2.5">
       {children}
@@ -45,7 +48,7 @@ export const Row = ({ title, description, canEdit, dirty, saving, onSave, error,
             className={cn(
               'inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-[12px] font-medium transition-colors',
               dirty && !saving
-                ? 'border-[rgb(var(--ec-accent)/0.5)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.8)]'
+                ? 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-page-text)/0.08)]'
                 : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))]',
               'disabled:cursor-not-allowed disabled:opacity-60'
             )}

package/eventcatalog/src/components/Settings/SettingsShared.tsx

@@ -32,7 +32,7 @@ export const UrlPanel = ({ url }: UrlPanelProps) => {
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="flex-1 truncate rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-2.5 py-1.5 font-mono text-[12px] text-[rgb(var(--ec-page-text))] transition-colors hover:border-[rgb(var(--ec-accent)/0.5)] hover:text-[rgb(var(--ec-accent))]"
+        className="flex-1 truncate rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-2.5 py-1.5 font-mono text-[12px] text-[rgb(var(--ec-page-text))] transition-colors hover:border-[rgb(var(--ec-page-text)/0.4)]"
       >
         {fullUrl}
       </a>
@@ -72,13 +72,13 @@ export const Toggle = ({ checked, disabled, onChange }: ToggleProps) => (
     onClick={() => onChange(!checked)}
     className={cn(
       'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors',
-      checked ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-text-muted)/0.35)]',
+      checked ? 'bg-[rgb(var(--ec-page-text))]' : 'bg-[rgb(var(--ec-page-text-muted)/0.35)]',
       disabled && 'cursor-not-allowed opacity-50'
     )}
   >
     <span
       className={cn(
-        'inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform',
+        'inline-block h-3.5 w-3.5 transform rounded-full bg-[rgb(var(--ec-page-bg))] shadow-sm transition-transform',
         checked ? 'translate-x-[1.125rem]' : 'translate-x-[0.1875rem]'
       )}
     />

package/eventcatalog/src/components/TrialBadge.astro

@@ -1,7 +1,7 @@
 ---
 import catalog from '@utils/eventcatalog-config/catalog';
 import { isDevMode } from '@utils/feature';
-import { getLicenseDaysLeft, getTrialStatus, LICENSE_FAQ_URL, TRIAL_LENGTH_DAYS } from '@utils/trial';
+import { BUY_BUSINESS_URL, getLicenseDaysLeft, getTrialStatus, TRIAL_LENGTH_DAYS } from '@utils/trial';
 import { getLicenseStatus } from '@utils/license';
 import { buildUrl } from '@utils/url-builder';
 
@@ -29,20 +29,17 @@ const title = licenseExpired
   : licenseDaysLeft !== undefined
     ? `Your EventCatalog commercial license expires on ${licensedUntil?.toLocaleDateString()}. Renew it to keep using EventCatalog commercially.`
     : trial?.ended
-      ? `Your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial ended on ${trial.endsAt.toLocaleDateString()}. Learn about licensing.`
-      : `You're on a ${TRIAL_LENGTH_DAYS}-day EventCatalog trial, ending on ${trial?.endsAt.toLocaleDateString()}. Learn about licensing.`;
+      ? `Your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial ended on ${trial.endsAt.toLocaleDateString()}. See your license settings.`
+      : `You're on a ${TRIAL_LENGTH_DAYS}-day EventCatalog trial, ending on ${trial?.endsAt.toLocaleDateString()}. See your license settings.`;
 const warning = licenseExpired || licenseDaysLeft !== undefined || trial?.ended;
-// An expiring or expired license opens the license settings (where it's renewed), the trial the license FAQ
-const isLicense = licenseExpired || licenseDaysLeft !== undefined;
-const href = isLicense ? buildUrl('/settings/license') : LICENSE_FAQ_URL;
+// The badge opens Settings > License, where the license is renewed or bought
+const href = buildUrl('/settings/license');
 ---
 
 {
   (licenseExpired || licenseDaysLeft !== undefined || trial) && (
     <a
       href={href}
-      target={isLicense ? undefined : '_blank'}
-      rel={isLicense ? undefined : 'noopener noreferrer'}
       title={title}
       data-trial-ended={trial?.ended ? 'true' : undefined}
       data-license-expired={licenseExpired ? 'true' : undefined}
@@ -50,7 +47,7 @@ const href = isLicense ? buildUrl('/settings/license') : LICENSE_FAQ_URL;
         'inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-medium transition-colors',
         warning
           ? 'border-[rgb(var(--ec-badge-color-amber-text)/0.3)] bg-[rgb(var(--ec-badge-color-amber-background))] text-[rgb(var(--ec-badge-color-amber-text))] hover:opacity-90'
-          : 'border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent)/0.15)]',
+          : 'border-transparent bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] hover:opacity-85',
       ]}
     >
       <svg
@@ -80,3 +77,17 @@ const href = isLicense ? buildUrl('/settings/license') : LICENSE_FAQ_URL;
     </a>
   )
 }
+{
+  /* Once the trial has ended, a link to buy the Business plan sits next to the badge */
+  trial?.ended && (
+    <a
+      href={BUY_BUSINESS_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-buy-business="true"
+      class="inline-flex items-center whitespace-nowrap rounded-full border border-transparent bg-[rgb(var(--ec-page-text))] px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-bg))] transition-opacity hover:opacity-85"
+    >
+      Buy Business
+    </a>
+  )
+}

package/eventcatalog/src/layouts/SettingsLayout.astro

@@ -1,7 +1,7 @@
 ---
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
 import { buildUrl } from '@utils/url-builder';
-import { Settings, Server, Bot, FileText, BadgeCheck } from 'lucide-react';
+import { Settings, Server, Bot, ScanText, BadgeCheck } from 'lucide-react';
 
 export type SettingsSection = 'general' | 'mcp' | 'assistant' | 'llm-access' | 'license';
 
@@ -55,7 +55,7 @@ const groups: SectionGroup[] = [
         id: 'llm-access',
         label: 'LLM Access',
         href: buildUrl('/settings/llm-access'),
-        icon: FileText,
+        icon: ScanText,
       },
     ],
   },

package/eventcatalog/src/pages/settings/license.astro

@@ -11,8 +11,16 @@ const license: LicenseProps =
     ? { ...status, issuedAt: status.issuedAt?.getTime(), expiresAt: status.expiresAt?.getTime() }
     : status;
 const trialStartedAt = typeof catalog?.tsd === 'number' ? catalog.tsd : undefined;
+// The license on the main branch, the same text as www.eventcatalog.dev/license
+const licenseUrl = 'https://github.com/event-catalog/eventcatalog/blob/main/LICENSE';
 ---
 
 <SettingsLayout title="License" active="license">
-  <LicenseSettings client:load license={license} trialStartedAt={trialStartedAt} renderedAt={Date.now()} />
+  <LicenseSettings
+    client:load
+    license={license}
+    trialStartedAt={trialStartedAt}
+    renderedAt={Date.now()}
+    licenseUrl={licenseUrl}
+  />
 </SettingsLayout>

package/eventcatalog/src/utils/license.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { clearCache, hasCommercialLicense, verifyOfflineLicense } from '@eventcatalog/license';
 
-export { LICENSE_FAQ_URL, LICENSE_RENEW_URL } from './trial';
+export { BUY_BUSINESS_URL, LICENSE_FAQ_URL, LICENSE_RENEW_URL, PRICING_URL } from './trial';
 
 // Details from the license token
 export type LicenseDetails = { org?: string; licenseId?: string; issuedAt?: Date };

package/eventcatalog/src/utils/trial.ts

@@ -5,6 +5,19 @@ export const LICENSE_FAQ_URL = 'https://www.eventcatalog.dev/license-faq';
 // Where a commercial license is renewed
 export const LICENSE_RENEW_URL = 'https://eventcatalog.cloud';
 
+// Where the Business plan is bought: the order form on the website
+export const BUY_BUSINESS_URL = 'https://www.eventcatalog.dev/buy?source=cli';
+
+// Prices for a commercial license, linked while the trial is running
+export const PRICING_URL = 'https://www.eventcatalog.dev/pricing';
+
+// Questions about licensing or buying: talk to the EventCatalog team
+export const TALK_TO_US_URL = 'https://www.eventcatalog.dev/book-demo';
+
+// Shown with the trial, so organisations that qualify for Free Use don't read it as "EventCatalog is now paid"
+export const FREE_USE_NOTE =
+  'Under $10M revenue and $10M raised, an individual or an open-source project? You qualify for Free Use; get a free key at eventcatalog.cloud.';
+
 const DAY_IN_MS = 24 * 60 * 60 * 1000;
 
 export type TrialStatus = {

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.0.0-beta.27",
+  "version": "5.0.0-beta.29",
   "publishConfig": {
     "access": "public"
   },
@@ -142,8 +142,8 @@
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
     "@eventcatalog/linter": "1.2.0-beta.4",
-    "@eventcatalog/sdk": "2.30.0-beta.1",
-    "@eventcatalog/visualiser": "^5.0.0-beta.6"
+    "@eventcatalog/visualiser": "^5.0.0-beta.6",
+    "@eventcatalog/sdk": "2.30.0-beta.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",

package/dist/{chunk-A2RZR3U4.js → chunk-6K7XZAYI.js}

@@ -1,9 +1,9 @@
-import {
-  createFileSystemSourceProvider
-} from "./chunk-SDZQJTJW.js";
 import {
   createGitHubSourceProvider
 } from "./chunk-352FGP6W.js";
+import {
+  createFileSystemSourceProvider
+} from "./chunk-SDZQJTJW.js";
 
 // src/federation/source-provider.ts
 var createFederationSourceProvider = (projectDirectory, providers = {}) => {