@makolabs/ripple 2.5.8 → 3.0.0

package/dist/pipeline/pipeline.js

@@ -19,7 +19,7 @@ export const pipelineVariants = tv({
                 count: 'text-xl mt-0.5',
                 content: 'px-4'
             },
-            base: {
+            md: {
                 stage: 'min-w-[150px]',
                 borderLayer: 'h-24',
                 innerLayer: 'h-24',
@@ -43,6 +43,11 @@ export const pipelineVariants = tv({
                 label: 'text-default-700',
                 count: 'text-default-900'
             },
+            secondary: {
+                borderLayer: 'bg-secondary-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
             success: {
                 borderLayer: 'bg-green-500',
                 label: 'text-default-700',
@@ -84,7 +89,7 @@ export const pipelineVariants = tv({
         }
     },
     defaultVariants: {
-        size: 'base',
+        size: 'md',
         color: 'default',
         equalWidth: true
     }

package/dist/server/s3.d.ts

@@ -1,9 +1,14 @@
 /**
- * S3 server handler factory. Returns Request handlers that the client-side
- * S3Adapter expects at /api/s3/list and /api/s3/download.
+ * S3 server handler factory — the server-side half of the `FileBrowser`
+ * component. Returns two `Request → Response` handlers that the client-side
+ * `S3Adapter` expects at **`GET /api/s3/list`** and **`GET /api/s3/download`**.
  *
  * Keeps AWS credentials server-side — consumers just wire these handlers into
- * their route files.
+ * their SvelteKit route files.
+ *
+ * **Both routes are required.** Skipping `download` makes file downloads 404.
+ *
+ * Pair with the client-side `S3Adapter` from `@makolabs/ripple`:
  *
  * @example
  * ```ts
@@ -21,6 +26,33 @@
  *
  * export const GET = ({ request }) => s3.list(request);
  * ```
+ *
+ * @example
+ * ```ts
+ * // src/routes/api/s3/download/+server.ts
+ * import { createS3Handlers } from '@makolabs/ripple/server';
+ * import { env } from '$env/dynamic/private';
+ *
+ * // Reuse the same config as the list route — or export a shared `s3` helper.
+ * const s3 = createS3Handlers({
+ *   bucket: env.S3_BUCKET,
+ *   region: env.S3_REGION,
+ *   accessKeyId: env.S3_ACCESS_KEY_ID,
+ *   secretAccessKey: env.S3_SECRET_ACCESS_KEY
+ * });
+ *
+ * export const GET = ({ request }) => s3.download(request);
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Consumer page wires S3Adapter to FileBrowser -->
+ * <script lang="ts">
+ *   import { FileBrowser, S3Adapter } from '@makolabs/ripple';
+ *   const adapter = new S3Adapter({ basePath: '/' });
+ * </script>
+ * <FileBrowser {adapter} />
+ * ```
  */
 export interface S3HandlerConfig {
     /** S3 bucket name (default used when request doesn't specify one) */

package/dist/sonner/Toaster.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+
+	let {
+		position = 'top-right',
+		richColors = true,
+		closeButton = true,
+		duration = 4000,
+		...rest
+	}: SonnerProps = $props();
+</script>
+
+<Sonner
+	class="toaster group"
+	{position}
+	{richColors}
+	{closeButton}
+	{duration}
+	toastOptions={{
+		classes: {
+			toast:
+				'group toast group-[.toaster]:bg-white group-[.toaster]:text-default-900 group-[.toaster]:border-default-200 group-[.toaster]:shadow-lg',
+			description: 'group-[.toast]:text-default-500',
+			actionButton: 'group-[.toast]:bg-primary-600 group-[.toast]:text-white',
+			cancelButton: 'group-[.toast]:bg-default-100 group-[.toast]:text-default-600'
+		}
+	}}
+	{...rest}
+/>

package/dist/sonner/Toaster.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ToasterProps as SonnerProps } from 'svelte-sonner';
+declare const Toaster: import("svelte").Component<SonnerProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/sonner/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Toast — a thin wrapper over svelte-sonner with ripple-branded defaults.
+ *
+ * @example
+ * ```svelte
+ * <!-- Mount once, usually in +layout.svelte -->
+ * <script>
+ *   import { Toaster } from '@makolabs/ripple';
+ * </script>
+ * <Toaster />
+ *
+ * <!-- Use anywhere -->
+ * <script>
+ *   import { toast } from '@makolabs/ripple';
+ * </script>
+ * <button onclick={() => toast.success('Saved!')}>Save</button>
+ * ```
+ */
+export { default as Toaster } from './Toaster.svelte';
+export { toast } from 'svelte-sonner';
+export type { ToasterProps, ToastT } from 'svelte-sonner';

package/dist/sonner/index.js

@@ -0,0 +1,20 @@
+/**
+ * Toast — a thin wrapper over svelte-sonner with ripple-branded defaults.
+ *
+ * @example
+ * ```svelte
+ * <!-- Mount once, usually in +layout.svelte -->
+ * <script>
+ *   import { Toaster } from '@makolabs/ripple';
+ * </script>
+ * <Toaster />
+ *
+ * <!-- Use anywhere -->
+ * <script>
+ *   import { toast } from '@makolabs/ripple';
+ * </script>
+ * <button onclick={() => toast.success('Saved!')}>Save</button>
+ * ```
+ */
+export { default as Toaster } from './Toaster.svelte';
+export { toast } from 'svelte-sonner';

package/dist/user-management/UserManagement.svelte

@@ -5,7 +5,13 @@
 	import UserTable from './UserTable.svelte';
 	import UserModal from './UserModal.svelte';
 	import UserViewModal from './UserViewModal.svelte';
-	import type { User, UserManagementProps, Role, Permission } from '../index.js';
+	import type {
+		User,
+		UserManagementProps,
+		UserModalSavePayload,
+		Role,
+		Permission
+	} from '../index.js';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	let {
@@ -152,20 +158,20 @@
 	}
 
 	// Save handlers
-	async function handleUserSave(user: User, mode: 'create' | 'edit') {
+	async function handleUserSave(payload: UserModalSavePayload) {
 		try {
-			if (mode === 'create') {
+			if (payload.mode === 'create') {
 				// After creating, go to page 1 to see the new user (newest first)
 				currentPage = 1;
-				await adapter.createUser(user);
+				await adapter.createUser(payload.user);
 			} else {
-				await adapter.updateUser({ userId: user.id, userData: user });
+				await adapter.updateUser({ userId: payload.user.id, userData: payload.user });
 			}
 			// Refresh the users list
 			await refreshUsersQuery();
 		} catch (error) {
 			console.error('Error saving user:', error);
-			toast.error(mode === 'create' ? 'Failed to create user' : 'Failed to update user');
+			toast.error(payload.mode === 'create' ? 'Failed to create user' : 'Failed to update user');
 			// Reload on error to restore correct state
 			await loadUsers();
 			throw error;
@@ -307,12 +313,12 @@
 		{currentPage}
 		{pageSize}
 		{totalUsers}
-		onPageChange={handlePageChange}
-		onPageSizeChange={handlePageSizeChange}
-		onSort={handleSort}
-		onView={openViewModal}
-		onEdit={openEditModal}
-		onDelete={handleDeleteUser}
+		onpagechange={handlePageChange}
+		onpagesizechange={handlePageSizeChange}
+		onsort={handleSort}
+		onview={openViewModal}
+		onedit={openEditModal}
+		ondelete={handleDeleteUser}
 	/>
 
 	<!-- User View Modal -->
@@ -320,8 +326,8 @@
 		bind:open={showViewModal}
 		bind:user={selectedUser}
 		{permissions}
-		onEdit={handleEditFromView}
-		onClose={handleModalClose}
+		onedit={handleEditFromView}
+		onclose={handleModalClose}
 	/>
 
 	<!-- User Edit/Create Modal -->
@@ -331,7 +337,7 @@
 		{roles}
 		{adapter}
 		{loadingPermissions}
-		onSave={handleUserSave}
-		onClose={handleModalClose}
+		onsave={handleUserSave}
+		onclose={handleModalClose}
 	/>
 </div>

package/dist/user-management/UserModal.svelte

@@ -18,8 +18,8 @@
 		roles = [],
 		adapter,
 		loadingPermissions = false,
-		onSave,
-		onClose,
+		onsave,
+		onclose,
 		class: className
 	}: UserModalProps = $props();
 
@@ -142,7 +142,7 @@
 		formErrors = {};
 		saving = false;
 		tokenVerification = null;
-		if (onClose) onClose();
+		if (onclose) onclose();
 	}
 
 	async function handleSubmit(event: SubmitEvent) {
@@ -166,8 +166,7 @@
 
 		try {
 			saving = true;
-			const userData: User = {
-				id: user?.id || '',
+			const commonFields = {
 				first_name: formData.first_name,
 				last_name: formData.last_name,
 				email_addresses: formData.email_addresses,
@@ -176,7 +175,11 @@
 				permissions: formData.permissions
 			};
 
-			await onSave(userData, mode);
+			if (mode === 'edit' && user?.id) {
+				await onsave({ mode: 'edit', user: { id: user.id, ...commonFields } });
+			} else {
+				await onsave({ mode: 'create', user: commonFields });
+			}
 			handleClose();
 		} catch (error) {
 			console.error('[UserModal] Error saving user:', error);
@@ -650,7 +653,7 @@
 					color="primary"
 					onclick={() => formElement?.requestSubmit()}
 					disabled={saving}
-					isLoading={saving}
+					loading={saving}
 					data-testid="save-user-button"
 				>
 					{mode === 'create' ? 'Create User' : 'Save Changes'}

package/dist/user-management/UserTable.svelte

@@ -15,12 +15,12 @@
 		currentPage = 1,
 		pageSize = 10,
 		totalUsers = 0,
-		onPageChange,
-		onPageSizeChange,
-		onSort,
-		onView,
-		onEdit,
-		onDelete,
+		onpagechange,
+		onpagesizechange,
+		onsort,
+		onview,
+		onedit,
+		ondelete,
 		class: className = ''
 	}: UserTableProps = $props();
 
@@ -38,8 +38,8 @@
 
 	// Handle table sort
 	function handleTableSort(state: { column: string | null; direction: 'asc' | 'desc' | null }) {
-		if (onSort && state.column && state.direction) {
-			onSort(state);
+		if (onsort && state.column && state.direction) {
+			onsort(state);
 		}
 	}
 
@@ -174,9 +174,9 @@
 
 {#snippet ActionsCell(user: User)}
 	<div class="flex items-center justify-end space-x-1">
-		{#if onView}
+		{#if onview}
 			<button
-				onclick={() => onView(user)}
+				onclick={() => onview(user)}
 				class="inline-flex rounded p-1 text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-900"
 				title="View User"
 				aria-label="View User"
@@ -184,9 +184,9 @@
 				{@render EyeIcon()}
 			</button>
 		{/if}
-		{#if onEdit}
+		{#if onedit}
 			<button
-				onclick={() => onEdit(user)}
+				onclick={() => onedit(user)}
 				class="inline-flex rounded p-1 text-green-600 transition-colors hover:bg-green-50 hover:text-green-900"
 				title="Edit User"
 				aria-label="Edit User"
@@ -194,9 +194,9 @@
 				{@render EditIcon()}
 			</button>
 		{/if}
-		{#if onDelete}
+		{#if ondelete}
 			<button
-				onclick={() => onDelete(user.id)}
+				onclick={() => ondelete(user.id)}
 				class="text-danger-600 hover:bg-danger-50 hover:text-danger-900 inline-flex rounded p-1 transition-colors"
 				title="Delete User"
 				aria-label="Delete User"
@@ -215,12 +215,11 @@
 	totalItems={totalUsers}
 	{loading}
 	pagination={true}
-	showPagination={true}
 	showPageSize={true}
 	pageSizeOptions={[10, 25, 50, 100]}
 	paginationTemplate="full"
-	onpagechange={onPageChange}
-	onpagesizechange={onPageSizeChange}
+	{onpagechange}
+	{onpagesizechange}
 	onsort={handleTableSort}
 	paginationPosition="bottom"
 	paginationClass="whitespace-nowrap flex-wrap gap-3 justify-between items-center"

package/dist/user-management/UserViewModal.svelte

@@ -6,9 +6,9 @@
 		open = $bindable(),
 		user = $bindable(),
 		roles = [],
-		onEdit,
-		onRegenerateApiKey,
-		onClose,
+		onedit,
+		onregenerateapikey,
+		onclose,
 		class: className
 	}: UserViewModalProps = $props();
 
@@ -20,12 +20,12 @@
 	function handleClose() {
 		open = false;
 		showApiKey = false;
-		if (onClose) onClose();
+		if (onclose) onclose();
 	}
 
 	function handleEdit() {
-		if (onEdit && user) {
-			onEdit(user);
+		if (onedit && user) {
+			onedit(user);
 		}
 	}
 
@@ -47,12 +47,12 @@
 	}
 
 	async function handleRegenerateApiKey() {
-		if (!user?.id || !onRegenerateApiKey) return;
+		if (!user?.id || !onregenerateapikey) return;
 
 		try {
 			regeneratingApiKey = true;
 			apiKeyError = null;
-			await onRegenerateApiKey(user.id);
+			await onregenerateapikey(user.id);
 		} catch (error) {
 			console.error('Error regenerating API key:', error);
 			apiKeyError = error instanceof Error ? error.message : 'Failed to regenerate API key';
@@ -125,11 +125,11 @@
 			</div>
 
 			<!-- Mako API Key -->
-			{#if apiKey || onRegenerateApiKey}
+			{#if apiKey || onregenerateapikey}
 				<div>
 					<div class="mb-2 flex items-center justify-between">
 						<p class="text-default-700 text-sm font-medium">Mako API Key</p>
-						{#if onRegenerateApiKey}
+						{#if onregenerateapikey}
 							<button
 								type="button"
 								onclick={handleRegenerateApiKey}
@@ -283,7 +283,7 @@
 			<div></div>
 			<div class="flex gap-3">
 				<Button variant="outline" onclick={handleClose}>Close</Button>
-				{#if onEdit}
+				{#if onedit}
 					<Button color="primary" onclick={handleEdit}>
 						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 							<path