meno-core 1.0.0

package/lib/client/theme.test.ts

@@ -0,0 +1,173 @@
+import { describe, test, expect } from 'bun:test';
+import { getThemeColors, type Theme, type ThemeColors } from './theme';
+
+describe('theme', () => {
+  describe('getThemeColors', () => {
+    test('returns light theme colors for light theme', () => {
+      const colors = getThemeColors('light');
+      expect(colors).toBeDefined();
+      expect(colors.sidebar).toBeDefined();
+      expect(colors.propsPanel).toBeDefined();
+      expect(colors.scrollbar).toBeDefined();
+    });
+
+    test('returns dark theme colors for dark theme', () => {
+      const colors = getThemeColors('dark');
+      expect(colors).toBeDefined();
+      expect(colors.sidebar).toBeDefined();
+      expect(colors.propsPanel).toBeDefined();
+      expect(colors.scrollbar).toBeDefined();
+    });
+
+    test('light theme has correct sidebar background', () => {
+      const colors = getThemeColors('light');
+      expect(colors.sidebar.background).toBe('#ffffff');
+    });
+
+    test('dark theme has correct sidebar background', () => {
+      const colors = getThemeColors('dark');
+      expect(colors.sidebar.background).toBe('#1e1e1e');
+    });
+
+    test('light theme has all required sidebar properties', () => {
+      const colors = getThemeColors('light');
+      expect(colors.sidebar.background).toBeDefined();
+      expect(colors.sidebar.border).toBeDefined();
+      expect(colors.sidebar.text).toBeDefined();
+      expect(colors.sidebar.textSecondary).toBeDefined();
+      expect(colors.sidebar.textMuted).toBeDefined();
+      expect(colors.sidebar.headerBackground).toBeDefined();
+      expect(colors.sidebar.tabActiveBackground).toBeDefined();
+      expect(colors.sidebar.tabActiveBorder).toBeDefined();
+      expect(colors.sidebar.tabInactiveBackground).toBeDefined();
+      expect(colors.sidebar.footerBackground).toBeDefined();
+      expect(colors.sidebar.buttonPrimaryBackground).toBeDefined();
+      expect(colors.sidebar.buttonPrimaryColor).toBeDefined();
+      expect(colors.sidebar.hoverBackground).toBeDefined();
+      expect(colors.sidebar.selectedBackground).toBeDefined();
+      expect(colors.sidebar.selectedText).toBeDefined();
+    });
+
+    test('dark theme has all required sidebar properties', () => {
+      const colors = getThemeColors('dark');
+      expect(colors.sidebar.background).toBeDefined();
+      expect(colors.sidebar.border).toBeDefined();
+      expect(colors.sidebar.text).toBeDefined();
+      expect(colors.sidebar.textSecondary).toBeDefined();
+      expect(colors.sidebar.textMuted).toBeDefined();
+      expect(colors.sidebar.headerBackground).toBeDefined();
+      expect(colors.sidebar.tabActiveBackground).toBeDefined();
+      expect(colors.sidebar.tabActiveBorder).toBeDefined();
+      expect(colors.sidebar.tabInactiveBackground).toBeDefined();
+      expect(colors.sidebar.footerBackground).toBeDefined();
+      expect(colors.sidebar.buttonPrimaryBackground).toBeDefined();
+      expect(colors.sidebar.buttonPrimaryColor).toBeDefined();
+      expect(colors.sidebar.hoverBackground).toBeDefined();
+      expect(colors.sidebar.selectedBackground).toBeDefined();
+      expect(colors.sidebar.selectedText).toBeDefined();
+    });
+
+    test('light theme has all required propsPanel properties', () => {
+      const colors = getThemeColors('light');
+      expect(colors.propsPanel.background).toBeDefined();
+      expect(colors.propsPanel.backgroundSecondary).toBeDefined();
+      expect(colors.propsPanel.backgroundTertiary).toBeDefined();
+      expect(colors.propsPanel.border).toBeDefined();
+      expect(colors.propsPanel.borderSecondary).toBeDefined();
+      expect(colors.propsPanel.text).toBeDefined();
+      expect(colors.propsPanel.textSecondary).toBeDefined();
+      expect(colors.propsPanel.textMuted).toBeDefined();
+      expect(colors.propsPanel.codeString).toBeDefined();
+      expect(colors.propsPanel.codeNumber).toBeDefined();
+      expect(colors.propsPanel.codeKey).toBeDefined();
+      expect(colors.propsPanel.codeType).toBeDefined();
+      expect(colors.propsPanel.buttonPrimary).toBeDefined();
+      expect(colors.propsPanel.buttonPrimaryHover).toBeDefined();
+      expect(colors.propsPanel.buttonSecondary).toBeDefined();
+      expect(colors.propsPanel.buttonDanger).toBeDefined();
+      expect(colors.propsPanel.buttonDangerHover).toBeDefined();
+      expect(colors.propsPanel.inputBackground).toBeDefined();
+      expect(colors.propsPanel.inputBorder).toBeDefined();
+      expect(colors.propsPanel.hoverBackground).toBeDefined();
+    });
+
+    test('dark theme has all required propsPanel properties', () => {
+      const colors = getThemeColors('dark');
+      expect(colors.propsPanel.background).toBeDefined();
+      expect(colors.propsPanel.backgroundSecondary).toBeDefined();
+      expect(colors.propsPanel.backgroundTertiary).toBeDefined();
+      expect(colors.propsPanel.border).toBeDefined();
+      expect(colors.propsPanel.borderSecondary).toBeDefined();
+      expect(colors.propsPanel.text).toBeDefined();
+      expect(colors.propsPanel.textSecondary).toBeDefined();
+      expect(colors.propsPanel.textMuted).toBeDefined();
+      expect(colors.propsPanel.codeString).toBeDefined();
+      expect(colors.propsPanel.codeNumber).toBeDefined();
+      expect(colors.propsPanel.codeKey).toBeDefined();
+      expect(colors.propsPanel.codeType).toBeDefined();
+      expect(colors.propsPanel.buttonPrimary).toBeDefined();
+      expect(colors.propsPanel.buttonPrimaryHover).toBeDefined();
+      expect(colors.propsPanel.buttonSecondary).toBeDefined();
+      expect(colors.propsPanel.buttonDanger).toBeDefined();
+      expect(colors.propsPanel.buttonDangerHover).toBeDefined();
+      expect(colors.propsPanel.inputBackground).toBeDefined();
+      expect(colors.propsPanel.inputBorder).toBeDefined();
+      expect(colors.propsPanel.hoverBackground).toBeDefined();
+    });
+
+    test('light theme has all required scrollbar properties', () => {
+      const colors = getThemeColors('light');
+      expect(colors.scrollbar.track).toBeDefined();
+      expect(colors.scrollbar.thumb).toBeDefined();
+      expect(colors.scrollbar.thumbHover).toBeDefined();
+    });
+
+    test('dark theme has all required scrollbar properties', () => {
+      const colors = getThemeColors('dark');
+      expect(colors.scrollbar.track).toBeDefined();
+      expect(colors.scrollbar.thumb).toBeDefined();
+      expect(colors.scrollbar.thumbHover).toBeDefined();
+    });
+
+    test('light and dark themes have different colors', () => {
+      const light = getThemeColors('light');
+      const dark = getThemeColors('dark');
+      expect(light.sidebar.background).not.toBe(dark.sidebar.background);
+      expect(light.propsPanel.background).not.toBe(dark.propsPanel.background);
+    });
+
+    test('light theme colors are valid hex colors', () => {
+      const colors = getThemeColors('light');
+      const hexPattern = /^#[0-9a-f]{6}$|^#[0-9a-f]{3}$|^transparent$/i;
+      expect(hexPattern.test(colors.sidebar.background)).toBe(true);
+      expect(hexPattern.test(colors.sidebar.border)).toBe(true);
+      expect(hexPattern.test(colors.propsPanel.background)).toBe(true);
+    });
+
+    test('dark theme colors are valid hex colors or transparent', () => {
+      const colors = getThemeColors('dark');
+      const hexPattern = /^#[0-9a-f]{6}$|^#[0-9a-f]{3}$|^transparent$/i;
+      expect(hexPattern.test(colors.sidebar.background)).toBe(true);
+      expect(hexPattern.test(colors.sidebar.border)).toBe(true);
+      expect(hexPattern.test(colors.propsPanel.background)).toBe(true);
+    });
+
+    test('returns consistent reference for same theme', () => {
+      const light1 = getThemeColors('light');
+      const light2 = getThemeColors('light');
+      expect(light1).toEqual(light2);
+    });
+
+    test('light theme button colors are accessible', () => {
+      const colors = getThemeColors('light');
+      expect(colors.sidebar.buttonPrimaryBackground).toBe('#0366d6');
+      expect(colors.sidebar.buttonPrimaryColor).toBe('#ffffff');
+    });
+
+    test('dark theme button colors are accessible', () => {
+      const colors = getThemeColors('dark');
+      expect(colors.sidebar.buttonPrimaryBackground).toBe('#0e639c');
+      expect(colors.sidebar.buttonPrimaryColor).toBe('#ffffff');
+    });
+  });
+});

