@makolabs/ripple 0.4.1-0 → 0.5.0

package/dist/ai/ai-chat-interface.d.ts

@@ -0,0 +1,161 @@
+export declare const aiChatInterface: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        primary: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        secondary: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        success: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        warning: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        danger: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        info: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+    };
+    loading: {
+        true: {
+            sendButton: string;
+        };
+    };
+    disabled: {
+        true: {
+            sendButton: string;
+        };
+    };
+}, {
+    userMessage: string;
+    aiMessage: string;
+    sendButton: string;
+    background: string;
+}, undefined, {
+    color: {
+        default: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        primary: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        secondary: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        success: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        warning: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        danger: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        info: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+    };
+    loading: {
+        true: {
+            sendButton: string;
+        };
+    };
+    disabled: {
+        true: {
+            sendButton: string;
+        };
+    };
+}, {
+    userMessage: string;
+    aiMessage: string;
+    sendButton: string;
+    background: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        primary: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        secondary: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        success: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        warning: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        danger: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+        info: {
+            userMessage: string;
+            sendButton: string;
+            background: string;
+        };
+    };
+    loading: {
+        true: {
+            sendButton: string;
+        };
+    };
+    disabled: {
+        true: {
+            sendButton: string;
+        };
+    };
+}, {
+    userMessage: string;
+    aiMessage: string;
+    sendButton: string;
+    background: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AIChatInterfaceVariants = Parameters<typeof aiChatInterface>[0];

package/dist/ai/ai-chat-interface.js

@@ -0,0 +1,63 @@
+import { tv } from 'tailwind-variants';
+export const aiChatInterface = tv({
+    slots: {
+        userMessage: 'max-w-[70%] ml-auto px-4 py-3 rounded-3xl text-sm leading-relaxed shadow-lg',
+        aiMessage: 'max-w-[80%] mr-auto px-4 py-3 rounded-3xl text-sm leading-relaxed bg-white border border-default-200 text-default-900 shadow-sm',
+        sendButton: 'flex-shrink-0 w-11 h-11 rounded-full flex items-center justify-center transition-all duration-200 shadow-sm hover:shadow-md',
+        background: ''
+    },
+    variants: {
+        color: {
+            default: {
+                userMessage: 'bg-default-900 text-white',
+                sendButton: 'bg-default-900 hover:bg-default-800 text-white disabled:bg-default-300 disabled:text-default-500',
+                background: 'bg-gray-50'
+            },
+            primary: {
+                userMessage: 'bg-primary-600 text-white',
+                sendButton: 'bg-primary-600 hover:bg-primary-700 text-white disabled:bg-primary-300 disabled:text-primary-100',
+                background: 'bg-blue-50'
+            },
+            secondary: {
+                userMessage: 'bg-secondary-600 text-white',
+                sendButton: 'bg-secondary-600 hover:bg-secondary-700 text-white disabled:bg-secondary-300 disabled:text-secondary-100',
+                background: 'bg-purple-50'
+            },
+            success: {
+                userMessage: 'bg-success-600 text-white',
+                sendButton: 'bg-success-600 hover:bg-success-700 text-white disabled:bg-success-300 disabled:text-success-100',
+                background: 'bg-green-50'
+            },
+            warning: {
+                userMessage: 'bg-warning-600 text-white',
+                sendButton: 'bg-warning-600 hover:bg-warning-700 text-white disabled:bg-warning-300 disabled:text-warning-100',
+                background: 'bg-yellow-50'
+            },
+            danger: {
+                userMessage: 'bg-danger-600 text-white',
+                sendButton: 'bg-danger-600 hover:bg-danger-700 text-white disabled:bg-danger-300 disabled:text-danger-100',
+                background: 'bg-red-50'
+            },
+            info: {
+                userMessage: 'bg-info-600 text-white',
+                sendButton: 'bg-info-600 hover:bg-info-700 text-white disabled:bg-info-300 disabled:text-info-100',
+                background: 'bg-cyan-50'
+            }
+        },
+        loading: {
+            true: {
+                sendButton: 'cursor-not-allowed'
+            }
+        },
+        disabled: {
+            true: {
+                sendButton: 'cursor-not-allowed opacity-50'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'primary',
+        loading: false,
+        disabled: false
+    }
+});

package/dist/ai/content-detector.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Content detection utilities for AI chat messages
+ */
+export interface CodeBlock {
+    language: string;
+    code: string;
+    startIndex: number;
+    endIndex: number;
+}
+export interface MermaidBlock {
+    diagram: string;
+    startIndex: number;
+    endIndex: number;
+}
+export interface ContentSegment {
+    type: 'text' | 'code' | 'mermaid';
+    content: string;
+    language?: string;
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * Detects if content contains Mermaid diagram syntax
+ */
+export declare function detectMermaidDiagrams(content: string): MermaidBlock[];
+/**
+ * Detects code blocks in content
+ */
+export declare function detectCodeBlocks(content: string): CodeBlock[];
+/**
+ * Parses content into segments (text, code, mermaid)
+ */
+export declare function parseContentSegments(content: string): ContentSegment[];
+/**
+ * Simple check if content contains any Mermaid diagrams
+ */
+export declare function hasMermaidDiagrams(content: string): boolean;
+/**
+ * Simple check if content contains any code blocks
+ */
+export declare function hasCodeBlocks(content: string): boolean;

package/dist/ai/content-detector.js

@@ -0,0 +1,153 @@
+/**
+ * Content detection utilities for AI chat messages
+ */
+/**
+ * Detects if content contains Mermaid diagram syntax
+ */
+export function detectMermaidDiagrams(content) {
+    const mermaidBlocks = [];
+    // Pattern to match mermaid code blocks
+    // Handles various Mermaid diagram types and whitespace scenarios
+    const mermaidRegex = /```(?:mermaid|graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|stateDiagram-v2|erDiagram|journey|gantt|pie|gitgraph|mindmap)\s*\r?\n([\s\S]*?)\r?\n```/gi;
+    let match;
+    while ((match = mermaidRegex.exec(content)) !== null) {
+        mermaidBlocks.push({
+            diagram: match[1].trim(),
+            startIndex: match.index,
+            endIndex: match.index + match[0].length
+        });
+    }
+    return mermaidBlocks;
+}
+/**
+ * Detects code blocks in content
+ */
+export function detectCodeBlocks(content) {
+    const codeBlocks = [];
+    // Pattern to match code blocks with language specification
+    // Handles: ```language, ```, and various whitespace scenarios
+    const codeRegex = /```(\w+)?\s*\r?\n([\s\S]*?)\r?\n```/gi;
+    let match;
+    while ((match = codeRegex.exec(content)) !== null) {
+        const language = match[1] || 'text';
+        const code = match[2].trim();
+        // Skip empty code blocks
+        if (!code) {
+            continue;
+        }
+        // Skip if it's a mermaid diagram (handled separately)
+        if (!isMermaidLanguage(language)) {
+            codeBlocks.push({
+                language,
+                code,
+                startIndex: match.index,
+                endIndex: match.index + match[0].length
+            });
+        }
+    }
+    return codeBlocks;
+}
+/**
+ * Checks if a language identifier is for Mermaid diagrams
+ */
+function isMermaidLanguage(language) {
+    const mermaidLanguages = [
+        'mermaid',
+        'graph',
+        'flowchart',
+        'sequenceDiagram',
+        'classDiagram',
+        'stateDiagram',
+        'stateDiagram-v2',
+        'erDiagram',
+        'journey',
+        'gantt',
+        'pie',
+        'gitgraph',
+        'mindmap'
+    ];
+    return mermaidLanguages.includes(language.toLowerCase());
+}
+/**
+ * Parses content into segments (text, code, mermaid)
+ */
+export function parseContentSegments(content) {
+    console.log('parseContentSegments', content);
+    const segments = [];
+    const mermaidBlocks = detectMermaidDiagrams(content);
+    const codeBlocks = detectCodeBlocks(content);
+    // Combine all blocks and sort by position
+    const allBlocks = [
+        ...mermaidBlocks.map(block => ({ ...block, type: 'mermaid' })),
+        ...codeBlocks.map(block => ({ ...block, type: 'code' }))
+    ].sort((a, b) => a.startIndex - b.startIndex);
+    let currentIndex = 0;
+    for (const block of allBlocks) {
+        // Add text segment before this block
+        if (currentIndex < block.startIndex) {
+            const textContent = content.slice(currentIndex, block.startIndex).trim();
+            if (textContent) {
+                segments.push({
+                    type: 'text',
+                    content: textContent,
+                    startIndex: currentIndex,
+                    endIndex: block.startIndex
+                });
+            }
+        }
+        // Add the block segment
+        if (block.type === 'mermaid') {
+            segments.push({
+                type: 'mermaid',
+                content: block.diagram,
+                startIndex: block.startIndex,
+                endIndex: block.endIndex
+            });
+        }
+        else {
+            const codeBlock = block;
+            segments.push({
+                type: 'code',
+                content: codeBlock.code,
+                language: codeBlock.language,
+                startIndex: block.startIndex,
+                endIndex: block.endIndex
+            });
+        }
+        currentIndex = block.endIndex;
+    }
+    // Add remaining text after last block
+    if (currentIndex < content.length) {
+        const textContent = content.slice(currentIndex).trim();
+        if (textContent) {
+            segments.push({
+                type: 'text',
+                content: textContent,
+                startIndex: currentIndex,
+                endIndex: content.length
+            });
+        }
+    }
+    // If no blocks found, return entire content as text
+    if (segments.length === 0) {
+        segments.push({
+            type: 'text',
+            content: content,
+            startIndex: 0,
+            endIndex: content.length
+        });
+    }
+    return segments;
+}
+/**
+ * Simple check if content contains any Mermaid diagrams
+ */
+export function hasMermaidDiagrams(content) {
+    return detectMermaidDiagrams(content).length > 0;
+}
+/**
+ * Simple check if content contains any code blocks
+ */
+export function hasCodeBlocks(content) {
+    return detectCodeBlocks(content).length > 0;
+}

package/dist/config/ai.d.ts

@@ -0,0 +1,13 @@
+export interface AIConfig {
+    provider: 'openai' | 'anthropic' | 'ollama';
+    apiKey?: string;
+    model?: string;
+    baseUrl?: string;
+}
+export declare function getAIConfig(): AIConfig;
+export declare function validateAIConfig(config: AIConfig): boolean;
+export declare const ENV_GUIDE: {
+    openai: string[];
+    anthropic: string[];
+    ollama: string[];
+};

package/dist/config/ai.js

@@ -0,0 +1,43 @@
+import { browser } from '$app/environment';
+import { dev } from '$app/environment';
+export function getAIConfig() {
+    if (!browser) {
+        return {
+            provider: 'openai'
+        };
+    }
+    const config = {
+        provider: import.meta.env.VITE_AI_PROVIDER || 'openai',
+        apiKey: import.meta.env.VITE_OPENAI_API_KEY,
+        model: import.meta.env.VITE_OPENAI_MODEL || 'gpt-4-turbo-preview',
+        baseUrl: import.meta.env.VITE_OPENAI_BASE_URL || 'https://api.openai.com/v1'
+    };
+    // In development, provide helpful warnings
+    if (dev && !config.apiKey && config.provider === 'openai') {
+        console.warn('⚠️ OpenAI API key not found. Set VITE_OPENAI_API_KEY in your .env file');
+        console.warn('💡 Create a .env file with: VITE_OPENAI_API_KEY=sk-your-key-here');
+    }
+    return config;
+}
+export function validateAIConfig(config) {
+    switch (config.provider) {
+        case 'openai':
+            return !!config.apiKey;
+        case 'anthropic':
+            return !!config.apiKey;
+        case 'ollama':
+            return !!config.baseUrl;
+        default:
+            return false;
+    }
+}
+// Environment variables guide
+export const ENV_GUIDE = {
+    openai: [
+        'VITE_OPENAI_API_KEY=sk-your-openai-key',
+        'VITE_OPENAI_MODEL=gpt-4-turbo-preview (optional)',
+        'VITE_OPENAI_BASE_URL=https://api.openai.com/v1 (optional)'
+    ],
+    anthropic: ['VITE_ANTHROPIC_API_KEY=your-anthropic-key', 'VITE_AI_PROVIDER=anthropic'],
+    ollama: ['VITE_OLLAMA_BASE_URL=http://localhost:11434', 'VITE_AI_PROVIDER=ollama']
+};

package/dist/elements/accordion/accordion.js

@@ -5,7 +5,7 @@ export const accordion = tv({
         base: 'w-full relative overflow-hidden rounded-xl transition-all duration-200 bg-white border border-default-200',
         header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200',
         title: 'flex text-default-900 text-lg font-medium leading-tight',
-        body: 'w-full border-t border-default-200 p-4 pt-3 transition-all',
+        body: 'w-full border-t border-default-200 p-4 pt-3 transition-all'
     },
     variants: {
         color: {

package/dist/elements/badge/Badge.svelte

@@ -30,9 +30,20 @@
 	{@render children()}
 	{#if onClose}
 		<button
-			onclick={handleOnClose} class="cursor-pointer h-full flex items-center" aria-label="Close" title="Close"
-			tabindex="0" type="button">
-			<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="size-2">
+			onclick={handleOnClose}
+			class="flex h-full cursor-pointer items-center"
+			aria-label="Close"
+			title="Close"
+			tabindex="0"
+			type="button"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="32"
+				height="32"
+				viewBox="0 0 32 32"
+				class="size-2"
+			>
 				<path
 					fill="currentColor"
 					d="M26.113 4.116a1.25 1.25 0 0 1 1.768 1.768L17.766 15.999l10.115 10.114a1.25 1.25 0 1 1-1.768 1.768L16 17.766L5.884 27.881a1.25 1.25 0 1 1-1.768-1.768L14.231 16L4.116 5.884a1.25 1.25 0 1 1 1.768-1.768l10.115 10.115z"

package/dist/elements/dropdown/Dropdown.svelte

@@ -116,9 +116,9 @@
 	function handleClickOutside(event: MouseEvent) {
 		// Only handle if this specific dropdown is open
 		if (!isOpen) return;
-		
+
 		const target = event.target as Node;
-		
+
 		// Check if click is outside both the dropdown and trigger
 		if (
 			dropdownRef &&

package/dist/elements/dropdown/Select.svelte

@@ -208,7 +208,7 @@
 		{disabled}
 		aria-expanded={open}
 		onclick={handleToggle}
-		class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+		class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
 		tabindex={disabled ? -1 : 0}
 	></button>
 	<span class="flex min-h-[1.5rem] flex-1 flex-wrap items-center gap-1 overflow-hidden">

package/dist/elements/progress/Progress.svelte

@@ -45,7 +45,7 @@
 	// Derived values
 	const percentage = $derived(segments ? 100 : calculatePercentage(value, max));
 	const segmentPercentages = $derived(
-		segments?.map(segment => ({
+		segments?.map((segment) => ({
 			...segment,
 			percentage: calculatePercentage(segment.value, max)
 		})) || []
@@ -78,11 +78,7 @@
 	);
 
 	const fillClass = $derived(
-		cn(
-			'h-full rounded-full transition-all',
-			segments ? '' : getColorClass(color),
-			barClass
-		)
+		cn('h-full rounded-full transition-all', segments ? '' : getColorClass(color), barClass)
 	);
 
 	const labelTextClass = $derived(
@@ -110,7 +106,7 @@
 		{#if segments}
 			{#each segmentPercentages as segment}
 				{#if segment.percentage > 0}
-					<div 
+					<div
 						class={cn(getColorClass(segment.color), barClass)}
 						style="width: {segment.percentage}%"
 						title={segment.label || `${segment.value} (${segment.percentage}%)`}
@@ -121,9 +117,9 @@
 			<div class={fillClass} style="width: {percentage}%"></div>
 		{/if}
 	</div>
-	
+
 	{#if segments && (showLabels || showValues)}
-		<div class="flex justify-between mt-1">
+		<div class="mt-1 flex justify-between">
 			{#each segmentPercentages as segment}
 				{#if segment.percentage > 0}
 					<div class={labelTextClass}>
@@ -131,7 +127,8 @@
 							{segment.label}
 						{/if}
 						{#if showValues}
-							{#if showLabels && segment.label} ({/if}
+							{#if showLabels && segment.label}
+								({/if}
 							{segment.percentage}%
 							{#if showLabels && segment.label}){/if}
 						{/if}

package/dist/file-browser/FileBrowser.svelte

@@ -9,7 +9,7 @@
 		Breadcrumb,
 		FileAction,
 		FileActionBatch,
-		FileActionSingle,
+		FileActionSingle
 	} from '../adapters/storage/index.js';
 
 	let {