0.3.5

package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://gitea.auvem.com/svelte-toolkit/sui.git"
 	},
-	"version": "0.3.4",
+	"version": "0.3.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",

src/lib/Banner.svelte

@@ -58,38 +58,6 @@
 		},
 		swap: false
 	};
-
-	const mergeBannerControls = (
-		defaults: BannerControls,
-		overrides?: BannerControls | null
-	): BannerControls => {
-		if (overrides == null) return { ...defaults };
-
-		const result: BannerControls = { ...defaults };
-
-		const keys: (keyof BannerControls)[] = ['accept', 'decline', 'moreInfo', 'dismiss', 'swap'];
-
-		for (const key of keys) {
-			const ov = overrides[key];
-			if (ov === null) {
-				// explicit disable
-				result[key] = null;
-				continue;
-			}
-			if (ov === undefined) continue; // keep default
-			if (key === 'swap') {
-				result.swap = ov as boolean;
-				continue;
-			}
-			// shallow merge individual control fields
-			result[key] = {
-				...(defaults[key] ?? {}),
-				...(ov as any)
-			} as any;
-		}
-
-		return result;
-	};
 </script>
 
 <script lang="ts">
@@ -99,6 +67,7 @@
 	import Button from './Button.svelte';
 	import FramelessButton from './FramelessButton.svelte';
 	import { X } from 'phosphor-svelte';
+	import { mergeOverrideObject } from './util';
 
 	/**
 	 * Banner provides a simple component to display a banner message with
@@ -135,7 +104,7 @@
 		children
 	}: Props = $props();
 
-	const controls = $derived(mergeBannerControls(defaultBannerControls, rawControls));
+	const controls = $derived(mergeOverrideObject(defaultBannerControls, rawControls));
 
 	const api: BannerAPI = {
 		open: () => (open = true),

src/lib/Dialog.svelte

@@ -41,24 +41,29 @@
 		title: (title: string) => void;
 	}
 
+	type DialogControlButton = {
+		label?: string;
+		class?: ClassValue;
+		action?: (dialog: DialogAPI) => void;
+	};
+
 	/**
 	 * Configures the default dialog controls.
 	 */
