@contractspec/bundle.marketing 1.12.0

package/src/libs/email/contact.ts

@@ -0,0 +1,80 @@
+'use server';
+
+import { getEmailConfig, sendEmail } from './client';
+import { escapeHtml, formatMultilineHtml } from './utils';
+import type { SubmitContactFormResult } from './types';
+
+const CONTACT_MISSING_CONFIG =
+  'Email service is not configured. Please contact us directly at contact@contractspec.io.';
+const CONTACT_SEND_ERROR =
+  'Failed to send message. Please contact us directly at contact@contractspec.io.';
+
+export const submitContactForm = async (
+  formData: FormData
+): Promise<SubmitContactFormResult> => {
+  const name = (formData.get('name') ?? '').toString().trim();
+  const email = (formData.get('email') ?? '').toString().trim();
+  const message = (formData.get('message') ?? '').toString().trim();
+
+  if (!email) {
+    return {
+      success: false,
+      text: 'Please fill in all required fields.',
+    };
+  }
+
+  const configResult = getEmailConfig();
+  if (!configResult.ok || !configResult.config) {
+    return {
+      success: false,
+      text: configResult.errorMessage ?? CONTACT_MISSING_CONFIG,
+    };
+  }
+
+  const senderName = name || email;
+  const emailContentText = `
+New contact form submission from ${senderName}
+
+Contact Information:
+- Name: ${name || 'Not provided'}
+- Email: ${email}
+
+Message:
+${message || 'No message provided'}
+
+---
+Submitted via ContractSpec contact form
+  `.trim();
+
+  const emailContentHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6; margin-bottom: 12px;">New contact form submission</h1>
+      <p style="margin: 0 0 12px;">From ${escapeHtml(senderName)}</p>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Contact Information</h2>
+      <ul style="padding-left: 16px; line-height: 1.6; margin: 0 0 16px;">
+        <li>Name: ${escapeHtml(name || 'Not provided')}</li>
+        <li>Email: ${escapeHtml(email)}</li>
+      </ul>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Message</h2>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
+        ${message ? formatMultilineHtml(message) : 'No message provided'}
+      </div>
+      <p style="color: #6b7280; font-size: 12px; margin-top: 20px;">Submitted via ContractSpec contact form</p>
+    </div>
+  `;
+
+  const sendResult = await sendEmail(configResult.config, {
+    to: [configResult.config.teamInbox],
+    subject: `New Contact Form Message from ${senderName}`,
+    text: emailContentText,
+    html: emailContentHtml,
+    replyTo: email,
+    context: 'contact-form',
+  });
+
+  if (!sendResult.success) {
+    return { success: false, text: CONTACT_SEND_ERROR };
+  }
+
+  return { success: true, text: 'Message sent successfully!' };
+};

package/src/libs/email/newsletter.ts

@@ -0,0 +1,108 @@
+'use server';
+
+import { getEmailConfig, sendEmail } from './client';
+import { formatMultilineHtml } from './utils';
+import type { SubmitNewsletterResult } from './types';
+
+const NEWSLETTER_MISSING_CONFIG =
+  'Newsletter service is not configured. Please try again later.';
+const NEWSLETTER_SEND_ERROR =
+  'Failed to subscribe. Please try again later or contact us directly.';
+
+export const subscribeToNewsletter = async (
+  formData: FormData
+): Promise<SubmitNewsletterResult> => {
+  const email = (formData.get('email') ?? '').toString().trim();
+
+  if (!email || !email.includes('@')) {
+    return {
+      success: false,
+      text: 'Please enter a valid email address.',
+    };
+  }
+
+  const configResult = getEmailConfig();
+  if (!configResult.ok || !configResult.config) {
+    return {
+      success: false,
+      text: configResult.errorMessage ?? NEWSLETTER_MISSING_CONFIG,
+    };
+  }
+
+  const welcomeText = `
+Welcome to ContractSpec!
+
+Thanks for subscribing to our newsletter. You'll receive updates on:
+
+• New integrations (Stripe, OpenAI, Qdrant, and more)
+• Product features and improvements
+• New templates and examples
+• Architecture insights and best practices
+• Documentation updates
+
+Stay tuned for exciting updates!
+
+---
+ContractSpec Team
+https://contractspec.io
+
+Unsubscribe: Reply to this email with "unsubscribe"
+  `.trim();
+
+  const welcomeHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6;">Welcome to ContractSpec!</h1>
+      <p>Thanks for subscribing to our newsletter. You'll receive updates on:</p>
+      <ul style="line-height: 1.8;">
+        <li>New integrations (Stripe, OpenAI, Qdrant, and more)</li>
+        <li>Product features and improvements</li>
+        <li>New templates and examples</li>
+        <li>Architecture insights and best practices</li>
+        <li>Documentation updates</li>
+      </ul>
+      <p>Stay tuned for exciting updates!</p>
+      <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;" />
+      <p style="color: #6b7280; font-size: 14px;">
+        ContractSpec Team<br />
+        <a href="https://contractspec.io" style="color: #8b5cf6;">contractspec.io</a>
+      </p>
+      <p style="color: #9ca3af; font-size: 12px;">
+        To unsubscribe, reply to this email with "unsubscribe"
+      </p>
+    </div>
+  `;
+
+  const userSend = await sendEmail(configResult.config, {
+    to: [{ email }],
+    subject: 'Welcome to ContractSpec Newsletter',
+    text: welcomeText,
+    html: welcomeHtml,
+    context: 'newsletter-welcome',
+  });
+
+  if (!userSend.success) {
+    return { success: false, text: NEWSLETTER_SEND_ERROR };
+  }
+
+  const teamNotificationText = `New newsletter subscription from: ${email}`;
+  const teamNotificationHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <p style="margin: 0 0 8px;">New newsletter subscription</p>
+      <p style="margin: 0;"><strong>Email:</strong> ${formatMultilineHtml(email)}</p>
+    </div>
+  `;
+
+  const teamSend = await sendEmail(configResult.config, {
+    to: [configResult.config.teamInbox],
+    subject: `New Newsletter Subscription: ${email}`,
+    text: teamNotificationText,
+    html: teamNotificationHtml,
+    context: 'newsletter-team-notification',
+  });
+
+  if (!teamSend.success) {
+    return { success: false, text: NEWSLETTER_SEND_ERROR };
+  }
+
+  return { success: true, text: 'Successfully subscribed!' };
+};

package/src/libs/email/types.ts

@@ -0,0 +1,59 @@
+'use server';
+
+import type { Region } from '@scaleway/sdk-client';
+
+export interface SubmitContactFormResult {
+  success: boolean;
+  text: string;
+}
+
+export interface SubmitNewsletterResult {
+  success: boolean;
+  text: string;
+}
+
+export interface SubmitWaitlistResult {
+  success: boolean;
+  text: string;
+}
+
+export interface SubmitWaitlistApplicationResult {
+  success: boolean;
+  text: string;
+}
+
+export interface EmailAddress {
+  email: string;
+  name?: string;
+}
+
+export interface EmailServiceConfig {
+  accessKey: string;
+  secretKey: string;
+  projectId: string;
+  region: Region;
+  defaultZone: string;
+  from: EmailAddress;
+  teamInbox: EmailAddress;
+}
+
+export interface EmailConfigResult {
+  ok: boolean;
+  config?: EmailServiceConfig;
+  errorMessage?: string;
+}
+
+export interface SendEmailRequest {
+  to: EmailAddress[];
+  subject: string;
+  text: string;
+  html: string;
+  replyTo?: string;
+  context?: string;
+}
+
+export interface EmailSendOutcome {
+  success: boolean;
+  error?: unknown;
+  errorMessage?: string;
+}

package/src/libs/email/utils.ts

@@ -0,0 +1,8 @@
+export const escapeHtml = (value: string): string =>
+  value
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;');
+
+export const formatMultilineHtml = (value: string): string =>
+  escapeHtml(value).replaceAll('\n', '<br />');

package/src/libs/email/waitlist-application.ts

@@ -0,0 +1,192 @@
+'use server';
+
+import { getEmailConfig, sendEmail } from './client';
+import { escapeHtml, formatMultilineHtml } from './utils';
+import type { SubmitWaitlistApplicationResult } from './types';
+
+const APPLICATION_MISSING_CONFIG =
+  'Waitlist application service is not configured. Please try again later.';
+const APPLICATION_SEND_ERROR =
+  'Failed to submit application. Please try again later or contact us directly.';
+
+export const submitWaitlistApplication = async (
+  formData: FormData
+): Promise<SubmitWaitlistApplicationResult> => {
+  const email = (formData.get('email') ?? '').toString().trim();
+  const name = (formData.get('name') ?? '').toString().trim();
+  const company = (formData.get('company') ?? '').toString().trim();
+  const role = (formData.get('role') ?? '').toString().trim();
+  const useCase = (formData.get('useCase') ?? '').toString().trim();
+  const currentStack = (formData.get('currentStack') ?? '').toString().trim();
+  const whatBuilding = (formData.get('whatBuilding') ?? '').toString().trim();
+  const whatSolving = (formData.get('whatSolving') ?? '').toString().trim();
+  const teamSize = (formData.get('teamSize') ?? '').toString().trim();
+  const timeline = (formData.get('timeline') ?? '').toString().trim();
+
+  const openToSessions = formData.get('openToSessions') === 'on';
+  const okayWithCaseStudies = formData.get('okayWithCaseStudies') === 'on';
+
+  if (!email || !email.includes('@')) {
+    return {
+      success: false,
+      text: 'Please enter a valid email address.',
+    };
+  }
+
+  if (!name || !whatBuilding || !whatSolving) {
+    return {
+      success: false,
+      text: 'Please fill in all required fields.',
+    };
+  }
+
+  const configResult = getEmailConfig();
+  if (!configResult.ok || !configResult.config) {
+    return {
+      success: false,
+      text: configResult.errorMessage ?? APPLICATION_MISSING_CONFIG,
+    };
+  }
+
+  const applicantText = `
+You're on the list.
+
+Thanks for applying to the ContractSpec design partner program. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally.
+
+What happens next:
+• We review applications weekly
+• If selected, we'll reach out via email to schedule an intro call
+• During early access, you'll get hands-on support and influence over the roadmap
+
+In the meantime:
+• Check out our docs: https://contractspec.io/docs
+• Book a demo call: https://contractspec.io/contact
+
+We're excited about the possibility of working together!
+
+---
+ContractSpec Team
+https://contractspec.io
+  `.trim();
+
+  const applicantHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6;">You're on the list.</h1>
+      <p>Thanks for applying to the ContractSpec design partner program. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally.</p>
+      <h2 style="color: #8b5cf6; margin-top: 24px;">What happens next:</h2>
+      <ul style="line-height: 1.8;">
+        <li>We review applications weekly</li>
+        <li>If selected, we'll reach out via email to schedule an intro call</li>
+        <li>During early access, you'll get hands-on support and influence over the roadmap</li>
+      </ul>
+      <h2 style="color: #8b5cf6; margin-top: 24px;">In the meantime:</h2>
+      <ul style="line-height: 1.8;">
+        <li>Check out our <a href="https://contractspec.io/docs" style="color: #8b5cf6;">docs</a></li>
+        <li>Book a demo call: <a href="https://contractspec.io/contact" style="color: #8b5cf6;">contractspec.io/contact</a></li>
+      </ul>
+      <p>We're excited about the possibility of working together!</p>
+      <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;" />
+      <p style="color: #6b7280; font-size: 14px;">
+        ContractSpec Team<br />
+        <a href="https://contractspec.io" style="color: #8b5cf6;">contractspec.io</a>
+      </p>
+    </div>
+  `;
+
+  const applicantSend = await sendEmail(configResult.config, {
+    to: [{ email }],
+    subject: "You're on the ContractSpec design partner waitlist!",
+    text: applicantText,
+    html: applicantHtml,
+    context: 'waitlist-application-welcome',
+  });
+
+  if (!applicantSend.success) {
+    return { success: false, text: APPLICATION_SEND_ERROR };
+  }
+
+  const preferencesText = `
+Open to 1:1 product/design sessions: ${openToSessions ? 'Yes' : 'No'}
+Okay with anonymized case studies: ${okayWithCaseStudies ? 'Yes' : 'No'}
+  `.trim();
+
+  const teamEmailText = `
+New Design Partner Waitlist Application
+
+Contact Information:
+- Name: ${name}
+- Email: ${email}
+${company ? `- Company/Project: ${company}` : ''}
+${role ? `- Role: ${role}` : ''}
+
+Application Details:
+- What are you building with AI today?
+${whatBuilding}
+
+- What do you hope ContractSpec will solve for you?
+${whatSolving}
+
+- Primary use case: ${useCase || 'Not specified'}
+- Current stack: ${currentStack || 'Not specified'}
+- Team Size: ${teamSize || 'Not specified'}
+- Timeline: ${timeline || 'Not specified'}
+
+Preferences:
+- Open to 1:1 product/design sessions: ${openToSessions ? 'Yes' : 'No'}
+- Okay with anonymized case studies: ${okayWithCaseStudies ? 'Yes' : 'No'}
+
+---
+Submitted via ContractSpec waitlist application form
+  `.trim();
+
+  const teamEmailHtml = `
+    <div style="font-family: sans-serif; max-width: 720px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6;">New Design Partner Waitlist Application</h1>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Contact Information</h2>
+      <ul style="padding-left: 16px; line-height: 1.6; margin: 0 0 16px;">
+        <li>Name: ${escapeHtml(name)}</li>
+        <li>Email: ${escapeHtml(email)}</li>
+        ${company ? `<li>Company/Project: ${escapeHtml(company)}</li>` : ''}
+        ${role ? `<li>Role: ${escapeHtml(role)}</li>` : ''}
+      </ul>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Application Details</h2>
+      <p style="margin: 0 0 8px; font-weight: 600;">What are you building with AI today?</p>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
+        ${formatMultilineHtml(whatBuilding)}
+      </div>
+      <p style="margin: 16px 0 8px; font-weight: 600;">What do you hope ContractSpec will solve for you?</p>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
+        ${formatMultilineHtml(whatSolving)}
+      </div>
+      <ul style="padding-left: 16px; line-height: 1.6; margin: 16px 0;">
+        <li>Primary use case: ${escapeHtml(useCase || 'Not specified')}</li>
+        <li>Current stack: ${escapeHtml(currentStack || 'Not specified')}</li>
+        <li>Team Size: ${escapeHtml(teamSize || 'Not specified')}</li>
+        <li>Timeline: ${escapeHtml(timeline || 'Not specified')}</li>
+      </ul>
+      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Preferences</h2>
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; line-height: 1.6;">
+        ${formatMultilineHtml(preferencesText)}
+      </div>
+      <p style="color: #6b7280; font-size: 12px; margin-top: 20px;">Submitted via ContractSpec waitlist application form</p>
+    </div>
+  `;
+
+  const teamSend = await sendEmail(configResult.config, {
+    to: [configResult.config.teamInbox],
+    subject: `New Design Partner Application: ${name} (${email})`,
+    text: teamEmailText,
+    html: teamEmailHtml,
+    replyTo: email,
+    context: 'waitlist-application-team-notification',
+  });
+
+  if (!teamSend.success) {
+    return { success: false, text: APPLICATION_SEND_ERROR };
+  }
+
+  return {
+    success: true,
+    text: 'Application submitted successfully!',
+  };
+};