package/lib/client/theme.ts

@@ -0,0 +1,159 @@
+export type Theme = 'light' | 'dark';
+
+export interface ThemeColors {
+  sidebar: {
+    background: string;
+    border: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    headerBackground: string;
+    tabActiveBackground: string;
+    tabActiveBorder: string;
+    tabInactiveBackground: string;
+    footerBackground: string;
+    buttonPrimaryBackground: string;
+    buttonPrimaryColor: string;
+    hoverBackground: string;
+    selectedBackground: string;
+    selectedText: string;
+  };
+  scrollbar: {
+    track: string;
+    thumb: string;
+    thumbHover: string;
+  };
+  propsPanel: {
+    background: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    border: string;
+    borderSecondary: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    codeString: string;
+    codeNumber: string;
+    codeKey: string;
+    codeType: string;
+    buttonPrimary: string;
+    buttonPrimaryHover: string;
+    buttonSecondary: string;
+    buttonDanger: string;
+    buttonDangerHover: string;
+    inputBackground: string;
+    inputBorder: string;
+    hoverBackground: string;
+  };
+}
+
+const lightThemeColors: ThemeColors = {
+  sidebar: {
+    background: '#ffffff',
+    border: '#e1e4e8',
+    text: '#24292e',
+    textSecondary: '#586069',
+    textMuted: '#6a737d',
+    headerBackground: '#f6f8fa',
+    tabActiveBackground: '#ffffff',
+    tabActiveBorder: '#0366d6',
+    tabInactiveBackground: 'transparent',
+    footerBackground: '#f6f8fa',
+    buttonPrimaryBackground: '#0366d6',
+    buttonPrimaryColor: '#ffffff',
+    hoverBackground: '#f1f3f5',
+    selectedBackground: '#0366d6',
+    selectedText: '#ffffff',
+  },
+  scrollbar: {
+    track: '#f1f3f5',
+    thumb: '#c1c9d1',
+    thumbHover: '#a8b2bd',
+  },
+  propsPanel: {
+    background: '#ffffff',
+    backgroundSecondary: '#f6f8fa',
+    backgroundTertiary: '#f1f3f5',
+    border: '#e1e4e8',
+    borderSecondary: '#d1d5da',
+    text: '#24292e',
+    textSecondary: '#586069',
+    textMuted: '#6a737d',
+    codeString: '#032f62',
+    codeNumber: '#005cc5',
+    codeKey: '#005cc5',
+    codeType: '#6f42c1',
+    buttonPrimary: '#0366d6',
+    buttonPrimaryHover: '#0256cc',
+    buttonSecondary: '#586069',
+    buttonDanger: '#d73a49',
+    buttonDangerHover: '#cb2431',
+    inputBackground: '#ffffff',
+    inputBorder: '#d1d5da',
+    hoverBackground: '#f1f3f5',
+  },
+};
+
+const darkThemeColors: ThemeColors = {
+  sidebar: {
+    background: '#1e1e1e',
+    border: '#333333',
+    text: '#cccccc',
+    textSecondary: '#cccccc',
+    textMuted: '#888888',
+    headerBackground: '#2d2d2d',
+    tabActiveBackground: '#1e1e1e',
+    tabActiveBorder: '#007acc',
+    tabInactiveBackground: 'transparent',
+    footerBackground: '#252526',
+    buttonPrimaryBackground: '#0e639c',
+    buttonPrimaryColor: '#ffffff',
+    hoverBackground: '#2a2d2e',
+    selectedBackground: '#37373d',
+    selectedText: '#ffffff',
+  },
+  scrollbar: {
+    track: '#1e1e1e',
+    thumb: '#424242',
+    thumbHover: '#4e4e4e',
+  },
+  propsPanel: {
+    background: '#1e1e1e',
+    backgroundSecondary: '#2d2d2d',
+    backgroundTertiary: '#252525',
+    border: '#333333',
+    borderSecondary: '#444444',
+    text: '#cccccc',
+    textSecondary: '#cccccc',
+    textMuted: '#888888',
+    codeString: '#ce9178',
+    codeNumber: '#b5cea8',
+    codeKey: '#9cdcfe',
+    codeType: '#4ec9b0',
+    buttonPrimary: '#007acc',
+    buttonPrimaryHover: '#0098ff',
+    buttonSecondary: '#007acc',
+    buttonDanger: '#f48771',
+    buttonDangerHover: '#ff6b6b',
+    inputBackground: '#1e1e1e',
+    inputBorder: '#444444',
+    hoverBackground: '#2a2d2e',
+  },
+};
+
+export function getThemeColors(theme: Theme): ThemeColors {
+  return theme === 'light' ? lightThemeColors : darkThemeColors;
+}
+
+export async function loadThemeConfig(): Promise<Theme> {
+  try {
+    const response = await fetch('/api/config', { cache: 'no-store' });
+    if (response.ok) {
+      const config = await response.json();
+      return config.editor?.theme || 'dark';
+    }
+  } catch (error) {
+  }
+  return 'dark'; // Default to dark
+}
+

