@makolabs/ripple 2.5.2 → 2.5.3

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

@@ -7,10 +7,15 @@ export declare class S3Adapter extends BaseAdapter {
     private basePath;
     private bucket;
     private fileExtensions;
+    private displayNameStripPattern;
+    /** Default pattern strips common compression extensions (.gz, .bz2, .zip, .zst, .xz, .lz4). */
+    private static DEFAULT_STRIP_PATTERN;
     constructor(basePathOrOptions?: string | {
         basePath?: string;
         bucket?: string;
         fileExtensions?: string[];
+        /** Regex applied to the filename to produce displayNameKey. @default strips .gz/.bz2/.zip/.zst/.xz/.lz4 */
+        displayNameStripPattern?: RegExp;
     }, publicS3BasePath?: string);
     getName(): string;
     isConfigured(): Promise<boolean>;

package/dist/adapters/storage/S3Adapter.js

@@ -6,15 +6,21 @@ export class S3Adapter extends BaseAdapter {
     basePath;
     bucket;
     fileExtensions;
+    displayNameStripPattern;
+    /** Default pattern strips common compression extensions (.gz, .bz2, .zip, .zst, .xz, .lz4). */
+    static DEFAULT_STRIP_PATTERN = /\.(gz|bz2|zip|zst|xz|lz4)$/i;
     constructor(basePathOrOptions, publicS3BasePath) {
         super();
         if (typeof basePathOrOptions === 'object' && basePathOrOptions !== null) {
             this.basePath = basePathOrOptions.basePath || '/';
             this.bucket = basePathOrOptions.bucket;
             this.fileExtensions = basePathOrOptions.fileExtensions;
+            this.displayNameStripPattern =
+                basePathOrOptions.displayNameStripPattern ?? S3Adapter.DEFAULT_STRIP_PATTERN;
         }
         else {
             this.basePath = basePathOrOptions || publicS3BasePath || '/';
+            this.displayNameStripPattern = S3Adapter.DEFAULT_STRIP_PATTERN;
         }
     }
     getName() {
@@ -98,13 +104,17 @@ export class S3Adapter extends BaseAdapter {
                 }
                 return true;
             })
-                .map((file) => ({
-                key: file.key,
-                name: this.removeFileExtensions(file.key.slice(normalizedPath.length)),
-                lastModified: new Date(file.lastModified),
-                size: file.size,
-                isFolder: false
-            }));
+                .map((file) => {
+                const filename = file.key.slice(normalizedPath.length);
+                return {
+                    key: file.key,
+                    name: this.removeFileExtensions(filename),
+                    displayNameKey: filename.replace(this.displayNameStripPattern, ''),
+                    lastModified: new Date(file.lastModified),
+                    size: file.size,
+                    isFolder: false
+                };
+            });
             // Combine folders and files
             const files = [...folders, ...fileItems];
             // Sort by lastModified in reverse order (newest first), but keep folders first

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

@@ -4,6 +4,8 @@
 export interface FileItem {
     key: string;
     name: string;
+    /** Name with compression/archive suffixes stripped, for deduplication and display matching. */
+    displayNameKey?: string;
     lastModified: Date;
     createdAt?: Date;
     size: number;

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

@@ -38,6 +38,10 @@ export interface FileBrowserProps {
     selectedFiles?: string[];
     /** Controls whether the select-all checkbox selects the current page or all data. @default 'page' */
     selectAllScope?: 'page' | 'all';
+    /** Tailwind height class for the browser container. @default 'h-[500px]' */
+    height?: string;
+    /** Additional CSS classes for the outer container. */
+    class?: string;
     infoSection?: (props: {
         selectedFiles: string[];
         navToFileFolder: (fileKey: string) => void;

package/dist/file-browser/FileBrowser.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { cn } from '../helper/cls.js';
 	import { Button, Table, Color, Size } from '../index.js';
 	import type { TableColumn, FileBrowserProps } from '../index.js';
 	import { formatDate } from '../utils/dateUtils.js';
@@ -17,6 +18,8 @@
 		actions = [],
 		infoSection,
 		selectAllScope = 'page',
+		height = 'h-[500px]',
+		class: className = '',
 		selectedFiles = $bindable([])
 	}: FileBrowserProps = $props();
 
@@ -687,8 +690,14 @@
 	<span class="text-default-600">{formatDate(file.lastModified, 'DD.MM.YYYY HH:mm')}</span>
 {/snippet}
 
-<div class="relative flex h-[calc(100vh-100px)] px-0">
-	<div class="min-w-0 flex-1">
+<div
+	class={cn(
+		'border-default-200 relative flex overflow-hidden rounded-lg border bg-white',
+		height,
+		className
+	)}
+>
+	<div class="flex min-w-0 flex-1 flex-col">
 		{#if !isAuthenticated && adapter.authenticate}
 			<div class="flex h-full flex-col items-center justify-center">
 				<div class="mb-4 text-center text-lg">
@@ -698,7 +707,7 @@
 			</div>
 		{:else}
 			<div
-				class="border-default-100 mb-2 flex flex-wrap items-center justify-between border-b pb-3"
+				class="border-default-100 flex flex-wrap items-center justify-between border-b px-4 py-3"
 			>
 				<div class="flex flex-wrap items-center">
 					{#if breadcrumbs.length > 1}
@@ -815,40 +824,42 @@
 				</div>
 			</div>
 
-			{#if isLoading}
-				<div class="flex h-full items-center justify-center">
-					<div class="text-default-500">Loading files...</div>
-				</div>
-			{:else if error}
-				<div class="flex h-full flex-col items-center justify-center">
-					<div class="text-danger-500 mb-4">{error}</div>
-					<Button color={Color.PRIMARY} onclick={() => listFiles(currentPath)}>Retry</Button>
-				</div>
-			{:else if files.length === 0}
-				<div class="flex h-full items-center justify-center">
-					<div class="text-default-500">No files found in this directory</div>
-				</div>
-			{:else}
-				<Table
-					{columns}
-					data={displayFiles}
-					loading={isLoading}
-					bordered={false}
-					onrowclick={handleRowClick}
-					rowclass={(row) => {
-						let classes = row.isFolder ? 'hover:bg-amber-50 cursor-pointer' : 'hover:bg-blue-50';
-						if (isRowSelected(row)) {
-							classes += ' bg-primary-50';
-						}
-						return classes;
-					}}
-					onsort={handleSort}
-					selectable={true}
-					{selectAllScope}
-					{onselect}
-					{selected}
-				/>
-			{/if}
+			<div class="min-h-0 flex-1 overflow-auto">
+				{#if isLoading}
+					<div class="flex h-full items-center justify-center py-16">
+						<div class="text-default-500">Loading files...</div>
+					</div>
+				{:else if error}
+					<div class="flex h-full flex-col items-center justify-center py-16">
+						<div class="text-danger-500 mb-4">{error}</div>
+						<Button color={Color.PRIMARY} onclick={() => listFiles(currentPath)}>Retry</Button>
+					</div>
+				{:else if files.length === 0}
+					<div class="flex h-full items-center justify-center py-16">
+						<div class="text-default-500">No files found in this directory</div>
+					</div>
+				{:else}
+					<Table
+						{columns}
+						data={displayFiles}
+						loading={isLoading}
+						bordered={false}
+						onrowclick={handleRowClick}
+						rowclass={(row) => {
+							let classes = row.isFolder ? 'hover:bg-amber-50 cursor-pointer' : 'hover:bg-blue-50';
+							if (isRowSelected(row)) {
+								classes += ' bg-primary-50';
+							}
+							return classes;
+						}}
+						onsort={handleSort}
+						selectable={true}
+						{selectAllScope}
+						{onselect}
+						{selected}
+					/>
+				{/if}
+			</div>
 		{/if}
 	</div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "2.5.2",
+	"version": "2.5.3",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {