@chaaskit/client 0.1.0

package/src/routes/index.ts

@@ -0,0 +1,57 @@
+/**
+ * Route modules for @chaaskit/client
+ *
+ * Each route exports:
+ * - meta() - page metadata for React Router
+ * - links() - stylesheet links
+ * - default - wrapped component with ChatProviders
+ * - LoadingSkeleton - SSR-safe loading component
+ *
+ * @example
+ * ```tsx
+ * // In your route file
+ * import { lazy, Suspense } from 'react';
+ * import { ClientOnly, SimpleLoadingSkeleton } from '@chaaskit/client';
+ *
+ * const ChatRoute = lazy(() => import('@chaaskit/client/routes/ChatRoute'));
+ *
+ * export { meta, links } from '@chaaskit/client/routes/ChatRoute';
+ *
+ * export default function Chat() {
+ *   return (
+ *     <ClientOnly fallback={<SimpleLoadingSkeleton />}>
+ *       {() => (
+ *         <Suspense fallback={<SimpleLoadingSkeleton />}>
+ *           <ChatRoute />
+ *         </Suspense>
+ *       )}
+ *     </ClientOnly>
+ *   );
+ * }
+ * ```
+ */
+
+// Chat routes (with sidebar layout)
+export { default as ChatRoute, meta as chatMeta, links as chatLinks, LoadingSkeleton as ChatLoadingSkeleton } from './ChatRoute';
+
+// Settings/management routes
+export { default as ApiKeysRoute, meta as apiKeysMeta, links as apiKeysLinks, LoadingSkeleton as ApiKeysLoadingSkeleton } from './ApiKeysRoute';
+export { default as DocumentsRoute, meta as documentsMeta, links as documentsLinks, LoadingSkeleton as DocumentsLoadingSkeleton } from './DocumentsRoute';
+export { default as AutomationsRoute, meta as automationsMeta, links as automationsLinks, LoadingSkeleton as AutomationsLoadingSkeleton } from './AutomationsRoute';
+export { default as TeamSettingsRoute, meta as teamSettingsMeta, links as teamSettingsLinks, LoadingSkeleton as TeamSettingsLoadingSkeleton } from './TeamSettingsRoute';
+
+// Admin routes
+export { default as AdminDashboardRoute, meta as adminDashboardMeta, links as adminDashboardLinks, LoadingSkeleton as AdminDashboardLoadingSkeleton } from './AdminDashboardRoute';
+export { default as AdminUsersRoute, meta as adminUsersMeta, links as adminUsersLinks, LoadingSkeleton as AdminUsersLoadingSkeleton } from './AdminUsersRoute';
+export { default as AdminTeamsRoute, meta as adminTeamsMeta, links as adminTeamsLinks, LoadingSkeleton as AdminTeamsLoadingSkeleton } from './AdminTeamsRoute';
+export { default as AdminTeamRoute, meta as adminTeamMeta, links as adminTeamLinks, LoadingSkeleton as AdminTeamLoadingSkeleton } from './AdminTeamRoute';
+
+// Auth-related routes
+export { default as VerifyEmailRoute, meta as verifyEmailMeta, links as verifyEmailLinks, LoadingSkeleton as VerifyEmailLoadingSkeleton } from './VerifyEmailRoute';
+export { default as AcceptInviteRoute, meta as acceptInviteMeta, links as acceptInviteLinks, LoadingSkeleton as AcceptInviteLoadingSkeleton } from './AcceptInviteRoute';
+
+// Public routes
+export { default as PricingRoute, meta as pricingMeta, links as pricingLinks, LoadingSkeleton as PricingLoadingSkeleton } from './PricingRoute';
+export { default as OAuthConsentRoute, meta as oauthConsentMeta, links as oauthConsentLinks, LoadingSkeleton as OAuthConsentLoadingSkeleton } from './OAuthConsentRoute';
+export { default as PrivacyRoute, meta as privacyMeta, links as privacyLinks, LoadingSkeleton as PrivacyLoadingSkeleton } from './PrivacyRoute';
+export { default as TermsRoute, meta as termsMeta, links as termsLinks, LoadingSkeleton as TermsLoadingSkeleton } from './TermsRoute';

package/src/ssr-utils.tsx

