@makolabs/ripple 1.7.11 → 1.9.0

package/README.md

@@ -637,3 +637,19 @@ For CI environments (GitHub Actions, etc.), use:
 - name: Run tests
   run: npm run test:unit -- --run
 ```
+
+## Troubleshooting
+
+### Missing color tokens (components render without color)
+
+Ripple UI uses custom color tokens (e.g. `primary`, `secondary`, `danger`) that must be defined in your app's CSS. If components appear unstyled or use fallback colors, add the `@theme` block with all required color token definitions to your `app.css`. See the full token list in the [Usage](#usage) section above.
+
+### TailwindCSS 4 `@source` configuration
+
+TailwindCSS 4 does not automatically scan `node_modules` for class names. You must add the following directive to your `app.css` so that Tailwind generates the utility classes used by Ripple UI components:
+
+```css
+@source '../node_modules/@makolabs/ripple';
+```
+
+Without this, component styles that rely on Tailwind utilities will be missing from your build output.

package/dist/adapters/ai/OpenAIAdapter.d.ts

@@ -2,14 +2,21 @@ import type { ChatResponse, ChatMessage, StreamingCallback } from '../../index.j
 import type { AIAdapter, AIContext } from './types.js';
 /**
  * Configuration for OpenAI adapter
+ *
+ * **Security warning:** This adapter makes API calls directly from the browser.
+ * The API key will be visible in network requests. For production use, consider
+ * proxying requests through a server-side endpoint to avoid exposing the key.
  */
 export interface OpenAIAdapterConfig {
     /**
      * OpenAI API key
+     *
+     * **Warning:** This key is sent in browser-side fetch requests and will be
+     * visible in network traffic. Use a server-side proxy for production.
      */
     apiKey: string;
     /**
-     * Model to use (defaults to gpt-4-turbo-preview)
+     * Model to use (defaults to gpt-5-mini)
      */
     model?: string;
     /**

package/dist/adapters/ai/OpenAIAdapter.js

@@ -13,8 +13,8 @@ export class OpenAIAdapter {
     constructor(config) {
         // Set defaults
         this.config = {
-            model: 'gpt-5', // make this configurable
-            baseUrl: 'https://api.openai.com/v1', // make this configurable
+            model: 'gpt-5-mini',
+            baseUrl: 'https://api.openai.com/v1',
             systemPrompt: this.getDefaultSystemPrompt(),
             temperature: 0.7,
             maxTokens: 4000,

package/dist/adapters/storage/BaseAdapter.js

@@ -17,7 +17,7 @@ export class BaseAdapter {
                     contentType: options.contentType,
                     fileFormat: options.fileFormat,
                     reference: options.reference || file.name,
-                    insurer: options.contentType === 'insurer_statement' ? options.insurer : null
+                    insurer: options.insurer || null
                 })
             });
             if (!response.ok) {
@@ -44,7 +44,7 @@ export class BaseAdapter {
     }
     async getImportStatus(importId) {
         try {
-            const response = await fetch(`/api/v1/uploads/${importId}`);
+            const response = await fetch(`/api/${this.getApiPath()}/imports/${importId}`);
             if (!response.ok) {
                 if (response.status === 404) {
                     throw new Error(`404: File ${importId} not found on server`);

package/dist/adapters/storage/S3Adapter.js

@@ -6,7 +6,7 @@ export class S3Adapter extends BaseAdapter {
     basePath;
     constructor(basePath, publicS3BasePath) {
         super();
-        this.basePath = basePath || publicS3BasePath || 'export/clarkfin/';
+        this.basePath = basePath || publicS3BasePath || '/';
     }
     getName() {
         return 'S3';
@@ -111,11 +111,6 @@ export class S3Adapter extends BaseAdapter {
                     parentPath = this.basePath;
                 }
             }
-            // Debug log
-            console.log(`S3 listing path: ${normalizedPath}, files: ${fileItems.length}, folders: ${folders.length}`);
-            if (folders.length > 0) {
-                console.log('Sample folder names:', folders.slice(0, 3).map((f) => f.name));
-            }
             return {
                 files,
                 currentPath: normalizedPath,

package/dist/adapters/storage/types.d.ts

@@ -89,9 +89,9 @@ export interface StorageAdapter {
     getName(): string;
     list(path: string, searchQuery?: string): Promise<FileListResult>;
     download(file: FileItem): Promise<URLString>;
-    import(file: FileItem, options: ImportOptions): Promise<ImportResult>;
-    batchImport(files: FileItem[], options: ImportOptions): Promise<BatchImportResult>;
-    getImportStatus(importId: string, fileKey: string): Promise<ImportStatus>;
+    import?(file: FileItem, options: ImportOptions): Promise<ImportResult>;
+    batchImport?(files: FileItem[], options: ImportOptions): Promise<BatchImportResult>;
+    getImportStatus?(importId: string, fileKey?: string): Promise<ImportStatus>;
     reportError?(importId: string, options: ErrorReportOptions): Promise<boolean>;
     isConfigured(): Promise<boolean>;
     authenticate?(): Promise<boolean>;

package/dist/ai/AIChatInterface.svelte

@@ -273,7 +273,6 @@
 	function handleThinkingToggle(enabled: boolean) {
 		thinkingMode = enabled;
 		// You can add additional logic here when thinking mode changes
-		console.log('Thinking mode:', enabled ? 'enabled' : 'disabled');
 	}
 
 	// Check adapter configuration

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

@@ -1,37 +1,36 @@
-import { Color } from '../variants.js';
 export declare const aiChatInterface: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.WARNING]: {
+        warning: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.DANGER]: {
+        danger: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.INFO]: {
+        info: {
             userMessage: string;
             sendButton: string;
             background: string;
@@ -54,37 +53,37 @@ export declare const aiChatInterface: import("tailwind-variants").TVReturnType<{
     background: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.WARNING]: {
+        warning: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.DANGER]: {
+        danger: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.INFO]: {
+        info: {
             userMessage: string;
             sendButton: string;
             background: string;
@@ -107,37 +106,37 @@ export declare const aiChatInterface: import("tailwind-variants").TVReturnType<{
     background: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.WARNING]: {
+        warning: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.DANGER]: {
+        danger: {
             userMessage: string;
             sendButton: string;
             background: string;
         };
-        [Color.INFO]: {
+        info: {
             userMessage: string;
             sendButton: string;
             background: string;

package/dist/ai/ai-types.d.ts

@@ -0,0 +1,44 @@
+import type { Component } from 'svelte';
+import type { FileAction, StorageAdapter } from '../adapters/storage/types.js';
+export type ChatMessageType = 'chat' | 'action' | 'thinking';
+export type StreamingCallback = (response: ChatResponse) => void;
+export interface ChatAction {
+    type: string;
+    data: any;
+    metadata?: Record<string, any>;
+}
+export interface ChatMessage {
+    id: string;
+    type: ChatMessageType;
+    content: string;
+    timestamp: Date;
+    action?: ChatAction;
+    thinkingContent?: string;
+    isThinkingComplete?: boolean;
+}
+export interface ChatResponse {
+    type: ChatMessageType;
+    content: string;
+    action?: ChatAction;
+    messageId?: string;
+    isStreaming?: boolean;
+    isStreamEnd?: boolean;
+    thinkingContent?: string;
+    isThinkingComplete?: boolean;
+}
+export interface QuickAction {
+    label: string;
+    prompt: string;
+    icon?: Component;
+}
+export interface FileBrowserProps {
+    adapter: StorageAdapter;
+    startPath?: string;
+    actions?: FileAction[];
+    selectedFiles?: string[];
+    infoSection?: (props: {
+        selectedFiles: string[];
+        navToFileFolder: (fileKey: string) => void;
+    }) => any;
+    testId?: string;
+}

package/dist/ai/ai-types.js

@@ -0,0 +1 @@
+export {};

package/dist/ai/content-detector.js

@@ -72,7 +72,6 @@ function isMermaidLanguage(language) {
  * 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);

package/dist/button/Button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { buttonVariants } from './button.js';
 	import type { ButtonProps } from '../index.js';
 	import { Color, Size } from '../variants.js';
@@ -12,6 +13,7 @@
 		disabled = false,
 		isLoading = false,
 		class: className = '',
+		testId,
 		children,
 		...restProps
 	}: ButtonProps = $props();
@@ -34,13 +36,18 @@
 </script>
 
 {#if restProps['href']}
-	<a class={buttonClasses} {...restProps}>
+	<a class={buttonClasses} data-testid={buildTestId('button', undefined, testId)} {...restProps}>
 		{#if children}
 			{@render children()}
 		{/if}
 	</a>
 {:else}
-	<button class={buttonClasses} disabled={disabled || isLoading} {...restProps}>
+	<button
+		class={buttonClasses}
+		data-testid={buildTestId('button', undefined, testId)}
+		disabled={disabled || isLoading}
+		{...restProps}
+	>
 		{#if children}
 			{@render children()}
 		{/if}

package/dist/button/button-types.d.ts

@@ -0,0 +1,25 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAttributeAnchorTarget } from 'svelte/elements';
+import type { VariantColors, VariantSizes } from '../index.js';
+export type BaseButtonProps = {
+    class?: ClassValue;
+    variant?: 'solid' | 'outline' | 'ghost' | 'link';
+    color?: VariantColors;
+    size?: VariantSizes;
+    rounded?: 'none' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'full';
+    disabled?: boolean | undefined | null;
+    isLoading?: boolean;
+    children?: Snippet;
+    testId?: string;
+};
+export type ButtonHTMLProps = {
+    href?: never;
+} & HTMLButtonAttributes;
+export type AnchorHTMLProps = {
+    rel?: string | undefined | null;
+    target?: HTMLAttributeAnchorTarget | undefined | null;
+    referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined | null;
+    href: string;
+} & Record<string, unknown>;
+export type ButtonProps = BaseButtonProps & (ButtonHTMLProps | AnchorHTMLProps);

package/dist/button/button-types.js

@@ -0,0 +1 @@
+export {};

package/dist/button/button.d.ts

@@ -1,4 +1,3 @@
-import { Color, Size } from '../variants.js';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         solid: string;
@@ -7,21 +6,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         link: string;
     };
     color: {
-        [Color.DEFAULT]: string;
-        [Color.PRIMARY]: string;
-        [Color.SECONDARY]: string;
-        [Color.INFO]: string;
-        [Color.SUCCESS]: string;
-        [Color.WARNING]: string;
-        [Color.DANGER]: string;
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
     size: {
-        [Size.XS]: string;
-        [Size.SM]: string;
-        [Size.BASE]: string;
-        [Size.LG]: string;
-        [Size.XL]: string;
-        [Size.XXL]: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
     };
     rounded: {
         none: string;
@@ -44,21 +43,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         link: string;
     };
     color: {
-        [Color.DEFAULT]: string;
-        [Color.PRIMARY]: string;
-        [Color.SECONDARY]: string;
-        [Color.INFO]: string;
-        [Color.SUCCESS]: string;
-        [Color.WARNING]: string;
-        [Color.DANGER]: string;
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
     size: {
-        [Size.XS]: string;
-        [Size.SM]: string;
-        [Size.BASE]: string;
-        [Size.LG]: string;
-        [Size.XL]: string;
-        [Size.XXL]: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
     };
     rounded: {
         none: string;
@@ -81,21 +80,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         link: string;
     };
     color: {
-        [Color.DEFAULT]: string;
-        [Color.PRIMARY]: string;
-        [Color.SECONDARY]: string;
-        [Color.INFO]: string;
-        [Color.SUCCESS]: string;
-        [Color.WARNING]: string;
-        [Color.DANGER]: string;
+        default: string;
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        danger: string;
     };
     size: {
-        [Size.XS]: string;
-        [Size.SM]: string;
-        [Size.BASE]: string;
-        [Size.LG]: string;
-        [Size.XL]: string;
-        [Size.XXL]: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
     };
     rounded: {
         none: string;

package/dist/charts/Chart.svelte

@@ -2,29 +2,18 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { cn } from '../helper/cls.js';
 	import * as echarts from 'echarts/core';
-	// @ts-expect-error - ECharts types are not available
 	import { LineChart, BarChart, PieChart } from 'echarts/charts';
 	import {
-		// @ts-expect-error - ECharts types are not available
 		GridComponent,
-		// @ts-expect-error - ECharts types are not available
 		TooltipComponent,
-		// @ts-expect-error - ECharts types are not available
 		TitleComponent,
-		// @ts-expect-error - ECharts types are not available
 		LegendComponent,
-		// @ts-expect-error - ECharts types are not available
 		DataZoomComponent,
-		// @ts-expect-error - ECharts types are not available
 		ToolboxComponent,
-		// @ts-expect-error - ECharts types are not available
 		MarkLineComponent,
-		// @ts-expect-error - ECharts types are not available
 		MarkPointComponent,
-		// @ts-expect-error - ECharts types are not available
 		GraphicComponent
 	} from 'echarts/components';
-	// @ts-expect-error - ECharts types are not available
 	import { SVGRenderer } from 'echarts/renderers';
 	import {
 		type ChartProps,
@@ -34,7 +23,6 @@
 	} from '../index.js';
 	import { defaultChartColors } from '../variants.js';
 
-	// @ts-expect-error - ECharts types are not available
 	echarts.use([
 		LineChart,
 		BarChart,
@@ -107,9 +95,9 @@
 	const hasPieChart = $derived(series.some((s) => s.type === 'pie'));
 
 	let chartContainer: HTMLDivElement;
-	// @ts-expect-error - ECharts types are not available
 	let chart: echarts.ECharts;
 	let resizeObserver: ResizeObserver;
+	let resizeTimeoutId: ReturnType<typeof setTimeout>;
 
 	const chartColors: ChartColors = { ...defaultChartColors, ...colors };
 	const baseColors = [
@@ -286,8 +274,8 @@
 				label: {
 					show: seriesConfig.showLabel || false,
 					position: actualType === 'line' ? 'top' : 'inside',
-					// @ts-expect-error - ECharts types are not available
-					formatter: (params) => {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					formatter: (params: any) => {
 						const yAxisIndex = seriesConfig.yAxisIndex || 0;
 						const axisConfig = yAxis[yAxisIndex];
 						return formatValue(params.value, axisConfig.format, axisConfig.unit);
@@ -374,8 +362,8 @@
 			// Add center text if specified in the first pie series
 			const pieSeriesWithCenterText = series.find((s) => s.type === 'pie' && s.centerText);
 			if (pieSeriesWithCenterText?.centerText) {
-				// @ts-expect-error - ECharts types are not available
-				pieOptions.graphic = {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				(pieOptions as any).graphic = {
 					elements: [
 						{
 							type: 'text',
@@ -463,8 +451,8 @@
 						show: false
 					},
 					axisLabel: {
-						// @ts-expect-error - ECharts types are not available
-						formatter: (value) => formatValue(value, axis.format, axis.unit)
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						formatter: (value: any) => formatValue(value, axis.format, axis.unit)
 					},
 					splitLine: {
 						show: index === 0 ? grid.horizontal || true : false
@@ -502,11 +490,11 @@
 	}
 
 	onMount(() => {
-		// @ts-expect-error - ECharts types are not available
 		chart = echarts.init(chartContainer, theme);
 
 		// Instantly triggering resizes disables animation, hence the timeout
-		setTimeout(() => {
+		resizeTimeoutId = setTimeout(() => {
+			if (!chartContainer) return;
 			resizeObserver = new ResizeObserver(() => {
 				chart?.resize();
 			});
@@ -514,8 +502,7 @@
 		}, AnimationDuration);
 
 		updateChart();
-		// @ts-expect-error - ECharts types are not available
-		chart.on('click', (params) => {
+		chart.on('click', (params: echarts.ECElementEvent) => {
 			if (onpointclick) {
 				onpointclick({
 					detail: {
@@ -538,6 +525,7 @@
 	});
 
 	onDestroy(() => {
+		clearTimeout(resizeTimeoutId);
 		resizeObserver?.disconnect();
 		chart?.dispose();
 	});