npm - @chaaskit/client - Versions diffs - 0.1.0 → 0.1.2 - Mend

@chaaskit/client 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/LICENSE +21 -0
package/dist/lib/index.js +1023 -160
package/dist/lib/index.js.map +1 -1
package/dist/lib/routes/AcceptInviteRoute.js +1 -1
package/dist/lib/routes/AcceptInviteRoute.js.map +1 -1
package/dist/lib/routes/AdminDashboardRoute.js +1 -1
package/dist/lib/routes/AdminDashboardRoute.js.map +1 -1
package/dist/lib/routes/AdminPromoCodesRoute.js +19 -0
package/dist/lib/routes/AdminPromoCodesRoute.js.map +1 -0
package/dist/lib/routes/AdminTeamRoute.js +1 -1
package/dist/lib/routes/AdminTeamRoute.js.map +1 -1
package/dist/lib/routes/AdminTeamsRoute.js +1 -1
package/dist/lib/routes/AdminTeamsRoute.js.map +1 -1
package/dist/lib/routes/AdminUsersRoute.js +1 -1
package/dist/lib/routes/AdminUsersRoute.js.map +1 -1
package/dist/lib/routes/AdminWaitlistRoute.js +19 -0
package/dist/lib/routes/AdminWaitlistRoute.js.map +1 -0
package/dist/lib/routes/ApiKeysRoute.js +1 -1
package/dist/lib/routes/ApiKeysRoute.js.map +1 -1
package/dist/lib/routes/AutomationsRoute.js +1 -1
package/dist/lib/routes/AutomationsRoute.js.map +1 -1
package/dist/lib/routes/ChatRoute.js +1 -1
package/dist/lib/routes/ChatRoute.js.map +1 -1
package/dist/lib/routes/DocumentsRoute.js +1 -1
package/dist/lib/routes/DocumentsRoute.js.map +1 -1
package/dist/lib/routes/OAuthConsentRoute.js +1 -1
package/dist/lib/routes/OAuthConsentRoute.js.map +1 -1
package/dist/lib/routes/PricingRoute.js +1 -1
package/dist/lib/routes/PricingRoute.js.map +1 -1
package/dist/lib/routes/PrivacyRoute.js +1 -1
package/dist/lib/routes/PrivacyRoute.js.map +1 -1
package/dist/lib/routes/TeamSettingsRoute.js +1 -1
package/dist/lib/routes/TeamSettingsRoute.js.map +1 -1
package/dist/lib/routes/TermsRoute.js +1 -1
package/dist/lib/routes/TermsRoute.js.map +1 -1
package/dist/lib/routes/VerifyEmailRoute.js +1 -1
package/dist/lib/routes/VerifyEmailRoute.js.map +1 -1
package/dist/lib/routes.js +47 -37
package/dist/lib/routes.js.map +1 -1
package/dist/lib/ssr-utils.js +64 -1
package/dist/lib/ssr-utils.js.map +1 -1
package/dist/lib/ssr.js +23 -0
package/dist/lib/ssr.js.map +1 -1
package/dist/lib/styles.css +58 -62
package/dist/lib/useExtensions-B5nX_8XD.js.map +1 -1
package/package.json +25 -12
package/src/components/MessageItem.tsx +35 -4
package/src/components/MessageList.tsx +51 -5
package/src/components/OAuthAppsSection.tsx +1 -1
package/src/components/Sidebar.tsx +1 -3
package/src/components/ToolCallDisplay.tsx +102 -11
package/src/components/tool-renderers/DocumentListRenderer.tsx +44 -0
package/src/components/tool-renderers/DocumentReadRenderer.tsx +33 -0
package/src/components/tool-renderers/DocumentSaveRenderer.tsx +32 -0
package/src/components/tool-renderers/DocumentSearchRenderer.tsx +33 -0
package/src/components/tool-renderers/index.ts +36 -0
package/src/components/tool-renderers/utils.ts +7 -0
package/src/contexts/AuthContext.tsx +16 -6
package/src/contexts/ConfigContext.tsx +60 -28
package/src/contexts/ThemeContext.tsx +39 -68
package/src/extensions/registry.ts +2 -1
package/src/hooks/__tests__/basePath.test.ts +42 -0
package/src/index.tsx +11 -2
package/src/pages/AdminDashboardPage.tsx +15 -1
package/src/pages/AdminPromoCodesPage.tsx +378 -0
package/src/pages/AdminTeamPage.tsx +29 -1
package/src/pages/AdminTeamsPage.tsx +15 -1
package/src/pages/AdminUsersPage.tsx +15 -1
package/src/pages/AdminWaitlistPage.tsx +156 -0
package/src/pages/RegisterPage.tsx +91 -9
package/src/routes/AcceptInviteRoute.tsx +1 -1
package/src/routes/AdminDashboardRoute.tsx +1 -1
package/src/routes/AdminPromoCodesRoute.tsx +24 -0
package/src/routes/AdminTeamRoute.tsx +1 -1
package/src/routes/AdminTeamsRoute.tsx +1 -1
package/src/routes/AdminUsersRoute.tsx +1 -1
package/src/routes/AdminWaitlistRoute.tsx +24 -0
package/src/routes/ApiKeysRoute.tsx +1 -1
package/src/routes/AutomationsRoute.tsx +1 -1
package/src/routes/ChatRoute.tsx +2 -1
package/src/routes/DocumentsRoute.tsx +1 -1
package/src/routes/OAuthConsentRoute.tsx +1 -1
package/src/routes/PricingRoute.tsx +1 -1
package/src/routes/PrivacyRoute.tsx +1 -1
package/src/routes/TeamSettingsRoute.tsx +1 -1
package/src/routes/TermsRoute.tsx +1 -1
package/src/routes/VerifyEmailRoute.tsx +1 -1
package/src/routes/index.ts +2 -0
package/src/ssr-utils.tsx +100 -1
package/src/ssr.ts +59 -0
package/src/stores/chatStore.ts +5 -0
package/src/styles/index.css +16 -63
package/src/tailwind-preset.js +360 -0
package/dist/favicon.svg +0 -11
package/dist/index.html +0 -17
package/dist/logo.svg +0 -12