package/lib/client/utils/toast.ts

@@ -0,0 +1,46 @@
+/**
+ * Toast Notification Helper
+ * Utility functions for showing toast notifications
+ */
+
+import { useToastStore } from '../stores/ToastStore';
+import { ApiError } from '../services/api/errors';
+
+/**
+ * Show an error toast notification
+ */
+export function showErrorToast(message: string, duration?: number): void {
+  useToastStore.getState().addToast(message, 'error', duration);
+}
+
+/**
+ * Show a success toast notification
+ */
+export function showSuccessToast(message: string, duration?: number): void {
+  useToastStore.getState().addToast(message, 'success', duration);
+}
+
+/**
+ * Show a warning toast notification
+ */
+export function showWarningToast(message: string, duration?: number): void {
+  useToastStore.getState().addToast(message, 'warning', duration);
+}
+
+/**
+ * Show an info toast notification
+ */
+export function showInfoToast(message: string, duration?: number): void {
+  useToastStore.getState().addToast(message, 'info', duration);
+}
+
+/**
+ * Show an API error as a toast notification
+ */
+export function showApiErrorToast(error: ApiError | Error, duration?: number): void {
+  const message = error instanceof ApiError 
+    ? error.toUserMessage() 
+    : error.message || 'An unexpected error occurred';
+  showErrorToast(message, duration);
+}
+