package/src/libs/email/waitlist.ts

@@ -0,0 +1,118 @@
+'use server';
+
+import { getEmailConfig, sendEmail } from './client';
+import { formatMultilineHtml } from './utils';
+import type { SubmitWaitlistResult } from './types';
+
+const WAITLIST_MISSING_CONFIG =
+  'Waitlist service is not configured. Please try again later.';
+const WAITLIST_SEND_ERROR =
+  'Failed to join waitlist. Please try again later or contact us directly.';
+
+export const joinWaitlist = async (
+  formData: FormData
+): Promise<SubmitWaitlistResult> => {
+  const email = (formData.get('email') ?? '').toString().trim();
+
+  if (!email || !email.includes('@')) {
+    return {
+      success: false,
+      text: 'Please enter a valid email address.',
+    };
+  }
+
+  const configResult = getEmailConfig();
+  if (!configResult.ok || !configResult.config) {
+    return {
+      success: false,
+      text: configResult.errorMessage ?? WAITLIST_MISSING_CONFIG,
+    };
+  }
+
+  const waitlistText = `
+You're on the waitlist!
+
+Thanks for joining the ContractSpec waitlist. You're now in line for early access to:
+
+• Stabilize your AI-generated code with ContractSpec
+• Multi-surface consistency (API, DB, UI, events)
+• Safe regeneration without breaking changes
+• AI governance and contract enforcement
+
+We'll notify you as soon as early access is available. In the meantime, you can:
+
+• Check out our docs: https://contractspec.io/docs
+• Follow our progress on GitHub
+• Book a demo call to see ContractSpec in action
+
+We're excited to have you on board!
+
+---
+ContractSpec Team
+https://contractspec.io
+
+To remove yourself from the waitlist, reply to this email with "remove"
+  `.trim();
+
+  const waitlistHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <h1 style="color: #8b5cf6;">You're on the waitlist!</h1>
+      <p>Thanks for joining the ContractSpec waitlist. You're now in line for early access to:</p>
+      <ul style="line-height: 1.8;">
+        <li>Stabilize your AI-generated code with ContractSpec</li>
+        <li>Multi-surface consistency (API, DB, UI, events)</li>
+        <li>Safe regeneration without breaking changes</li>
+        <li>AI governance and contract enforcement</li>
+      </ul>
+      <p>We'll notify you as soon as early access is available. In the meantime, you can:</p>
+      <ul style="line-height: 1.8;">
+        <li>Check out our <a href="https://contractspec.io/docs" style="color: #8b5cf6;">docs</a></li>
+        <li>Follow our progress on GitHub</li>
+        <li>Book a demo call to see ContractSpec in action</li>
+      </ul>
+      <p>We're excited to have you on board!</p>
+      <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;" />
+      <p style="color: #6b7280; font-size: 14px;">
+        ContractSpec Team<br />
+        <a href="https://contractspec.io" style="color: #8b5cf6;">contractspec.io</a>
+      </p>
+      <p style="color: #9ca3af; font-size: 12px;">
+        To remove yourself from the waitlist, reply to this email with "remove"
+      </p>
+    </div>
+  `;
+
+  const userSend = await sendEmail(configResult.config, {
+    to: [{ email }],
+    subject: "You're on the ContractSpec waitlist!",
+    text: waitlistText,
+    html: waitlistHtml,
+    context: 'waitlist-welcome',
+  });
+
+  if (!userSend.success) {
+    return { success: false, text: WAITLIST_SEND_ERROR };
+  }
+
+  const teamNotificationText = `New waitlist signup from: ${email}`;
+  const teamNotificationHtml = `
+    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
+      <p style="margin: 0 0 8px;">New waitlist signup</p>
+      <p style="margin: 0;"><strong>Email:</strong> ${formatMultilineHtml(email)}</p>
+    </div>
+  `;
+
+  const teamSend = await sendEmail(configResult.config, {
+    to: [configResult.config.teamInbox],
+    subject: `New Waitlist Signup: ${email}`,
+    text: teamNotificationText,
+    html: teamNotificationHtml,
+    context: 'waitlist-team-notification',
+  });
+
+  if (!teamSend.success) {
+    return { success: false, text: WAITLIST_SEND_ERROR };
+  }
+
+  return { success: true, text: 'Successfully joined waitlist!' };
+};

package/src/libs/pricing-examples.ts

@@ -0,0 +1,19 @@
+/**
+ * Tentative pricing example values for UI display.
+ * These are examples only and subject to change based on learnings from design partners.
+ */
+
+export const PRICING_EXAMPLES = {
+  free: {
+    regenerationsPerMonth: 200,
+    aiActionsPerMonth: 100,
+    projects: 1,
+  },
+  builder: {
+    regenerationsPerMonthHint: '1,000–2,000+',
+    aiActionsPerMonthHint: '1,000+',
+  },
+  team: {
+    description: 'Higher limits + cheaper per-regen at scale',
+  },
+} as const;

package/src/registry/engine.ts

@@ -0,0 +1,38 @@
+import {
+  createDefaultTransformEngine,
+  registerBasicValidation,
+  registerDefaultReactRenderer,
+  registerReactToMarkdownRenderer,
+  type TransformEngine,
+} from '@contractspec/lib.contracts/presentations';
+import { componentMap } from './registry';
+import type { ComponentMap } from './types';
+
+/**
+ * Create and configure the TransformEngine for web-landing presentations.
+ * Includes React and Markdown renderers with component map registration.
+ */
+export function createPresentationEngine(
+  customComponentMap?: ComponentMap
+): TransformEngine {
+  const engine = createDefaultTransformEngine();
+
+  // Register React renderer
+  registerDefaultReactRenderer(engine);
+
+  // Register basic validation
+  registerBasicValidation(engine);
+
+  // Register React-to-markdown renderer with component map
+  // This enables rendering React components to markdown for LLM consumption
+  const mapToUse = customComponentMap ?? componentMap;
+  registerReactToMarkdownRenderer(engine, mapToUse);
+
+  return engine;
+}
+
+/**
+ * Singleton engine instance for the app.
+ * Use this for rendering presentations.
+ */
+export const presentationEngine = createPresentationEngine();