package/src/ssr-utils.tsx CHANGED Viewed

@@ -19,11 +19,109 @@
  */
 import { lazy, Suspense, type ComponentType, type LazyExoticComponent } from 'react';
+import type { AppConfig } from '@chaaskit/shared';
 import { ClientOnly } from './components/ClientOnly';
 import { ChatLoadingSkeleton, SimpleLoadingSkeleton } from './components/LoadingSkeletons';
 export { ClientOnly, ChatLoadingSkeleton, SimpleLoadingSkeleton };
+/**
+ * Props for ConfigScript component.
+ */
+interface ConfigScriptProps {
+  /**
+   * The app config to inject into the page.
+   * This should come from the SSR loader.
+   */
+  config: AppConfig;
+}
+/**
+ * Injects the app config into the page as a script tag.
+ * Place this in the <head> of your root layout to make the config
+ * available immediately on page load, avoiding flash of default values.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { ConfigScript } from '@chaaskit/client/ssr-utils';
+ * import { config } from '../config/app.config';
+ *
+ * export default function Root() {
+ *   return (
+ *     <html>
+ *       <head>
+ *         <ConfigScript config={config} />
+ *       </head>
+ *       <body>...</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function ConfigScript({ config }: ConfigScriptProps) {
+  // Only include the UI-related config to avoid exposing sensitive data
+  const safeConfig = {
+    app: config.app,
+    ui: config.ui,
+    theming: config.theming,
+    auth: {
+      methods: config.auth?.methods,
+      allowUnauthenticated: config.auth?.allowUnauthenticated,
+      magicLink: config.auth?.magicLink,
+      emailVerification: config.auth?.emailVerification,
+      gating: config.auth?.gating,
+    },
+    payments: {
+      enabled: config.payments?.enabled,
+      provider: config.payments?.provider,
+    },
+    legal: config.legal,
+    sharing: config.sharing,
+    teams: config.teams,
+    projects: config.projects,
+    documents: config.documents ? {
+      enabled: config.documents.enabled,
+      maxFileSizeMB: config.documents.maxFileSizeMB,
+      hybridThreshold: config.documents.hybridThreshold,
+      acceptedTypes: config.documents.acceptedTypes,
+    } : undefined,
+    api: {
+      enabled: config.api?.enabled,
+    },
+    promptTemplates: config.promptTemplates ? {
+      enabled: config.promptTemplates.enabled,
+      allowUserTemplates: config.promptTemplates.allowUserTemplates,
+    } : undefined,
+    scheduledPrompts: config.scheduledPrompts ? {
+      enabled: config.scheduledPrompts.enabled,
+      featureName: config.scheduledPrompts.featureName,
+      allowUserPrompts: config.scheduledPrompts.allowUserPrompts,
+      allowTeamPrompts: config.scheduledPrompts.allowTeamPrompts,
+      defaultTimezone: config.scheduledPrompts.defaultTimezone,
+      defaultMaxUserPrompts: config.scheduledPrompts.defaultMaxUserPrompts,
+      defaultMaxTeamPrompts: config.scheduledPrompts.defaultMaxTeamPrompts,
+    } : undefined,
+    credits: config.credits ? {
+      enabled: config.credits.enabled,
+      expiryEnabled: config.credits.expiryEnabled,
+      promoEnabled: config.credits.promoEnabled,
+    } : undefined,
+    metering: config.metering ? {
+      enabled: config.metering.enabled,
+      recordPromptCompletion: config.metering.recordPromptCompletion,
+    } : undefined,
+  };
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `window.__CHAASKIT_CONFIG__=${JSON.stringify(safeConfig)};`,
+      }}
+    />
+  );
+}
 /**
  * Route configuration options
  */
@@ -61,7 +159,8 @@ export function createRoute(config: RouteConfig) {
   }
   function links() {
-    return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
+    // CSS is bundled via app's Tailwind preset - no separate stylesheet needed
+    return [];
   }
   function RouteComponent() {

package/src/ssr.ts CHANGED Viewed

@@ -109,6 +109,65 @@ export function getThemeVariables(config: AppConfig, theme: string): Record<stri
   return vars;
 }
+/**
+ * Generates CSS for ALL themes using html[data-theme] selectors.
+ * This is the recommended way to include theme styles - it allows instant
+ * theme switching by just changing the data-theme attribute on <html>.
+ *
+ * @example
+ * ```tsx
+ * // app/root.tsx
+ * import { generateAllThemesCSS, baseStyles } from '@chaaskit/client/ssr';
+ *
+ * // Cache on server - only generate once
+ * let cachedCSS: string | null = null;
+ *
+ * export async function loader() {
+ *   if (!cachedCSS) cachedCSS = generateAllThemesCSS(config);
+ *   return { themeCSS: cachedCSS };
+ * }
+ *
+ * export default function Root() {
+ *   const { themeCSS } = useLoaderData();
+ *   return (
+ *     <html data-theme="dark">
+ *       <head>
+ *         <style dangerouslySetInnerHTML={{ __html: themeCSS + baseStyles }} />
+ *       </head>
+ *       ...
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function generateAllThemesCSS(config: AppConfig): string {
+  const themes = config.theming.themes;
+  let css = '';
+  for (const [themeName, themeConfig] of Object.entries(themes)) {
+    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      ');
+    css += `
+    html[data-theme="${themeName}"] {
+      ${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};
+    }
+`;
+  }
+  return css;
+}
 /**
  * Base CSS styles for SSR pages.
  * Include this in your HTML template for consistent styling.

package/src/stores/chatStore.ts CHANGED Viewed

@@ -19,6 +19,7 @@ interface CompletedToolCall extends PendingToolCall {
   result: MCPContent[];
   isError?: boolean;
   uiResource?: UIResource;
+  structuredContent?: Record<string, unknown>;
   autoApproveReason?: AutoApproveReason;
 }
@@ -324,6 +325,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
                 input?: Record<string, unknown>;
                 isError?: boolean;
                 uiResource?: UIResource;
+                structuredContent?: Record<string, unknown>;
                 // Tool confirmation fields
                 confirmationId?: string;
                 toolName?: string;
@@ -397,6 +399,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
                         result: (data.content as unknown as MCPContent[]) || [],
                         isError: data.isError,
                         uiResource: data.uiResource,
+                        structuredContent: (data.structuredContent as Record<string, unknown> | undefined),
                       }
                     : {
                         // Fallback: create from tool_result event data (server now includes name/serverId/input)
@@ -407,6 +410,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
                         result: (data.content as unknown as MCPContent[]) || [],
                         isError: data.isError,
                         uiResource: data.uiResource,
+                        structuredContent: (data.structuredContent as Record<string, unknown> | undefined),
                       };
                   return {
@@ -492,6 +496,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
               content: tc.result,
               isError: tc.isError,
               uiResource: tc.uiResource,
+              structuredContent: tc.structuredContent,
             }))
           : undefined,
         createdAt: new Date(),

package/src/styles/index.css CHANGED Viewed

@@ -2,69 +2,22 @@
 @tailwind components;
 @tailwind utilities;
-/* Default theme variables (Light) */
-:root {
-  --color-primary: 99 102 241;
-  --color-primary-hover: 79 70 229;
-  --color-secondary: 139 92 246;
-  --color-background: 255 255 255;
-  --color-background-secondary: 249 250 251;
-  --color-sidebar: 243 244 246;
-  --color-text-primary: 17 24 39;
-  --color-text-secondary: 107 114 128;
-  --color-text-muted: 156 163 175;
-  --color-border: 229 231 235;
-  --color-input-background: 255 255 255;
-  --color-input-border: 209 213 219;
-  --color-user-message-bg: 99 102 241;
-  --color-user-message-text: 255 255 255;
-  --color-assistant-message-bg: 243 244 246;
-  --color-assistant-message-text: 17 24 39;
-  --color-success: 16 185 129;
-  --color-warning: 245 158 11;
-  --color-error: 239 68 68;
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', Menlo, monospace;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-full: 9999px;
-}
-/* Dark theme */
-[data-theme="dark"] {
-  --color-primary: 129 140 248;
-  --color-primary-hover: 165 180 252;
-  --color-secondary: 167 139 250;
-  --color-background: 17 24 39;
-  --color-background-secondary: 31 41 55;
-  --color-sidebar: 15 23 42;
-  --color-text-primary: 249 250 251;
-  --color-text-secondary: 209 213 219;
-  --color-text-muted: 107 114 128;
-  --color-border: 55 65 81;
-  --color-input-background: 31 41 55;
-  --color-input-border: 75 85 99;
-  --color-user-message-bg: 79 70 229;
-  --color-user-message-text: 255 255 255;
-  --color-assistant-message-bg: 31 41 55;
-  --color-assistant-message-text: 249 250 251;
-  --color-success: 52 211 153;
-  --color-warning: 251 191 36;
-  --color-error: 248 113 113;
-}
+/*
+ * Theme CSS variables are NOT defined here.
+ * The consuming app (chaaskit-app) is responsible for providing CSS variable values
+ * via inline styles on <html> from config/app.config.ts.
+ *
+ * Required variables:
+ * --color-primary, --color-primary-hover, --color-secondary
+ * --color-background, --color-background-secondary, --color-sidebar
+ * --color-text-primary, --color-text-secondary, --color-text-muted
+ * --color-border, --color-input-background, --color-input-border
+ * --color-user-message-bg, --color-user-message-text
+ * --color-assistant-message-bg, --color-assistant-message-text
+ * --color-success, --color-warning, --color-error
+ * --font-sans, --font-mono
+ * --radius-sm, --radius-md, --radius-lg, --radius-full
+ */
 /* Base styles */
 html {

package/src/tailwind-preset.js ADDED Viewed

@@ -0,0 +1,360 @@
+import plugin from 'tailwindcss/plugin.js';
+/**
+ * Converts a hex color to RGB values string (e.g., "#ff0000" -> "255 0 0")
+ */
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return '0 0 0';
+  return `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`;
+}
+/**
+ * Default ChaasKit themes.
+ * Apps can override these by passing their own themes to createChaaskitPreset().
+ */
+const defaultThemes = {
+  light: {
+    primary: '#6366f1',
+    primaryHover: '#4f46e5',
+    secondary: '#8b5cf6',
+    background: '#ffffff',
+    backgroundSecondary: '#f9fafb',
+    sidebar: '#f3f4f6',
+    textPrimary: '#111827',
+    textSecondary: '#6b7280',
+    textMuted: '#9ca3af',
+    border: '#e5e7eb',
+    inputBackground: '#ffffff',
+    inputBorder: '#d1d5db',
+    userMessageBg: '#6366f1',
+    userMessageText: '#ffffff',
+    assistantMessageBg: '#f3f4f6',
+    assistantMessageText: '#111827',
+    success: '#10b981',
+    warning: '#f59e0b',
+    error: '#ef4444',
+  },
+  dark: {
+    primary: '#818cf8',
+    primaryHover: '#a5b4fc',
+    secondary: '#a78bfa',
+    background: '#111827',
+    backgroundSecondary: '#1f2937',
+    sidebar: '#0f172a',
+    textPrimary: '#f9fafb',
+    textSecondary: '#d1d5db',
+    textMuted: '#6b7280',
+    border: '#374151',
+    inputBackground: '#1f2937',
+    inputBorder: '#4b5563',
+    userMessageBg: '#4f46e5',
+    userMessageText: '#ffffff',
+    assistantMessageBg: '#1f2937',
+    assistantMessageText: '#f9fafb',
+    success: '#34d399',
+    warning: '#fbbf24',
+    error: '#f87171',
+  },
+};
+/**
+ * Default fonts and border radius.
+ */
+const defaultStyles = {
+  fonts: {
+    sans: "'Inter', system-ui, sans-serif",
+    mono: "'JetBrains Mono', Menlo, monospace",
+  },
+  borderRadius: {
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+    full: '9999px',
+  },
+};
+/**
+ * Creates a ChaasKit Tailwind preset with custom themes.
+ *
+ * @param {Object} options
+ * @param {Object} options.themes - Theme definitions (light, dark, etc.)
+ * @param {string} options.defaultTheme - Which theme to use for :root (default: 'light')
+ * @param {Object} options.fonts - Font family overrides
+ * @param {Object} options.borderRadius - Border radius overrides
+ *
+ * @example
+ * // tailwind.config.ts
+ * import { createChaaskitPreset } from '@chaaskit/client/tailwind-preset';
+ *
+ * export default {
+ *   presets: [
+ *     createChaaskitPreset({
+ *       themes: {
+ *         light: { primary: '#dc2626', ... },
+ *         dark: { primary: '#ef4444', ... },
+ *       },
+ *       defaultTheme: 'dark',
+ *     }),
+ *   ],
+ * };
+ */
+export function createChaaskitPreset(options = {}) {
+  const themes = options.themes || defaultThemes;
+  const defaultTheme = options.defaultTheme || 'light';
+  const fonts = { ...defaultStyles.fonts, ...options.fonts };
+  const borderRadius = { ...defaultStyles.borderRadius, ...options.borderRadius };
+  /**
+   * Generate CSS-in-JS for all themes
+   */
+  function generateThemeStyles() {
+    const styles = {};
+    for (const [themeName, colors] of Object.entries(themes)) {
+      const cssVars = {};
+      // Add color variables
+      for (const [key, value] of Object.entries(colors)) {
+        const cssKey = `--color-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+        cssVars[cssKey] = hexToRgb(value);
+      }
+      // Add font and radius variables
+      cssVars['--font-sans'] = fonts.sans;
+      cssVars['--font-mono'] = fonts.mono;
+      cssVars['--radius-sm'] = borderRadius.sm;
+      cssVars['--radius-md'] = borderRadius.md;
+      cssVars['--radius-lg'] = borderRadius.lg;
+      cssVars['--radius-full'] = borderRadius.full;
+      // Use :root for default theme, data-theme selector for all
+      if (themeName === defaultTheme) {
+        styles[':root'] = cssVars;
+      }
+      styles[`html[data-theme="${themeName}"]`] = cssVars;
+    }
+    return styles;
+  }
+  return {
+    content: [
+      './node_modules/@chaaskit/client/src/**/*.{js,ts,jsx,tsx}',
+      './node_modules/@chaaskit/client/dist/**/*.js',
+    ],
+    theme: {
+      extend: {
+        colors: {
+          primary: 'rgb(var(--color-primary) / <alpha-value>)',
+          'primary-hover': 'rgb(var(--color-primary-hover) / <alpha-value>)',
+          secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
+          background: 'rgb(var(--color-background) / <alpha-value>)',
+          'background-secondary': 'rgb(var(--color-background-secondary) / <alpha-value>)',
+          sidebar: 'rgb(var(--color-sidebar) / <alpha-value>)',
+          'text-primary': 'rgb(var(--color-text-primary) / <alpha-value>)',
+          'text-secondary': 'rgb(var(--color-text-secondary) / <alpha-value>)',
+          'text-muted': 'rgb(var(--color-text-muted) / <alpha-value>)',
+          border: 'rgb(var(--color-border) / <alpha-value>)',
+          'input-background': 'rgb(var(--color-input-background) / <alpha-value>)',
+          'input-border': 'rgb(var(--color-input-border) / <alpha-value>)',
+          'user-message-bg': 'rgb(var(--color-user-message-bg) / <alpha-value>)',
+          'user-message-text': 'rgb(var(--color-user-message-text) / <alpha-value>)',
+          'assistant-message-bg': 'rgb(var(--color-assistant-message-bg) / <alpha-value>)',
+          'assistant-message-text': 'rgb(var(--color-assistant-message-text) / <alpha-value>)',
+          success: 'rgb(var(--color-success) / <alpha-value>)',
+          warning: 'rgb(var(--color-warning) / <alpha-value>)',
+          error: 'rgb(var(--color-error) / <alpha-value>)',
+        },
+        fontFamily: {
+          sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
+          mono: ['var(--font-mono)', 'Menlo', 'monospace'],
+        },
+        borderRadius: {
+          sm: 'var(--radius-sm)',
+          md: 'var(--radius-md)',
+          lg: 'var(--radius-lg)',
+          full: 'var(--radius-full)',
+        },
+      },
+    },
+    plugins: [
+      // Inject theme CSS variables
+      plugin(function ({ addBase }) {
+        addBase(generateThemeStyles());
+      }),
+      // Custom variant for touch devices
+      plugin(function ({ addVariant }) {
+        addVariant('touch-device', '@media (pointer: coarse)');
+      }),
+      // Base styles and utilities
+      plugin(function ({ addBase, addUtilities }) {
+        // Base element styles
+        addBase({
+          'html': {
+            fontFamily: 'var(--font-sans)',
+          },
+          'pre': {
+            fontFamily: 'var(--font-mono)',
+            fontSize: '0.875rem',
+          },
+          'code': {
+            fontFamily: 'var(--font-mono)',
+          },
+          'kbd': {
+            fontFamily: 'var(--font-sans)',
+          },
+          // Scrollbar styling
+          '::-webkit-scrollbar': {
+            width: '8px',
+            height: '8px',
+          },
+          '::-webkit-scrollbar-track': {
+            backgroundColor: 'transparent',
+          },
+          '::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgb(var(--color-border))',
+            borderRadius: '9999px',
+          },
+          '::-webkit-scrollbar-thumb:hover': {
+            backgroundColor: 'rgb(var(--color-text-muted))',
+          },
+          // Markdown content styling
+          '.markdown-content': {
+            lineHeight: '1.625',
+          },
+          '.markdown-content h1': {
+            fontSize: '1.5rem',
+            fontWeight: '700',
+            marginTop: '1.5rem',
+            marginBottom: '1rem',
+          },
+          '.markdown-content h2': {
+            fontSize: '1.25rem',
+            fontWeight: '700',
+            marginTop: '1.25rem',
+            marginBottom: '0.75rem',
+          },
+          '.markdown-content h3': {
+            fontSize: '1.125rem',
+            fontWeight: '600',
+            marginTop: '1rem',
+            marginBottom: '0.5rem',
+          },
+          '.markdown-content p': {
+            marginBottom: '1rem',
+          },
+          '.markdown-content ul, .markdown-content ol': {
+            marginBottom: '1rem',
+            paddingLeft: '1.5rem',
+          },
+          '.markdown-content ul': {
+            listStyleType: 'disc',
+          },
+          '.markdown-content ol': {
+            listStyleType: 'decimal',
+          },
+          '.markdown-content li': {
+            marginBottom: '0.25rem',
+          },
+          '.markdown-content blockquote': {
+            borderLeftWidth: '4px',
+            borderLeftColor: 'rgb(var(--color-border))',
+            paddingLeft: '1rem',
+            fontStyle: 'italic',
+            marginTop: '1rem',
+            marginBottom: '1rem',
+          },
+          '.markdown-content a': {
+            color: 'rgb(var(--color-primary))',
+          },
+          '.markdown-content a:hover': {
+            textDecoration: 'underline',
+          },
+          '.markdown-content table': {
+            width: '100%',
+            borderCollapse: 'collapse',
+            marginTop: '1rem',
+            marginBottom: '1rem',
+          },
+          '.markdown-content th, .markdown-content td': {
+            borderWidth: '1px',
+            borderColor: 'rgb(var(--color-border))',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+            textAlign: 'left',
+          },
+          '.markdown-content th': {
+            backgroundColor: 'rgb(var(--color-background-secondary))',
+            fontWeight: '600',
+          },
+          '.markdown-content hr': {
+            marginTop: '1.5rem',
+            marginBottom: '1.5rem',
+            borderColor: 'rgb(var(--color-border))',
+          },
+          // Search highlight
+          'mark': {
+            backgroundColor: 'rgb(var(--color-warning) / 0.3)',
+            color: 'rgb(var(--color-text-primary))',
+            borderRadius: '0.125rem',
+            paddingLeft: '0.125rem',
+            paddingRight: '0.125rem',
+          },
+          // Animations
+          '@keyframes fade-in': {
+            from: { opacity: '0' },
+            to: { opacity: '1' },
+          },
+          '@keyframes slide-up': {
+            from: { transform: 'translateY(10px)', opacity: '0' },
+            to: { transform: 'translateY(0)', opacity: '1' },
+          },
+          '@keyframes typing': {
+            '0%, 60%, 100%': { opacity: '1' },
+            '30%': { opacity: '0.3' },
+          },
+          '.animate-fade-in': {
+            animation: 'fade-in 0.2s ease-out',
+          },
+          '.animate-slide-up': {
+            animation: 'slide-up 0.2s ease-out',
+          },
+          '.typing-indicator span': {
+            animation: 'typing 1s infinite',
+          },
+          '.typing-indicator span:nth-child(2)': {
+            animationDelay: '0.2s',
+          },
+          '.typing-indicator span:nth-child(3)': {
+            animationDelay: '0.4s',
+          },
+        });
+        // Custom utilities
+        addUtilities({
+          // Mobile viewport height fix - dvh with fallback
+          '.h-screen-safe': {
+            height: '100vh',
+            '@supports (height: 100dvh)': {
+              height: '100dvh',
+            },
+          },
+          // Line clamp
+          '.line-clamp-2': {
+            display: '-webkit-box',
+            '-webkit-line-clamp': '2',
+            '-webkit-box-orient': 'vertical',
+            overflow: 'hidden',
+          },
+        });
+      }),
+    ],
+  };
+}
+// Default export for simple usage
+const chaaskitPreset = createChaaskitPreset();
+export default chaaskitPreset;

package/dist/favicon.svg DELETED Viewed

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
-  <defs>
-    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#6366f1"/>
-      <stop offset="100%" style="stop-color:#8b5cf6"/>
-    </linearGradient>
-  </defs>
-  <rect width="32" height="32" rx="6" fill="url(#grad)"/>
-  <path d="M10 12 L16 9 L22 12 L22 18 L16 21 L10 18 Z" fill="none" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
-  <circle cx="16" cy="15" r="2.5" fill="white"/>
-</svg>