@makolabs/ripple 2.5.3 → 2.5.9

package/dist/adapters/storage/S3Adapter.js

@@ -55,8 +55,10 @@ export class S3Adapter extends BaseAdapter {
     }
     async list(path, searchQuery) {
         try {
+            // Use basePath when no path is provided
+            const effectivePath = path || this.basePath;
             // Ensure path ends with a forward slash
-            const normalizedPath = path.endsWith('/') ? path : path + '/';
+            const normalizedPath = effectivePath.endsWith('/') ? effectivePath : effectivePath + '/';
             // Build API URL including search term and bucket if provided
             let apiUrl = `/api/s3/list?prefix=${encodeURIComponent(normalizedPath)}`;
             if (searchQuery) {

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

@@ -13,6 +13,12 @@ export interface FileItem {
     id?: string;
     mimeType?: string;
     parentId?: string;
+    /** Current status of this file in an upload/import flow. */
+    status?: 'ready' | 'uploading' | 'success' | 'error';
+    /** Upload/import progress (0-100). */
+    progress?: number;
+    /** Error message when status is 'error'. */
+    error?: string;
 }
 export interface FileActionSingle {
     label: (file: FileItem) => string;

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

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import type { FileAction, StorageAdapter } from '../adapters/storage/types.js';
+import type { FileAction, FileItem, StorageAdapter } from '../adapters/storage/types.js';
 export type ChatMessageType = 'chat' | 'action' | 'thinking';
 export type StreamingCallback = (response: ChatResponse) => void;
 export interface ChatAction {
@@ -35,6 +35,19 @@ export interface FileBrowserProps {
     adapter: StorageAdapter;
     startPath?: string;
     actions?: FileAction[];
+    /**
+     * Bindable list of selected files as full FileItem objects. Consumers
+     * update `selectedItems[i].status` / `.progress` / `.error` to drive the
+     * per-row status icons and inline status summary.
+     *
+     * Mirrors FileUpload's `files: StagedFile[]` pattern — one unified array
+     * for file identity and upload state.
+     */
+    selectedItems?: FileItem[];
+    /**
+     * Bindable array of selected file keys. Kept for read access / simple
+     * use cases; for status tracking use `selectedItems` instead.
+     */
     selectedFiles?: string[];
     /** Controls whether the select-all checkbox selects the current page or all data. @default 'page' */
     selectAllScope?: 'page' | 'all';
@@ -42,8 +55,13 @@ export interface FileBrowserProps {
     height?: string;
     /** Additional CSS classes for the outer container. */
     class?: string;
+    /**
+     * Custom sidebar snippet. When omitted, the FileBrowser renders a default
+     * sidebar with Clear All, batch action buttons, and per-file status icons.
+     */
     infoSection?: (props: {
         selectedFiles: string[];
+        files: FileItem[];
         navToFileFolder: (fileKey: string) => void;
     }) => any;
     testId?: string;

package/dist/file-browser/FileBrowser.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { cn } from '../helper/cls.js';
-	import { Button, Table, Color, Size } from '../index.js';
+	import { Button, Table, Color, Size, Spinner } from '../index.js';
 	import type { TableColumn, FileBrowserProps } from '../index.js';
 	import { formatDate } from '../utils/dateUtils.js';
 	import type {
@@ -20,7 +20,8 @@
 		selectAllScope = 'page',
 		height = 'h-[500px]',
 		class: className = '',
-		selectedFiles = $bindable([])
+		selectedItems = $bindable<FileItem[]>([]),
+		selectedFiles = $bindable<string[]>([])
 	}: FileBrowserProps = $props();
 
 	let files = $state<FileItem[]>([]);
@@ -396,6 +397,72 @@
 	let selected = $state<FileItem[]>([]);
 
 	// Derived: all files to import (not folders), including recursively fetched
+	// Sync selectedItems from selectedFiles + fileQueue. Excludes folders
+	// (folders are navigation targets, not files to act on — their contents
+	// get expanded into fileQueue by handleSelectFolder).
+	// Preserves existing FileItem refs so consumer mutations
+	// (e.g., selectedItems[i].status = 'uploading') persist across re-syncs.
+	$effect(() => {
+		// Candidate file keys: selected non-folder files + files from expanded folders
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const candidateKeys = new Set<string>();
+		for (const key of selectedFiles) {
+			const item = displayFiles.find((f) => f.key === key);
+			if (item && !item.isFolder) candidateKeys.add(key);
+		}
+		for (const item of fileQueue) {
+			if (!item.isFolder) candidateKeys.add(item.key);
+		}
+
+		const existingKeys = new Set(selectedItems.map((f) => f.key));
+
+		const needsSync =
+			selectedItems.some((f) => !candidateKeys.has(f.key)) ||
+			[...candidateKeys].some((k) => !existingKeys.has(k));
+
+		if (!needsSync) return;
+
+		const kept = selectedItems.filter((f) => candidateKeys.has(f.key));
+		const added: FileItem[] = [];
+		for (const key of candidateKeys) {
+			if (!existingKeys.has(key)) {
+				const found =
+					displayFiles.find((f) => f.key === key) || fileQueue.find((f) => f.key === key);
+				if (found && !found.isFolder) {
+					added.push({ ...found, status: found.status ?? 'ready' });
+				}
+			}
+		}
+
+		selectedItems = [...kept, ...added];
+	});
+
+	// Status tally from selectedItems.
+	const statusCounts = $derived.by(() => {
+		let uploading = 0;
+		let success = 0;
+		let error = 0;
+		for (const item of selectedItems) {
+			if (item.status === 'uploading') uploading++;
+			else if (item.status === 'success') success++;
+			else if (item.status === 'error') error++;
+		}
+		return { uploading, success, error };
+	});
+	const hasUploadActivity = $derived(
+		statusCounts.uploading > 0 || statusCounts.success > 0 || statusCounts.error > 0
+	);
+
+	// Auto-clear fileQueue and processedFolders when selectedFiles is emptied
+	// from outside (e.g., parent clicks "Clear All" in infoSection).
+	$effect(() => {
+		if (selectedFiles.length === 0 && fileQueue.length > 0) {
+			fileQueue = [];
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			processedFolders = new Set();
+		}
+	});
+
 	const allFilesAcquired = $derived.by(() => {
 		const selectedFileKeys = new Set(selectedFiles);
 
@@ -706,10 +773,8 @@
 				<Button color={Color.PRIMARY} onclick={authenticate}>Authenticate</Button>
 			</div>
 		{:else}
-			<div
-				class="border-default-100 flex flex-wrap items-center justify-between border-b px-4 py-3"
-			>
-				<div class="flex flex-wrap items-center">
+			<div class="border-default-100 flex items-center gap-3 border-b px-4 py-3">
+				<div class="flex min-w-0 flex-1 items-center">
 					{#if breadcrumbs.length > 1}
 						<button
 							class="text-default-600 hover:bg-default-100 mr-1 rounded-full px-2 py-1"
@@ -735,31 +800,55 @@
 					{/if}
 					<span class="text-default-400 mx-1 text-sm">/</span>
 
-					<div class="flex flex-wrap items-center">
+					<div
+						class="flex min-w-0 flex-1 items-center overflow-hidden"
+						title={breadcrumbs.map((b) => b.name).join(' / ')}
+					>
 						{#each breadcrumbs as crumb, i (crumb.path)}
 							{#if i > 0}
-								<span class="text-default-400 mx-1 text-sm">/</span>
+								<span class="text-default-400 mx-1 shrink-0 text-sm">/</span>
 							{/if}
 
 							{#if crumb.clickable && !crumb.current}
 								<button
-									class="text-default-600 hover:bg-default-100 hover:text-default-900 cursor-pointer border-0 bg-transparent px-1 py-0 text-sm"
+									class="text-default-600 hover:bg-default-100 hover:text-default-900 max-w-[200px] cursor-pointer truncate border-0 bg-transparent px-1 py-0 text-sm"
 									onclick={() => navigateToFolder(crumb.path)}
 								>
 									{crumb.name}
 								</button>
 							{:else}
 								<span
-									class={`px-1 text-sm ${crumb.current ? 'text-default-800 font-semibold' : 'text-default-600'}`}
+									class={`max-w-[240px] truncate px-1 text-sm ${crumb.current ? 'text-default-800 font-semibold' : 'text-default-600'}`}
 								>
 									{crumb.name}
 								</span>
 							{/if}
 						{/each}
 					</div>
+
+					{#if selectedFiles.length > 0 && hasUploadActivity}
+						<div
+							class="text-default-500 ml-3 flex shrink-0 items-center gap-1.5 border-l pl-3 text-xs whitespace-nowrap"
+							data-filebrowser-summary=""
+						>
+							{#if statusCounts.success > 0}
+								<span class="text-success-600 font-medium">{statusCounts.success} uploaded</span>
+							{/if}
+							{#if statusCounts.error > 0}
+								{#if statusCounts.success > 0}<span class="text-default-300">·</span>{/if}
+								<span class="text-danger-600 font-medium">{statusCounts.error} failed</span>
+							{/if}
+							{#if statusCounts.uploading > 0}
+								{#if statusCounts.success > 0 || statusCounts.error > 0}<span
+										class="text-default-300">·</span
+									>{/if}
+								<span class="text-primary-600 font-medium">{statusCounts.uploading} uploading</span>
+							{/if}
+						</div>
+					{/if}
 				</div>
 
-				<div class="flex items-center gap-1">
+				<div class="flex shrink-0 items-center gap-1">
 					{#if isFetchingRecursively}
 						<div
 							class="flex items-center gap-2 rounded border border-amber-200 bg-amber-50 px-3 py-1 text-xs"
@@ -866,7 +955,125 @@
 	{#if infoSection}
 		{@render infoSection({
 			selectedFiles: allFilesAcquired.map((file) => file.key),
+			files: selectedItems,
 			navToFileFolder
 		})}
+	{:else if selectedItems.length > 0}
+		{@render defaultInfoSection()}
 	{/if}
 </div>
+
+{#snippet defaultInfoSection()}
+	<div class="border-default-200 bg-default-50/50 flex w-72 min-w-72 shrink-0 flex-col border-l">
+		<div class="border-default-100 flex flex-col gap-2 border-b px-4 py-3">
+			<h3 class="text-default-900 text-sm font-semibold">
+				Selected ({selectedItems.length})
+			</h3>
+			<div class="flex gap-2">
+				<Button
+					size={Size.XS}
+					variant="outline"
+					color={Color.DEFAULT}
+					onclick={() => {
+						selectedFiles = [];
+						selectedItems = [];
+					}}
+					disabled={statusCounts.uploading > 0}
+					class="whitespace-nowrap"
+				>
+					Clear All
+				</Button>
+				{#each batchActions as action (action.label)}
+					<Button
+						size={Size.XS}
+						color={Color.PRIMARY}
+						onclick={() => action.batchAction?.(allFilesAcquired)}
+						disabled={!action.isAllowed(allFilesAcquired)}
+						class="whitespace-nowrap"
+					>
+						{action.label(allFilesAcquired)}
+					</Button>
+				{/each}
+			</div>
+		</div>
+
+		<ul class="divide-default-100 min-h-0 flex-1 divide-y overflow-y-auto">
+			{#each selectedItems as item (item.key)}
+				{@const status = item.status ?? 'ready'}
+				<li
+					class={cn(
+						'flex items-center gap-2 px-3 py-2 text-xs',
+						status === 'success' && 'opacity-60'
+					)}
+					data-filebrowser-selected-row=""
+					data-status={status}
+				>
+					{#if status === 'uploading'}
+						<div class="flex size-5 shrink-0 items-center justify-center">
+							<Spinner size={Size.XS} color={Color.PRIMARY} />
+						</div>
+					{:else if status === 'success'}
+						<span
+							class="bg-success-100 text-success-600 flex size-5 shrink-0 items-center justify-center rounded-full"
+							aria-hidden="true"
+						>
+							<svg class="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="3"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+						</span>
+					{:else if status === 'error'}
+						<span
+							class="bg-danger-100 text-danger-600 flex size-5 shrink-0 items-center justify-center rounded-full"
+							aria-hidden="true"
+						>
+							<svg class="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="3"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						</span>
+					{:else}
+						<span class="border-default-300 size-5 shrink-0 rounded-full border" aria-hidden="true"
+						></span>
+					{/if}
+					<div class="flex min-w-0 flex-1 flex-col">
+						<span class="text-default-900 truncate font-medium" title={item.key}>
+							{item.name}
+						</span>
+						{#if item.error}
+							<span class="text-danger-600 truncate text-[11px]">{item.error}</span>
+						{/if}
+					</div>
+					{#if status !== 'uploading' && status !== 'success'}
+						<button
+							type="button"
+							onclick={() => {
+								selectedFiles = selectedFiles.filter((k) => k !== item.key);
+							}}
+							class="text-default-400 hover:bg-default-100 hover:text-danger-500 shrink-0 cursor-pointer rounded p-1"
+							aria-label="Remove {item.name}"
+							title="Remove"
+						>
+							<svg class="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						</button>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/snippet}

package/dist/file-browser/FileBrowser.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { FileBrowserProps } from '../index.js';
-declare const FileBrowser: import("svelte").Component<FileBrowserProps, {}, "selectedFiles">;
+declare const FileBrowser: import("svelte").Component<FileBrowserProps, {}, "selectedItems" | "selectedFiles">;
 type FileBrowser = ReturnType<typeof FileBrowser>;
 export default FileBrowser;

package/dist/funcs/user-management.remote.d.ts

@@ -1,5 +1,5 @@
 import type { User, GetUsersOptions, GetUsersResult } from '../index.js';
-export declare const getUsers: import("@sveltejs/kit").RemoteQueryFunction<GetUsersOptions, GetUsersResult>;
+export declare const getUsers: import("@sveltejs/kit").RemoteCommand<GetUsersOptions, Promise<GetUsersResult>>;
 export declare const createUser: import("@sveltejs/kit").RemoteCommand<Partial<User>, Promise<User>>;
 export declare const updateUser: import("@sveltejs/kit").RemoteCommand<{
     userId: string;
@@ -7,7 +7,7 @@ export declare const updateUser: import("@sveltejs/kit").RemoteCommand<{
 }, Promise<User>>;
 export declare const deleteUser: import("@sveltejs/kit").RemoteCommand<string, Promise<void>>;
 export declare const deleteUsers: import("@sveltejs/kit").RemoteCommand<string[], Promise<void>>;
-export declare const getUserPermissions: import("@sveltejs/kit").RemoteQueryFunction<string, string[]>;
+export declare const getUserPermissions: import("@sveltejs/kit").RemoteCommand<string, Promise<string[]>>;
 export declare const updateUserPermissions: import("@sveltejs/kit").RemoteCommand<{
     userId: string;
     permissions: string[];

package/dist/funcs/user-management.remote.js

@@ -248,7 +248,7 @@ async function createUserPermissions(email, permissions, clientId = CLIENT_ID) {
     log.trace('createUserPermissions', 'Result:', result);
     return result;
 }
-export const getUsers = query('unchecked', async (options) => {
+export const getUsers = command('unchecked', async (options) => {
     log.trace('getUsers', 'Called with options:', options);
     try {
         const limit = options.pageSize;
@@ -491,7 +491,7 @@ async function fetchUserPermissions(email) {
         }
     }
 }
-export const getUserPermissions = query('unchecked', async (userId) => {
+export const getUserPermissions = command('unchecked', async (userId) => {
     log.trace('getUserPermissions', 'Called for userId:', userId);
     try {
         // Fetch user from Clerk to get email

package/dist/server/index.d.ts

@@ -0,0 +1 @@
+export * from './s3.js';

package/dist/server/index.js

@@ -0,0 +1 @@
+export * from './s3.js';

package/dist/server/s3.d.ts

@@ -0,0 +1,53 @@
+/**
+ * S3 server handler factory. Returns Request handlers that the client-side
+ * S3Adapter expects at /api/s3/list and /api/s3/download.
+ *
+ * Keeps AWS credentials server-side — consumers just wire these handlers into
+ * their route files.
+ *
+ * @example
+ * ```ts
+ * // src/routes/api/s3/list/+server.ts
+ * import { createS3Handlers } from '@makolabs/ripple/server';
+ * import { env } from '$env/dynamic/private';
+ *
+ * const s3 = createS3Handlers({
+ *   bucket: env.S3_BUCKET,
+ *   region: env.S3_REGION,
+ *   accessKeyId: env.S3_ACCESS_KEY_ID,
+ *   secretAccessKey: env.S3_SECRET_ACCESS_KEY,
+ *   endpoint: env.S3_ENDPOINT, // optional, e.g. for DO Spaces
+ * });
+ *
+ * export const GET = ({ request }) => s3.list(request);
+ * ```
+ */
+export interface S3HandlerConfig {
+    /** S3 bucket name (default used when request doesn't specify one) */
+    bucket: string;
+    /** AWS region or DO Spaces region (e.g. 'us-east-1', 'fra1') */
+    region: string;
+    /** AWS access key ID */
+    accessKeyId: string;
+    /** AWS secret access key */
+    secretAccessKey: string;
+    /**
+     * Custom endpoint URL for S3-compatible services like DigitalOcean Spaces.
+     * e.g. 'https://fra1.digitaloceanspaces.com'
+     */
+    endpoint?: string;
+    /**
+     * Whether a specific bucket override passed via the `bucket` query param
+     * should be allowed. Defaults to `false` for safety — only the configured
+     * bucket is accessible. Set to `true` if you need multi-bucket support.
+     */
+    allowBucketOverride?: boolean;
+    /**
+     * Download URL expiry in seconds. @default 3600 (1 hour)
+     */
+    downloadUrlExpirySeconds?: number;
+}
+export declare function createS3Handlers(config: S3HandlerConfig): {
+    list: (request: Request) => Promise<Response>;
+    download: (request: Request) => Promise<Response>;
+};

package/dist/server/s3.js

@@ -0,0 +1,100 @@
+import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+export function createS3Handlers(config) {
+    const clientConfig = {
+        region: config.region,
+        credentials: {
+            accessKeyId: config.accessKeyId,
+            secretAccessKey: config.secretAccessKey
+        }
+    };
+    if (config.endpoint) {
+        clientConfig.endpoint = config.endpoint;
+        clientConfig.forcePathStyle = false; // DO Spaces uses virtual-hosted style
+    }
+    const client = new S3Client(clientConfig);
+    const expirySeconds = config.downloadUrlExpirySeconds ?? 3600;
+    /**
+     * GET /api/s3/list?prefix=<path>&search=<term>&bucket=<name>
+     *
+     * Returns folders and files at the given prefix.
+     */
+    async function list(request) {
+        try {
+            const url = new URL(request.url);
+            const prefix = url.searchParams.get('prefix') ?? '';
+            const search = url.searchParams.get('search') ?? '';
+            const bucketParam = url.searchParams.get('bucket');
+            const bucket = config.allowBucketOverride && bucketParam ? bucketParam : config.bucket;
+            const command = new ListObjectsV2Command({
+                Bucket: bucket,
+                Prefix: prefix,
+                Delimiter: '/'
+            });
+            const response = await client.send(command);
+            // Folders come back as CommonPrefixes
+            let folders = (response.CommonPrefixes ?? []).map((cp) => ({
+                prefix: cp.Prefix ?? '',
+                folderName: cp.Prefix ? cp.Prefix.slice(prefix.length).replace(/\/$/, '') : ''
+            }));
+            // Files come back as Contents
+            let files = (response.Contents ?? [])
+                .filter((obj) => obj.Key && obj.Key !== prefix)
+                .map((obj) => ({
+                key: obj.Key,
+                lastModified: obj.LastModified?.toISOString() ?? new Date().toISOString(),
+                size: obj.Size ?? 0
+            }));
+            // Apply search filter if provided (case-insensitive substring match on name)
+            if (search) {
+                const needle = search.toLowerCase();
+                folders = folders.filter((f) => f.folderName.toLowerCase().includes(needle));
+                files = files.filter((f) => {
+                    const name = f.key.slice(prefix.length).toLowerCase();
+                    return name.includes(needle);
+                });
+            }
+            return jsonResponse({ folders, files });
+        }
+        catch (err) {
+            return errorResponse(err);
+        }
+    }
+    /**
+     * GET /api/s3/download?key=<object-key>&bucket=<name>
+     *
+     * Returns a presigned URL (as plain text) that the browser can GET to
+     * download the file.
+     */
+    async function download(request) {
+        try {
+            const url = new URL(request.url);
+            const key = url.searchParams.get('key');
+            const bucketParam = url.searchParams.get('bucket');
+            if (!key) {
+                return jsonResponse({ error: 'Missing required "key" query param' }, 400);
+            }
+            const bucket = config.allowBucketOverride && bucketParam ? bucketParam : config.bucket;
+            const command = new GetObjectCommand({ Bucket: bucket, Key: key });
+            const signedUrl = await getSignedUrl(client, command, { expiresIn: expirySeconds });
+            return new Response(signedUrl, {
+                status: 200,
+                headers: { 'Content-Type': 'text/plain' }
+            });
+        }
+        catch (err) {
+            return errorResponse(err);
+        }
+    }
+    return { list, download };
+}
+function jsonResponse(body, status = 200) {
+    return new Response(JSON.stringify(body), {
+        status,
+        headers: { 'Content-Type': 'application/json' }
+    });
+}
+function errorResponse(err) {
+    const message = err instanceof Error ? err.message : 'Unknown error';
+    return jsonResponse({ error: message }, 500);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "2.5.3",
+	"version": "2.5.9",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -42,6 +42,10 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
+		"./server": {
+			"types": "./dist/server/index.d.ts",
+			"default": "./dist/server/index.js"
+		},
 		"./funcs/*": {
 			"types": "./dist/funcs/*.d.ts",
 			"default": "./dist/funcs/*.js"
@@ -121,6 +125,8 @@
 		"*.{js,ts,svelte,css,md,json}": "prettier --write"
 	},
 	"dependencies": {
+		"@aws-sdk/client-s3": "^3.1029.0",
+		"@aws-sdk/s3-request-presigner": "^3.1029.0",
 		"@friendofsvelte/mermaid": "^0.0.4",
 		"dayjs": "^1.11.19",
 		"echarts": "^6.0.0",