@@ -0,0 +1,84 @@
+/**
+ * SSR-safe utilities for @chaaskit/client
+ *
+ * This entry point ONLY exports components that are safe to import during SSR.
+ * Use this in route files instead of importing from the main entry point
+ * to avoid pulling in browser-only dependencies like react-markdown.
+ *
+ * @example
+ * ```tsx
+ * // In your route file
+ * import { createRoute, SimpleLoadingSkeleton } from '@chaaskit/client/ssr-utils';
+ *
+ * export const { meta, links, default: Component } = createRoute({
+ *   title: 'Verify Email',
+ *   load: () => import('@chaaskit/client/routes/VerifyEmailRoute'),
+ * });
+ * export default Component;
+ * ```
+ */
+
+import { lazy, Suspense, type ComponentType, type LazyExoticComponent } from 'react';
+import { ClientOnly } from './components/ClientOnly';
+import { ChatLoadingSkeleton, SimpleLoadingSkeleton } from './components/LoadingSkeletons';
+
+export { ClientOnly, ChatLoadingSkeleton, SimpleLoadingSkeleton };
+
+/**
+ * Route configuration options
+ */
+export interface RouteConfig {
+  /** Page title for meta tag */
+  title: string;
+  /** Dynamic import function for the route component */
+  load: () => Promise<{ default: ComponentType<any> }>;
+  /** Loading skeleton to show during SSR and lazy load (defaults to SimpleLoadingSkeleton) */
+  skeleton?: 'simple' | 'chat';
+}
+
+/**
+ * Creates a route module with meta, links, and default component.
+ * This reduces route files to just a few lines.
+ *
+ * @example
+ * ```tsx
+ * import { createRoute } from '@chaaskit/client/ssr-utils';
+ *
+ * export const { meta, links, default: VerifyEmail } = createRoute({
+ *   title: 'Verify Email',
+ *   load: () => import('@chaaskit/client/routes/VerifyEmailRoute'),
+ * });
+ * export default VerifyEmail;
+ * ```
+ */
+export function createRoute(config: RouteConfig) {
+  const { title, load, skeleton = 'simple' } = config;
+  const LazyComponent = lazy(load);
+  const Skeleton = skeleton === 'chat' ? ChatLoadingSkeleton : SimpleLoadingSkeleton;
+
+  function meta() {
+    return [{ title }];
+  }
+
+  function links() {
+    return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+  }
+
+  function RouteComponent() {
+    return (
+      <ClientOnly fallback={<Skeleton />}>
+        {() => (
+          <Suspense fallback={<Skeleton />}>
+            <LazyComponent />
+          </Suspense>
+        )}
+      </ClientOnly>
+    );
+  }
+
+  return {
+    meta,
+    links,
+    default: RouteComponent,
+  };
+}

package/src/ssr.ts

@@ -0,0 +1,123 @@
+/**
+ * SSR-safe exports for server-side rendering.
+ *
+ * This module exports components and utilities that can be used on the server
+ * without browser APIs like window, document, or localStorage.
+ */
+
+import type { AppConfig } from '@chaaskit/shared';
+
+// SSR-safe context providers
+export {
+  ServerConfigProvider,
+  useServerConfig,
+  useServerConfigLoaded,
+  type ServerConfigProviderProps,
+} from './contexts/ServerConfigProvider';
+
+export {
+  ServerThemeProvider,
+  useServerTheme,
+  type ServerThemeProviderProps,
+} from './contexts/ServerThemeProvider';
+
+// NOTE: SSRMessageList and SSRMarkdownRenderer are NOT exported here because
+// they depend on react-markdown which has browser-only dependencies.
+// Use them only in client-side code wrapped in <ClientOnly>.
+
+// ============================================
+// Theme utilities for SSR
+// ============================================
+
+/**
+ * Converts a hex color to RGB values string (e.g., "#ff0000" -> "255 0 0")
+ */
+function hexToRgb(hex: string): string {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return '';
+  return `${parseInt(result[1]!, 16)} ${parseInt(result[2]!, 16)} ${parseInt(result[3]!, 16)}`;
+}
+
+/**
+ * Generates CSS variables for a theme.
+ * Use this in your React Router root.tsx to inject theme styles.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { generateThemeCSS } from '@chaaskit/client/ssr';
+ *
+ * export default function Root() {
+ *   const themeCSS = generateThemeCSS(config, 'dark');
+ *   return (
+ *     <html>
+ *       <head>
+ *         <style dangerouslySetInnerHTML={{ __html: themeCSS }} />
+ *       </head>
+ *       ...
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function generateThemeCSS(config: AppConfig, theme: string): string {
+  const themeConfig = config.theming.themes[theme];
+  if (!themeConfig) return '';
+
+  const cssVars = Object.entries(themeConfig.colors)
+    .map(([key, value]) => {
+      const cssKey = `--color-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+      return `${cssKey}: ${hexToRgb(value)};`;
+    })
+    .join('\n    ');
+
+  return `
+    :root {
+      ${cssVars}
+      --font-sans: ${config.theming.fonts.sans};
+      --font-mono: ${config.theming.fonts.mono};
+      --radius-sm: ${config.theming.borderRadius.sm};
+      --radius-md: ${config.theming.borderRadius.md};
+      --radius-lg: ${config.theming.borderRadius.lg};
+      --radius-full: ${config.theming.borderRadius.full};
+    }
+  `;
+}
+
+/**
+ * Returns an object of CSS variable name -> value pairs for a theme.
+ * Useful if you need programmatic access to theme values.
+ */
+export function getThemeVariables(config: AppConfig, theme: string): Record<string, string> {
+  const themeConfig = config.theming.themes[theme];
+  if (!themeConfig) return {};
+
+  const vars: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(themeConfig.colors)) {
+    const cssKey = `--color-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+    vars[cssKey] = hexToRgb(value);
+  }
+
+  vars['--font-sans'] = config.theming.fonts.sans;
+  vars['--font-mono'] = config.theming.fonts.mono;
+  vars['--radius-sm'] = config.theming.borderRadius.sm;
+  vars['--radius-md'] = config.theming.borderRadius.md;
+  vars['--radius-lg'] = config.theming.borderRadius.lg;
+  vars['--radius-full'] = config.theming.borderRadius.full;
+
+  return vars;
+}
+
+/**
+ * Base CSS styles for SSR pages.
+ * Include this in your HTML template for consistent styling.
+ */
+export const baseStyles = `
+  html { font-family: var(--font-sans); }
+  body {
+    margin: 0;
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-text-primary));
+  }
+`;