@makolabs/ripple 1.2.3 → 1.2.8

package/dist/ai/ComposeDropdown.svelte

@@ -2,7 +2,6 @@
 	import { tv } from 'tailwind-variants';
 	import Toggle from '../forms/Toggle.svelte';
 	import { Size } from '../variants.js';
-	import type { VariantColors } from '../index.js';
 
 	interface ComposeDropdownProps {
 		disabled?: boolean;
@@ -33,7 +32,8 @@
 		variants: {
 			state: {
 				disabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
-				enabled: 'bg-gray-200 text-gray-600 hover:bg-gray-300 hover:text-gray-800 focus:ring-2 focus:ring-gray-300/50'
+				enabled:
+					'bg-gray-200 text-gray-600 hover:bg-gray-300 hover:text-gray-800 focus:ring-2 focus:ring-gray-300/50'
 			}
 		}
 	});
@@ -119,20 +119,23 @@
 			width="0.7em"
 			height="0.7em"
 			viewBox="0 0 20 20"
-			class="w-5 h-5"
+			class="h-5 w-5"
 		>
-			<path fill="currentColor" d="M10 2.25a.75.75 0 0 1 .75.75v6.25H17a.75.75 0 0 1 0 1.5h-6.25V17a.75.75 0 0 1-1.5 0v-6.25H3a.75.75 0 0 1 0-1.5h6.25V3a.75.75 0 0 1 .75-.75"/>
+			<path
+				fill="currentColor"
+				d="M10 2.25a.75.75 0 0 1 .75.75v6.25H17a.75.75 0 0 1 0 1.5h-6.25V17a.75.75 0 0 1-1.5 0v-6.25H3a.75.75 0 0 1 0-1.5h6.25V3a.75.75 0 0 1 .75-.75"
+			/>
 		</svg>
 	</button>
 
 	<!-- Dropdown Menu -->
 	<div class={dropdownClasses}>
 		<!-- Models Section -->
-		<div class="px-4 py-2 border-b border-gray-100">
-			<h3 class="text-xs font-medium text-gray-500 uppercase tracking-wide">Models</h3>
+		<div class="border-b border-gray-100 px-4 py-2">
+			<h3 class="text-xs font-medium tracking-wide text-gray-500 uppercase">Models</h3>
 		</div>
-		
-		{#each models as model}
+
+		{#each models as model (model.name)}
 			<div class={menuItem({ state: 'disabled', layout: 'default' })}>
 				<div class="flex flex-col">
 					<span class="font-medium">{model.name}</span>
@@ -143,20 +146,20 @@
 		{/each}
 
 		<!-- Divider -->
-		<div class="border-t border-gray-100 my-2"></div>
+		<div class="my-2 border-t border-gray-100"></div>
 
 		<!-- Thinking Mode Option -->
-		<div class="px-4 py-2 border-b border-gray-100">
-			<h3 class="text-xs font-medium text-gray-500 uppercase tracking-wide">Options</h3>
+		<div class="border-b border-gray-100 px-4 py-2">
+			<h3 class="text-xs font-medium tracking-wide text-gray-500 uppercase">Options</h3>
 		</div>
-		
+
 		<div class={menuItem({ state: 'enabled', layout: 'full' }) + ' w-full cursor-pointer'}>
-			<div class="flex items-center justify-between w-full">
+			<div class="flex w-full items-center justify-between">
 				<div class="flex flex-col items-start">
 					<span class="font-medium">Thinking Mode</span>
 					<span class="text-xs text-gray-500">Show reasoning process</span>
 				</div>
-				<div class="flex items-center ml-4">
+				<div class="ml-4 flex items-center">
 					<Toggle
 						name="thinking-mode"
 						bind:value={thinkingMode}

package/dist/ai/MermaidRenderer.svelte

@@ -4,10 +4,9 @@
 
 	interface Props {
 		diagram: string;
-		class?: string;
 	}
 
-	let { diagram, class: className = '' }: Props = $props();
+	let { diagram }: Props = $props();
 
 	// Mermaid configuration with multiple node colors like your image
 	const config: MermaidConfig = {
@@ -17,30 +16,30 @@
 			background: '#ffffff',
 			fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
 			fontSize: '14px',
-			
+
 			// Default node styling
 			primaryColor: '#E8F4FD',
 			primaryTextColor: '#2C3E50',
 			primaryBorderColor: '#B8D4F0',
-			
+
 			// Lines and connections
 			lineColor: '#7F8C8D',
 			textColor: '#2C3E50',
 			defaultLinkColor: '#7F8C8D',
 			edgeLabelBackground: '#ffffff',
-			
+
 			// Color scale for different node types (matching your image)
-			cScale0: '#E8F4FD',  // Light blue - Frontend code, Tauri build
-			cScale1: '#E8F5E8',  // Light green - Bundler, App binary
-			cScale2: '#FFF2E8',  // Light orange - Dist assets
-			cScale3: '#F0E8FF',  // Light purple - Rust code
-			cScale4: '#FFFDE8',  // Light yellow - Installer
-			cScale5: '#F8F8F8',  // Light gray - fallback
-			cScale6: '#E0E0E0',  // Medium gray - borders
-			cScale7: '#2C3E50',  // Dark text
-			cScale8: '#7F8C8D',  // Line color
-			cScale9: '#FFFFFF',  // White background
-			
+			cScale0: '#E8F4FD', // Light blue - Frontend code, Tauri build
+			cScale1: '#E8F5E8', // Light green - Bundler, App binary
+			cScale2: '#FFF2E8', // Light orange - Dist assets
+			cScale3: '#F0E8FF', // Light purple - Rust code
+			cScale4: '#FFFDE8', // Light yellow - Installer
+			cScale5: '#F8F8F8', // Light gray - fallback
+			cScale6: '#E0E0E0', // Medium gray - borders
+			cScale7: '#2C3E50', // Dark text
+			cScale8: '#7F8C8D', // Line color
+			cScale9: '#FFFFFF', // White background
+
 			// Node styling
 			nodeBorder: '#B8D4F0',
 			nodeTextColor: '#2C3E50'
@@ -70,7 +69,12 @@
 			<div class="rounded-lg border border-red-200 bg-red-50 p-4">
 				<div class="flex items-center gap-2 text-red-800">
 					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
 					</svg>
 					<span class="font-medium">Failed to render Mermaid diagram</span>
 				</div>

package/dist/ai/MermaidRenderer.svelte.d.ts

@@ -1,6 +1,5 @@
 interface Props {
     diagram: string;
-    class?: string;
 }
 declare const MermaidRenderer: import("svelte").Component<Props, {}, "">;
 type MermaidRenderer = ReturnType<typeof MermaidRenderer>;

package/dist/ai/MessageBox.svelte

@@ -132,26 +132,29 @@
 			{content}
 		{:else}
 			<!-- Enhanced rendering for AI messages with Mermaid and code highlighting -->
-			{#each contentSegments as segment}
+			{#each contentSegments as segment, idx (idx)}
 				{#if segment.type === 'mermaid'}
 					<MermaidRenderer diagram={segment.content} />
 				{:else if segment.type === 'code'}
-					<CodeRenderer 
-						code={segment.content} 
-						language={segment.language ?? 'text'} 
-					/>
+					<CodeRenderer code={segment.content} language={segment.language ?? 'text'} />
 				{:else if segment.type === 'text'}
 					<!-- Regular markdown content -->
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					{@html renderMarkdown(segment.content)}
 				{/if}
 			{/each}
 		{/if}
 	</div>
 
-	<div class="flex flex-row items-center gap-2 justify-between">
+	<div class="flex flex-row items-center justify-between gap-2">
 		<!-- Timestamp below message bubble -->
 		{#if timestamp}
-			<div class={cn('mt-1 text-xs text-gray-500', isUser ? 'text-right ml-auto' : 'text-left mr-auto')}>
+			<div
+				class={cn(
+					'mt-1 text-xs text-gray-500',
+					isUser ? 'ml-auto text-right' : 'mr-auto text-left'
+				)}
+			>
 				{formatTime(timestamp)}
 			</div>
 		{/if}

package/dist/ai/ThinkingDisplay.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { tv } from 'tailwind-variants';
-	import { onMount } from 'svelte';
 
 	interface ThinkingDisplayProps {
 		content: string;
@@ -18,15 +17,15 @@
 
 	let isExpanded = $state(false);
 	let containerRef: HTMLDivElement | undefined = $state();
-	
+
 	// Parse thinking content into structured steps
 	const parsedSteps = $derived.by(() => {
 		if (!content) return [];
-		
+
 		// Split content by markdown headers or double asterisks
 		const sections = content.split(/\*\*([^*]+)\*\*/g);
 		const steps = [];
-		
+
 		// When split by regex with capture groups, we get: [text, title, text, title, ...]
 		for (let i = 0; i < sections.length; i++) {
 			if (i % 2 === 0) {
@@ -55,7 +54,7 @@
 				}
 			}
 		}
-		
+
 		// If no structured content found, treat as single step
 		if (steps.length === 0 && content.trim()) {
 			steps.push({
@@ -64,14 +63,14 @@
 				isComplete: isComplete
 			});
 		}
-		
+
 		return steps;
 	});
 
 	// Find the longest/most descriptive title for collapsed view
 	const bestTitle = $derived.by(() => {
 		if (parsedSteps.length === 0) return 'Reasoning Complete';
-		
+
 		// Find the step with the longest title (most descriptive)
 		let longest = parsedSteps[0];
 		for (const step of parsedSteps) {
@@ -79,7 +78,7 @@
 				longest = step;
 			}
 		}
-		
+
 		return longest.title;
 	});
 
@@ -154,17 +153,16 @@
 	// 		}, 300);
 	// 	}
 	// });
-
 </script>
 
 {#if isVisible && content}
 	<div bind:this={containerRef} class={`${containerClasses} ${className}`}>
 		<!-- Header -->
-		<div 
-			class={headerClasses} 
-			onclick={toggleExpanded} 
-			onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggleExpanded() : null}
-			role="button" 
+		<div
+			class={headerClasses}
+			onclick={toggleExpanded}
+			onkeydown={(e) => (e.key === 'Enter' || e.key === ' ' ? toggleExpanded() : null)}
+			role="button"
 			tabindex="0"
 		>
 			<div class="flex items-center gap-2">
@@ -173,30 +171,49 @@
 					{#if !isComplete}
 						<!-- Animated thinking dots -->
 						<div class="flex items-center gap-1">
-							<div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></div>
-							<div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
-							<div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
+							<div class="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500"></div>
+							<div
+								class="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500"
+								style="animation-delay: 0.2s"
+							></div>
+							<div
+								class="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500"
+								style="animation-delay: 0.4s"
+							></div>
 						</div>
 					{:else}
 						<!-- Completed icon -->
-						<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-500" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 1 1 7.072 0l-.548.547A3.37 3.37 0 0 0 14 18.469V19a2 2 0 1 1-4 0v-.531c0-.895-.356-1.754-.988-2.386z"/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4 text-gray-500"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 1 1 7.072 0l-.548.547A3.37 3.37 0 0 0 14 18.469V19a2 2 0 1 1-4 0v-.531c0-.895-.356-1.754-.988-2.386z"
+							/>
 						</svg>
 					{/if}
-					<span class="font-medium text-sm">
+					<span class="text-sm font-medium">
 						{isComplete ? bestTitle : 'Thinking...'}
 					</span>
 				</div>
 			</div>
-			
+
 			<!-- Expand/Collapse Icon -->
-			<svg 
-				class={`w-4 h-4 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} 
-				fill="none" 
-				stroke="currentColor" 
+			<svg
+				class={`h-4 w-4 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+				fill="none"
+				stroke="currentColor"
 				viewBox="0 0 24 24"
 			>
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
 			</svg>
 		</div>
 
@@ -205,51 +222,58 @@
 			<div class={contentClasses}>
 				<!-- Timeline Container -->
 				<div class="relative">
-					{#each parsedSteps as step, index}
+					{#each parsedSteps as step, index (index)}
 						<div class="relative flex">
 							<!-- Timeline Line and Icon -->
-							<div class="flex flex-col items-center mr-4">
+							<div class="mr-4 flex flex-col items-center">
 								<!-- Timeline Icon -->
-								<div class="flex items-center justify-center w-5 h-5 shrink-0 rounded-full bg-white border border-gray-300 z-10">
+								<div
+									class="z-10 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white"
+								>
 									{#if step.isComplete && index === parsedSteps.length - 1}
 										<!-- Checkmark only for the last completed step -->
-										<svg class="w-3 h-3 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
-											<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+										<svg class="h-3 w-3 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+											<path
+												fill-rule="evenodd"
+												d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+												clip-rule="evenodd"
+											/>
 										</svg>
 									{:else if step.isComplete}
 										<!-- Simple filled circle for other completed steps -->
-										<div class="w-2.5 h-2.5 bg-gray-500 rounded-full"></div>
+										<div class="h-2.5 w-2.5 rounded-full bg-gray-500"></div>
 									{:else}
 										<!-- Pulsing dot for in-progress step -->
-										<div class="w-2.5 h-2.5 bg-gray-400 rounded-full animate-pulse"></div>
+										<div class="h-2.5 w-2.5 animate-pulse rounded-full bg-gray-400"></div>
 									{/if}
 								</div>
-								
+
 								<!-- Vertical Line (except for last item) -->
 								{#if index < parsedSteps.length - 1}
-									<div class="w-0.5 h-full min-h-8 bg-gray-200 mt-1"></div>
+									<div class="mt-1 h-full min-h-8 w-0.5 bg-gray-200"></div>
 								{/if}
 							</div>
-							
+
 							<!-- Step Content -->
 							<div class="flex-1 pb-6 last:pb-0">
 								<!-- Step Title -->
 								<div class="mb-2">
-									<h4 class="font-medium text-sm text-gray-800 leading-tight">
+									<h4 class="text-sm leading-tight font-medium text-gray-800">
 										{step.title}
 									</h4>
 								</div>
-								
+
 								<!-- Step Description -->
-								<div class="text-sm text-gray-600 leading-relaxed">
+								<div class="text-sm leading-relaxed text-gray-600">
 									{#if step.content.includes('•') || step.content.includes('-')}
 										<!-- Parse bullet points -->
 										<ul class="space-y-1">
-											{#each step.content.split('\n') as line}
+											{#each step.content.split('\n') as line, lineIdx (lineIdx)}
 												{@const trimmedLine = line.trim()}
 												{#if trimmedLine.startsWith('•') || trimmedLine.startsWith('-')}
 													<li class="flex items-start">
-														<span class="w-1 h-1 bg-gray-400 rounded-full mt-2 mr-2 flex-shrink-0"></span>
+														<span class="mt-2 mr-2 h-1 w-1 flex-shrink-0 rounded-full bg-gray-400"
+														></span>
 														<span>{trimmedLine.substring(1).trim()}</span>
 													</li>
 												{:else if trimmedLine && !trimmedLine.startsWith('•') && !trimmedLine.startsWith('-')}
@@ -260,9 +284,9 @@
 									{:else}
 										<p class="whitespace-pre-wrap">{step.content}</p>
 									{/if}
-									
+
 									{#if !step.isComplete && index === parsedSteps.length - 1}
-										<span class="inline-block w-0.5 h-4 bg-blue-500 animate-pulse ml-1"></span>
+										<span class="ml-1 inline-block h-4 w-0.5 animate-pulse bg-blue-500"></span>
 									{/if}
 								</div>
 							</div>

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

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

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

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color } from '../variants.js';
 export const aiChatInterface = tv({
     slots: {
         userMessage: 'max-w-[70%] ml-auto px-4 py-3 rounded-3xl text-sm leading-relaxed shadow-lg',
@@ -8,37 +9,37 @@ export const aiChatInterface = tv({
     },
     variants: {
         color: {
-            default: {
+            [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: {
+            [Color.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: {
+            [Color.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: {
+            [Color.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: {
+            [Color.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: {
+            [Color.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: {
+            [Color.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'

package/dist/ai/content-detector.js

@@ -78,8 +78,8 @@ export function parseContentSegments(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' }))
+        ...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) {

package/dist/button/ButtonTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import type { ButtonProps } from '../index.js';
+
+	let { text = '', ...buttonProps }: ButtonProps & { text?: string } = $props();
+</script>
+
+<Button {...buttonProps}>
+	{text}
+</Button>

package/dist/button/ButtonTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from '../index.js';
+type $$ComponentProps = ButtonProps & {
+    text?: string;
+};
+declare const ButtonTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonTestWrapper = ReturnType<typeof ButtonTestWrapper>;
+export default ButtonTestWrapper;