package/lib/server/createServer.ts

@@ -0,0 +1,170 @@
+/**
+ * Server Factory
+ * Creates a configurable Bun server for @meno/core
+ * Can be extended by @meno/studio for editor functionality
+ */
+
+import type { PageService } from './services/pageService';
+import type { ComponentService } from './services/componentService';
+import type { CMSService } from './services/cmsService';
+import type { CMSProvider } from '../shared/interfaces/contentProvider';
+import { WebSocketManager } from './websocketManager';
+import { handleRoutes, type RouteContext } from './routes';
+import { SERVER_PORT, MAX_PORT_ATTEMPTS, HMR_ROUTE } from '../shared/constants';
+
+// Bun WebSocket type
+type BunWebSocket = {
+  send(data: string | ArrayBuffer | Uint8Array): void;
+  readyState: number;
+  close(code?: number, reason?: string): void;
+};
+
+// Custom message handler type
+export type WSMessageHandler = (ws: BunWebSocket, data: unknown) => void;
+
+/**
+ * Server configuration
+ */
+export interface ServerConfig {
+  port?: number;
+  pageService: PageService;
+  componentService: ComponentService;
+  wsManager: WebSocketManager;
+  cmsService?: CMSService;
+  cmsProvider?: CMSProvider;
+  additionalRoutes?: AdditionalRouteHandler[];
+  onWSMessage?: WSMessageHandler;
+}
+
+/**
+ * Additional route handler type
+ */
+export type AdditionalRouteHandler = (
+  req: Request,
+  url: URL,
+  context: RouteContext
+) => Promise<Response | undefined>;
+
+/**
+ * Server factory result
+ */
+export interface ServerResult {
+  server: ReturnType<typeof Bun.serve>;
+  port: number;
+}
+
+/**
+ * Create a Bun server with the given configuration
+ */
+export function createServer(config: ServerConfig): ServerResult {
+  const {
+    port: requestedPort = SERVER_PORT,
+    pageService,
+    componentService,
+    wsManager,
+    cmsService,
+    cmsProvider,
+    additionalRoutes = [],
+    onWSMessage,
+  } = config;
+
+  const routeContext: RouteContext = {
+    pageService,
+    componentService,
+    cmsService,
+    cmsProvider,
+  };
+
+  function createBunConfig(port: number) {
+    return {
+      port,
+      development: {
+        hmr: true,
+      },
+
+      async fetch(req: Request, server: any) {
+        const url = new URL(req.url);
+
+        // Check additional routes first (allows studio to inject routes)
+        for (const handler of additionalRoutes) {
+          const response = await handler(req, url, routeContext);
+          if (response) {
+            return response;
+          }
+        }
+
+        // Handle all routes through centralized router
+        const response = await handleRoutes(req, url, server, routeContext);
+        return response || new Response('Not Found', { status: 404 });
+      },
+
+      websocket: {
+        open(ws: BunWebSocket) {
+          wsManager.addClient(ws);
+        },
+        message(ws: BunWebSocket, message: unknown) {
+          try {
+            const data = JSON.parse(message as string);
+
+            // Respond to ping with pong (for heartbeat)
+            if (data.type === 'ping') {
+              ws.send('pong');
+              return;
+            }
+
+            // Allow custom message handlers
+            if (onWSMessage) {
+              onWSMessage(ws, data);
+            }
+          } catch (error) {
+            // Ignore non-JSON messages
+          }
+        },
+        close(ws: BunWebSocket) {
+          wsManager.removeClient(ws);
+        },
+      },
+    };
+  }
+
+  // Try to start server, incrementing port if busy
+  let server: ReturnType<typeof Bun.serve> | undefined;
+  let actualPort = requestedPort;
+
+  for (let portAttempt = 0; portAttempt < MAX_PORT_ATTEMPTS; portAttempt++) {
+    const currentPort = requestedPort + portAttempt;
+
+    try {
+      server = Bun.serve(createBunConfig(currentPort));
+      actualPort = server.port ?? currentPort;
+      if (portAttempt > 0) {
+        console.log(`Warning: Port ${requestedPort} was busy, using port ${actualPort} instead`);
+      }
+      break;
+    } catch (error: unknown) {
+      const err = error as { code?: string };
+      if (err?.code === 'EADDRINUSE') {
+        if (portAttempt >= MAX_PORT_ATTEMPTS - 1) {
+          console.error(
+            `Failed to start server: All ports from ${requestedPort} to ${requestedPort + MAX_PORT_ATTEMPTS - 1} are busy`
+          );
+          throw error;
+        }
+        continue;
+      }
+      throw error;
+    }
+  }
+
+  if (!server) {
+    throw new Error('Failed to start server');
+  }
+
+  return { server, port: actualPort };
+}
+
+/**
+ * Re-export types for convenience
+ */
+export { WebSocketManager };
+export type { RouteContext };