-	export type DialogControlOpts = {
+	export type DialogControls = {
-		cancel?: {
+		cancel?: DialogControlButton | null;
-			label?: string;
+		ok?: DialogControlButton | null;
-			class?: ClassValue;
+		close?: Omit<DialogControlButton, 'label'> | null;
-			action?: (dialog: DialogAPI) => void;
+	};
-		};
+
-		ok?: {
+	const defaultDialogControls: DialogControls = {
-			label?: string;
+		cancel: {
-			class?: ClassValue;
+			label: 'Cancel'
-			action?: (dialog: DialogAPI) => void;
+		},
-		};
+		ok: {
-		close?: {
+			label: 'OK'
-			class?: ClassValue;
+		},
-			action?: (dialog: DialogAPI) => void;
+		close: {}
-		};
 	};
 </script>
 
@@ -72,6 +77,7 @@
 	import { X } from 'phosphor-svelte';
 	import { ErrorMessage, type RawError } from './error';
 	import ErrorBox from './ErrorBox.svelte';
+	import { mergeOverrideObject } from './util';
 
 	interface Props {
 		open?: boolean;
@@ -80,7 +86,7 @@
 		size?: 'sm' | 'md' | 'lg' | 'max';
 		class?: ClassValue;
 		children?: Snippet;
-		controls?: Snippet | DialogControlOpts;
+		controls?: Snippet | DialogControls;
 		onopen?: (dialog: DialogAPI) => void;
 		onclose?: (dialog: DialogAPI) => void;
 		loading?: boolean;
@@ -95,7 +101,7 @@
 		size = 'sm',
 		class: classValue,
 		children,
-		controls,
+		controls: rawControls = defaultDialogControls,
 		onopen,
 		onclose,
 		loading = $bindable(false),
@@ -103,6 +109,12 @@
 		disabled = $bindable(false)
 	}: Props = $props();
 
+	let controls = $derived(
+		typeof rawControls === 'function'
+			? rawControls
+			: mergeOverrideObject(defaultDialogControls, rawControls)
+	);
+
 	let dialogContainer = $state<HTMLDivElement | null>(null);
 	let error = $state<ErrorMessage | null>(null);
 
@@ -192,49 +204,62 @@
 
 			{#if children}{@render children()}{:else}Dialog is empty{/if}
 
+			<!-- Dialog Controls -->
 			<div class="mt-6 flex justify-end gap-4">
 				{#if controls && typeof controls === 'function'}{@render controls()}{:else}
-					<Button
+					{#if controls.cancel !== null}
-						class={controls?.cancel?.class}
+						<Button
-						onclick={() => {
+							class={controls?.cancel?.class}
-							if (controls?.cancel?.action) {
+							onclick={() => {
-								controls.cancel.action(dialogAPI);
+								if (controls?.cancel?.action) {
-							} else if (!frozen) {
+									controls.cancel.action(dialogAPI);
-								open = false;
+								} else if (!frozen) {
-							}
+									open = false;
-						}}
+								}
-						disabled={frozen}
+							}}
-					>
+							disabled={frozen}
-						{controls?.cancel?.label || 'Cancel'}
+						>
-					</Button>
+							{controls?.cancel?.label || 'Cancel'}
-					<Button
+						</Button>
-						class={controls?.ok?.class}
+					{/if}
-						onclick={() => {
+					{#if controls.ok !== null}
-							if (controls?.ok?.action) {
+						<Button
-								controls.ok.action(dialogAPI);
+							class={controls?.ok?.class}
-							} else if (!frozen && !loading && !disabled) {
+							onclick={() => {
-								open = false;
+								if (controls?.ok?.action) {
-							}
+									controls.ok.action(dialogAPI);
-						}}
+								} else if (!frozen && !loading && !disabled) {
-						disabled={frozen || loading || disabled}
+									open = false;
-						{loading}
+								}
-					>
+							}}
-						{controls?.ok?.label || 'OK'}
+							disabled={frozen || loading || disabled}
-					</Button>
+							{loading}
+						>
+							{controls?.ok?.label || 'OK'}
+						</Button>
+					{/if}
 				{/if}
 			</div>
-			<button
+
-				type="button"
+			<!-- Close Button -->
-				aria-label="close"
+			{#if typeof controls === 'function' || controls?.close !== null}
-				class="absolute top-4 right-4 inline-flex cursor-pointer items-center
+				<button
+					type="button"
+					aria-label="close"
+					class="absolute top-4 right-4 inline-flex cursor-pointer items-center
 				justify-center disabled:cursor-not-allowed disabled:opacity-50"
-				onclick={() => {
+					onclick={() => {
-					if (!frozen) open = false;
+						if (typeof controls !== 'function' && controls?.close?.action) {
-				}}
+							controls?.close?.action?.(dialogAPI);
-				disabled={frozen}
+						} else if (!frozen) {
-			>
+							open = false;
-				<X size="1.5em" weight="bold" />
+						}
-			</button>
+					}}
+					disabled={frozen}
+				>
+					<X size="1.5em" weight="bold" />
+				</button>
+			{/if}
 		</div>
 	</div>
 {/snippet}

src/lib/util.ts

@@ -143,3 +143,55 @@ export const trimEdges = (str: string, char: string, trimStart?: boolean, trimEn
 
 	return str.substring(start, end);
 };
+
+// helper: only treat plain objects as mergeable
+const isPlainObject = (v: unknown): v is Record<string, unknown> =>
+	typeof v === 'object' &&
+	v !== null &&
+	!Array.isArray(v) &&
+	Object.getPrototypeOf(v) === Object.prototype;
+
+/** Merge two plain object maps. No `any` used. */
+function mergePlainObjects(
+	baseObj: Record<string, unknown>,
+	overrideObj: Record<string, unknown>
+): Record<string, unknown> {
+	const res: Record<string, unknown> = { ...baseObj };
+
+	for (const k of Object.keys(overrideObj)) {
+		const v = overrideObj[k];
+		if (v === undefined) continue; // undefined preserves base
+		const b = res[k];
+
+		if (isPlainObject(v) && isPlainObject(b)) {
+			res[k] = mergePlainObjects(b as Record<string, unknown>, v as Record<string, unknown>);
+		} else {
+			// primitives, null, arrays, non-plain objects replace base
+			res[k] = v;
+		}
+	}
+
+	return res;
+}
+
+/**
+ * Merge `base` with `override`.
+ * - `null` in `override` replaces (kept as valid override)
+ * - `undefined` in `override` is ignored (keeps base)
+ * - Only plain objects are deep-merged
+ * - If `override` is null/undefined we return a shallow copy of `base`
+ */
+export const mergeOverrideObject = <T extends Record<string, unknown>>(
+	base: T,
+	override?: Partial<T> | null
+): T => {
+	if (override == null) return { ...base } as T;
+
+	// Use plain maps internally to avoid explicit any
+	const baseMap = { ...base } as Record<string, unknown>;
+	const overrideMap = override as Record<string, unknown>;
+
+	const merged = mergePlainObjects(baseMap, overrideMap);
+
+	return merged as T;
+};

src/routes/+page.svelte

@@ -523,7 +523,8 @@
 				dialog.close();
 				alert('Dialog submitted!');
 			}
-		}
+		},
+		cancel: null
 	}}
 	onopen={(dialog) => {
 		dialog.error('Example error message!');