@contractspec/bundle.library 0.0.0-canary-20260206014742

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,185 @@
+'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 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}
+
+- 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>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/email.ts

@@ -0,0 +1,13 @@
+'use server';
+
+export { submitContactForm } from './email/contact';
+export { subscribeToNewsletter } from './email/newsletter';
+export { joinWaitlist } from './email/waitlist';
+export { submitWaitlistApplication } from './email/waitlist-application';
+export type {
+  SubmitContactFormResult,
+  SubmitNewsletterResult,
+  SubmitWaitlistResult,
+  SubmitWaitlistApplicationResult,
+  EmailSendOutcome,
+} from './email/types';

package/src/libs/posthog/client.ts

@@ -0,0 +1,70 @@
+import posthog from 'posthog-js';
+
+export type PostHogInstance = typeof posthog;
+
+export const analyticsEventNames = {
+  CTA_INSTALL_CLICK: 'cta_install_click',
+  CTA_STUDIO_CLICK: 'cta_studio_click',
+  DOCS_QUICKSTART_VIEW: 'docs_quickstart_view',
+  COPY_COMMAND_CLICK: 'copy_command_click',
+  EXAMPLE_REPO_OPEN: 'example_repo_open',
+} as const;
+
+export type AnalyticsEventName =
+  (typeof analyticsEventNames)[keyof typeof analyticsEventNames];
+
+export const posthogKey = process.env.NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY;
+export const posthogHost =
+  process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://eu.posthog.com';
+
+const shouldCaptureAnalytics = () => {
+  if (typeof window === 'undefined') return false;
+  const nav = window.navigator as Navigator & {
+    msDoNotTrack?: string;
+  };
+  const dntWindow = window as Window & {
+    doNotTrack?: string;
+  };
+  const dnt = nav.doNotTrack ?? nav.msDoNotTrack ?? dntWindow.doNotTrack;
+  return dnt !== '1' && dnt !== 'yes';
+};
+
+export function initPosthog() {
+  if (typeof window === 'undefined') return;
+  if (!posthogKey) {
+    console.warn('[PostHog] NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY is missing');
+    return;
+  }
+  if (!shouldCaptureAnalytics()) return;
+
+  const isDev = process.env.NODE_ENV === 'development';
+
+  posthog.init(posthogKey, {
+    api_host: posthogHost,
+    autocapture: !isDev,
+    capture_dead_clicks: !isDev,
+    capture_performance: !isDev,
+    capture_pageview: !isDev,
+    capture_heatmaps: !isDev,
+    capture_exceptions: !isDev,
+    debug: process.env.NODE_ENV === 'development',
+  });
+}
+
+export function captureAnalyticsEvent(
+  event: AnalyticsEventName,
+  properties?: Record<string, unknown>
+) {
+  if (!posthogKey) return;
+  if (!shouldCaptureAnalytics()) return;
+  try {
+    const globalPosthog = (globalThis as { posthog?: PostHogInstance }).posthog;
+    const instance = globalPosthog ?? posthog;
+    instance?.capture?.(event, properties);
+  } catch {
+    return;
+  }
+}
+
+export { posthog };
+export default posthog;

package/src/libs/posthog/native.ts

@@ -0,0 +1,34 @@
+import { PostHog } from 'posthog-react-native';
+
+export type PostHogInstance = typeof PostHog;
+
+export const posthogKey = process.env.NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY;
+export const posthogHost =
+  process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://eu.posthog.com';
+
+export function initPosthog() {
+  const posthogKey = process.env.NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY;
+  const posthogHost =
+    process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://eu.posthog.com';
+
+  if (!posthogKey) {
+    console.warn('[PostHog] NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY is missing');
+    throw new Error('NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY is missing');
+  }
+
+  const posthog = new PostHog(posthogKey, {
+    host: posthogHost,
+    // autocapture: !isDev,
+    // capture_dead_clicks: !isDev,
+    // capture_performance: !isDev,
+    // capture_pageview: !isDev,
+    // capture_heatmaps: !isDev,
+    // capture_exceptions: !isDev,
+    // debug: process.env.NODE_ENV === 'development',
+  });
+
+  return posthog;
+}
+
+const posthog = initPosthog();
+export { posthog };

package/src/libs/posthog/server.ts

@@ -0,0 +1,16 @@
+import { PostHog } from 'posthog-node';
+
+const posthogKey = process.env.NEXT_PUBLIC_CONTRACTSPEC_POSTHOG_KEY;
+const posthogHost =
+  process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://eu.posthog.com';
+
+const posthogServer = posthogKey
+  ? new PostHog(posthogKey, {
+      host: posthogHost,
+      flushAt: 1,
+      flushInterval: 0,
+    })
+  : null;
+
+export default posthogServer;
+export type PostHogServerInstance = PostHog;

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/presentation/features/atoms/FeatureIcon/FeatureIcon.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import * as React from 'react';
+import {
+  FileText,
+  Boxes,
+  Settings,
+  Globe,
+  Shield,
+  Database,
+  MessageSquare,
+  Layout,
+  Workflow,
+  type LucideIcon,
+} from 'lucide-react';
+import { cn } from '@contractspec/lib.ui-kit-web/ui/utils';
+
+/** Domain to icon mapping */
+const domainIconMap: Record<string, LucideIcon> = {
+  platform: Settings,
+  documentation: FileText,
+  docs: FileText,
+  integration: Workflow,
+  api: Globe,
+  security: Shield,
+  data: Database,
+  messaging: MessageSquare,
+  ui: Layout,
+  presentation: Layout,
+};
+
+/** Tag to icon mapping (fallback if domain not matched) */
+const tagIconMap: Record<string, LucideIcon> = {
+  documentation: FileText,
+  guides: FileText,
+  'api-reference': Globe,
+  presentations: Layout,
+  ui: Layout,
+  rendering: Layout,
+  mcp: Workflow,
+  integration: Workflow,
+  security: Shield,
+  auth: Shield,
+  data: Database,
+  storage: Database,
+};
+
+/** Stability to tone mapping */
+const stabilityToneMap: Record<
+  string,
+  'success' | 'warning' | 'info' | 'danger' | 'primary'
+> = {
+  stable: 'success',
+  beta: 'warning',
+  experimental: 'info',
+  deprecated: 'danger',
+};
+
+export interface FeatureIconProps {
+  /** Feature domain for icon selection */
+  domain?: string;
+  /** Feature tags for icon selection fallback */
+  tags?: string[];
+  /** Feature stability for tone selection */
+  stability?: string;
+  /** Override icon */
+  icon?: LucideIcon;
+  /** Size of the icon */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional class name */
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+/**
+ * Smart icon component that maps feature domains/tags to appropriate icons.
+ * Returns the icon element with semantic coloring based on stability.
+ */
+export function FeatureIcon({
+  domain,
+  tags = [],
+  stability,
+  icon: IconOverride,
+  size = 'md',
+  className,
+}: FeatureIconProps) {
+  const Icon: LucideIcon = React.useMemo((): LucideIcon => {
+    if (IconOverride) return IconOverride;
+
+    // Try domain first
+    if (domain) {
+      const domainIcon = domainIconMap[domain.toLowerCase()];
+      if (domainIcon) return domainIcon;
+    }
+
+    // Try tags
+    for (const tag of tags) {
+      const tagIcon = tagIconMap[tag.toLowerCase()];
+      if (tagIcon) return tagIcon;
+    }
+
+    // Default
+    return Boxes;
+  }, [domain, tags, IconOverride]);
+
+  const tone = stability ? stabilityToneMap[stability] || 'primary' : 'primary';
+
+  const toneClasses = {
+    success: 'text-emerald-600 dark:text-emerald-400',
+    warning: 'text-amber-600 dark:text-amber-400',
+    info: 'text-blue-600 dark:text-blue-400',
+    danger: 'text-red-600 dark:text-red-400',
+    primary: 'text-primary',
+  };
+
+  return (
+    <Icon className={cn(sizeClasses[size], toneClasses[tone], className)} />
+  );
+}
+
+/** Get the icon tone for EntityCard based on stability */
+export function getFeatureIconTone(
+  stability?: string
+): 'success' | 'warning' | 'info' | 'danger' | 'primary' {
+  if (!stability) return 'primary';
+  return stabilityToneMap[stability] || 'primary';
+}

package/src/presentation/features/atoms/FeatureIcon/index.ts

@@ -0,0 +1,5 @@
+export {
+  FeatureIcon,
+  getFeatureIconTone,
+  type FeatureIconProps,
+} from './FeatureIcon';

package/src/presentation/features/atoms/index.ts

@@ -0,0 +1 @@
+export * from './FeatureIcon';

package/src/presentation/features/hooks/index.ts

@@ -0,0 +1,13 @@
+export {
+  useFeatureRegistry,
+  type UseFeatureRegistryReturn,
+} from './useFeatureRegistry';
+export {
+  useFeatureFilters,
+  type UseFeatureFiltersReturn,
+  type FeatureFilters,
+} from './useFeatureFilters';
+export {
+  useContractsRegistry,
+  type UseContractsRegistryReturn,
+} from './useContractsRegistry';