diff --git a/src/lib/Banner.svelte b/src/lib/Banner.svelte
index fefd676..8ce2344 100644
--- a/src/lib/Banner.svelte
+++ b/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),
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 4f28178..a92b075 100644
--- a/src/lib/util.ts
+++ b/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;
+};