From 527ac4b0b8a12bda7c1064599f2c158f5f2d833a Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 7 Nov 2025 05:59:19 +0800
Subject: [PATCH 1/4] feat: add portal prop to dialog and drawer components;
 update popover components for portal handling

---
 src/lib/components/dialog/dialog-root.svelte  |  6 ++-
 src/lib/components/drawer/drawer-root.svelte  |  4 +-
 src/lib/components/popover/bond.svelte.ts     |  2 +
 .../components/popover/popover-arrow.svelte   |  8 +---
 .../components/popover/popover-content.svelte | 47 ++++++++-----------
 .../components/popover/popover-root.svelte    | 22 ++-------
 .../components/popover/popover-trigger.svelte | 13 +----
 7 files changed, 35 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/dialog/dialog-root.svelte b/src/lib/components/dialog/dialog-root.svelte
index 2756221..c237f5a 100644
--- a/src/lib/components/dialog/dialog-root.svelte
+++ b/src/lib/components/dialog/dialog-root.svelte
@@ -5,6 +5,7 @@
 	> = HtmlAtomProps<E, B> & {
 		open?: boolean;
 		disabled?: boolean;
+		portal?: string;
 		factory?: (props: DialogBondProps) => DialogBond;
 		children?: Snippet<[{ dialog: DialogBond }]>;
 	};
@@ -24,6 +25,7 @@
 		open = $bindable(false),
 		disabled = false,
 		as = 'dialog' as E,
+		portal = undefined,
 		factory = _factory,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -95,7 +97,7 @@
 	{as}
 	{bond}
 	preset="dialog"
-	portal="root.l1"
+	portal={portal ?? 'root.l1'}
 	class={[
 		'border-border pointer-events-auto fixed top-0 left-0 flex h-full w-full items-center justify-center bg-neutral-900/10 opacity-0',
 		!open && 'pointer-events-none',
@@ -116,7 +118,7 @@
 	{...rootProps}
 >
 	<!-- <div class="w-full h-full flex items-center justify-center"> -->
-	<ActivePortal id="root.l1">
+	<ActivePortal id={portal ?? 'root.l1'}>
 		{@render children?.({ dialog: bond })}
 	</ActivePortal>
 	<!-- </div> -->
diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index a1a8e3f..a1e0058 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -15,6 +15,7 @@
 	> & {
 		open?: boolean;
 		disabled?: boolean;
+		portal?: string;
 		onclose?: (event: Event, bond: DrawerBond) => void;
 		factory?: Factory<DrawerBond>;
 	};
@@ -38,6 +39,7 @@
 		class: klass = '',
 		as = 'dialog',
 		disabled = false,
+		portal = undefined,
 		onclose = undefined,
 		onmount = undefined,
 		ondestroy = undefined,
@@ -92,7 +94,7 @@
 <Teleport
 	{as}
 	{bond}
-	portal="root.l1"
+	portal={portal ?? 'root.l1'}
 	preset="drawer"
 	class={[
 		'border-border pointer-events-auto h-full w-full overflow-hidden bg-transparent',
diff --git a/src/lib/components/popover/bond.svelte.ts b/src/lib/components/popover/bond.svelte.ts
index dd20462..498b7f9 100644
--- a/src/lib/components/popover/bond.svelte.ts
+++ b/src/lib/components/popover/bond.svelte.ts
@@ -13,6 +13,7 @@ import {
 import { debounce } from 'es-toolkit';
 import { getElementId, isBrowser } from '$svelte-atoms/core/utils/dom.svelte.js';
 import { Bond, BondState, type BondStateProps } from '$svelte-atoms/core/shared/bond.svelte.js';
+import type { PortalBond } from '../portal';
 
 export type PopoverParams = {
 	apply?: (
@@ -30,6 +31,7 @@ export type PopoverStateProps<T extends Record<string, unknown> = Record<string,
 		placements: Placement[];
 		placement: Placement | undefined;
 		offset: number;
+		portal?: string | PortalBond;
 		extend: T;
 	};
 
diff --git a/src/lib/components/popover/popover-arrow.svelte b/src/lib/components/popover/popover-arrow.svelte
index 59bbe84..8be60fd 100644
--- a/src/lib/components/popover/popover-arrow.svelte
+++ b/src/lib/components/popover/popover-arrow.svelte
@@ -1,15 +1,9 @@
-<script module lang="ts">
-	export type PopoverArrowProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { animate as motion } from 'motion';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/popover/popover-content.svelte b/src/lib/components/popover/popover-content.svelte
index 029339a..3b5b7c2 100644
--- a/src/lib/components/popover/popover-content.svelte
+++ b/src/lib/components/popover/popover-content.svelte
@@ -1,39 +1,30 @@
-<script module lang="ts">
-	import type { Override } from '$svelte-atoms/core/types';
-
-	export type AnimateParams = {
-		x: number;
-		y: number;
-		xOffset: number;
-		yOffset: number;
-		open: boolean;
-	};
-
-	export type PopoverOverlayProps<T extends HtmlElementTagName, B extends Base = Base> = Override<
-		HtmlAtomProps<T, B>,
-		{
-			children?: Snippet<[{ popover?: PopoverBond }]>;
-		}
-	>;
-
-	const k: PopoverOverlayProps<'div'> = {
-		class: []
-	};
-</script>
-
 <script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
-	import { type Snippet } from 'svelte';
 	import { animate as motion } from 'motion';
-	import { PortalBond, Teleport } from '$svelte-atoms/core/components/portal';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { PortalBond, PortalsBond, Teleport } from '$svelte-atoms/core/components/portal';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
 	import { PopoverBond } from './bond.svelte';
 	import { DURATION } from '$svelte-atoms/core/shared';
+	import type { AnimateParams, PopoverContentProps } from './types';
 
 	type Element = HtmlElementType<E>;
 
 	const bond = PopoverBond.get();
-	const activePortalBond = PortalBond.get();
+	const activePortalBond = (() => {
+		const key = bond.state.props.portal;
+		if (key instanceof PortalBond) {
+			return key;
+		}
+
+		let portal: PortalBond | undefined | null = undefined;
+
+		if (typeof key === 'string') {
+			portal = PortalsBond.get()?.state.get(key);
+			console.error('portal was not found');
+		}
+
+		return portal ?? PortalBond.get();
+	})();
 
 	if (!bond) {
 		throw new Error('<PopoverOverlay /> must be used within a <Popover />');
@@ -49,7 +40,7 @@
 		exit = undefined,
 		initial = undefined,
 		...restProps
-	}: PopoverOverlayProps<E, B> = $props();
+	}: PopoverContentProps<E, B> = $props();
 
 	const isOpen = $derived(bond.state.isOpen && !!bond.elements.trigger);
 	const portalId = $derived(activePortalBond?.id);
diff --git a/src/lib/components/popover/popover-root.svelte b/src/lib/components/popover/popover-root.svelte
index d6c739d..0c856c8 100644
--- a/src/lib/components/popover/popover-root.svelte
+++ b/src/lib/components/popover/popover-root.svelte
@@ -1,23 +1,7 @@
-<script module lang="ts">
-	import type { Factory } from '$svelte-atoms/core/types';
-
-	export type PopoverRootProps = {
-		open?: boolean;
-		disabled?: boolean;
-		placements?: Placement[];
-		placement?: Placement;
-		offset?: number;
-		extend?: Record<string, unknown>;
-		factory?: Factory<PopoverBond>;
-		children?: Snippet<[{ popover: PopoverBond }]>;
-	};
-</script>
-
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { Placement } from '@floating-ui/dom';
 	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import type { PopoverRootProps } from './types';
 
 	let {
 		open = $bindable(false),
@@ -25,6 +9,7 @@
 		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
 		placement = 'bottom-start',
 		offset = 0,
+		portal = undefined,
 		extend = {},
 		factory = _factory,
 		children = undefined
@@ -42,7 +27,8 @@
 			defineProperty('disabled', () => disabled),
 			defineProperty('placement', () => placement),
 			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? [])
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('portal', () => portal)
 		],
 		() => ({ extend })
 	);
diff --git a/src/lib/components/popover/popover-trigger.svelte b/src/lib/components/popover/popover-trigger.svelte
index 9fb3e90..d74d0bf 100644
--- a/src/lib/components/popover/popover-trigger.svelte
+++ b/src/lib/components/popover/popover-trigger.svelte
@@ -1,16 +1,7 @@
-<script module lang="ts">
-	export type PopoverTriggerProps<
-		T extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<T, B> & {
-		children?: Snippet<[{ popover?: PopoverBond }]>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { PopoverBond } from './bond.svelte';
+	import type { PopoverTriggerProps } from './types';
 
 	const bond = PopoverBond.get();
 

From 32478e7c8d1359e3652988afbd3d452db75cbc65 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 7 Nov 2025 05:59:33 +0800
Subject: [PATCH 2/4] feat: add Popover component types for improved type
 safety and flexibility

---
 src/lib/components/popover/types.ts | 47 +++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/lib/components/popover/types.ts

diff --git a/src/lib/components/popover/types.ts b/src/lib/components/popover/types.ts
new file mode 100644
index 0000000..723c879
--- /dev/null
+++ b/src/lib/components/popover/types.ts
@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { Placement } from '@floating-ui/dom';
+import type { Factory } from '$svelte-atoms/core/types';
+import type { PopoverBond } from './bond.svelte';
+import type { Override } from '$svelte-atoms/core/types';
+import type { Base, HtmlAtomProps } from '../atom';
+import type { HtmlElementTagName } from '../element';
+import type { PortalBond } from '../portal';
+
+export type PopoverRootProps = {
+	open?: boolean;
+	disabled?: boolean;
+	placements?: Placement[];
+	placement?: Placement;
+	offset?: number;
+	portal?: string | PortalBond;
+	extend?: Record<string, unknown>;
+	factory?: Factory<PopoverBond>;
+	children?: Snippet<[{ popover: PopoverBond }]>;
+};
+
+export type AnimateParams = {
+	x: number;
+	y: number;
+	xOffset: number;
+	yOffset: number;
+	open: boolean;
+};
+
+export type PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> = Override<
+	HtmlAtomProps<T, B>,
+	{
+		children?: Snippet<[{ popover?: PopoverBond }]>;
+	}
+>;
+
+export type PopoverArrowProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = HtmlAtomProps<E, B>;
+
+export type PopoverTriggerProps<
+	T extends keyof HTMLElementTagNameMap,
+	B extends Base = Base
+> = HtmlAtomProps<T, B> & {
+	children?: Snippet<[{ popover?: PopoverBond }]>;
+};

From 674caef81534c5779e6e9c0c0e3211e3bfe246b5 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 7 Nov 2025 06:10:52 +0800
Subject: [PATCH 3/4] feat: update portal prop to accept PortalBond type across
 dialog, drawer, and teleport components

---
 src/lib/components/dialog/dialog-root.svelte   |  8 +++-----
 src/lib/components/drawer/drawer-root.svelte   |  3 ++-
 src/lib/components/portal/active-portal.svelte | 10 ++++++++--
 src/lib/components/portal/teleport.svelte      | 14 ++++++++++----
 src/lib/components/root/root.svelte            |  2 +-
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/dialog/dialog-root.svelte b/src/lib/components/dialog/dialog-root.svelte
index c237f5a..14fa3fa 100644
--- a/src/lib/components/dialog/dialog-root.svelte
+++ b/src/lib/components/dialog/dialog-root.svelte
@@ -5,7 +5,7 @@
 	> = HtmlAtomProps<E, B> & {
 		open?: boolean;
 		disabled?: boolean;
-		portal?: string;
+		portal?: string | PortalBond;
 		factory?: (props: DialogBondProps) => DialogBond;
 		children?: Snippet<[{ dialog: DialogBond }]>;
 	};
@@ -14,7 +14,7 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { animate as motion } from 'motion';
-	import { Teleport, ActivePortal } from '$svelte-atoms/core/components/portal';
+	import { Teleport, ActivePortal, PortalBond } from '$svelte-atoms/core/components/portal';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
 	import { DURATION } from '$svelte-atoms/core/shared';
@@ -117,9 +117,7 @@
 	}}
 	{...rootProps}
 >
-	<!-- <div class="w-full h-full flex items-center justify-center"> -->
-	<ActivePortal id={portal ?? 'root.l1'}>
+	<ActivePortal portal={portal ?? 'root.l1'}>
 		{@render children?.({ dialog: bond })}
 	</ActivePortal>
-	<!-- </div> -->
 </Teleport>
diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index a1e0058..2930c09 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -15,7 +15,7 @@
 	> & {
 		open?: boolean;
 		disabled?: boolean;
-		portal?: string;
+		portal?: string | PortalBond;
 		onclose?: (event: Event, bond: DrawerBond) => void;
 		factory?: Factory<DrawerBond>;
 	};
@@ -30,6 +30,7 @@
 	import Teleport from '$svelte-atoms/core/components/portal/teleport.svelte';
 	import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
 	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
+	import type { PortalBond } from '../portal';
 
 	type Element = HTMLElementTagNameMap[E];
 
diff --git a/src/lib/components/portal/active-portal.svelte b/src/lib/components/portal/active-portal.svelte
index d3b3cab..54c61a9 100644
--- a/src/lib/components/portal/active-portal.svelte
+++ b/src/lib/components/portal/active-portal.svelte
@@ -1,10 +1,16 @@
 <script>
 	import { PortalsBond } from './portals/bond.svelte';
 
-	let { id, children = undefined } = $props();
+	let { portal, children = undefined } = $props();
 
 	const portalsBond = PortalsBond.get();
-	const activePortal = portalsBond?.state.get(id)?.share();
+	const activePortal = (() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal) ?? undefined;
+		}
+
+		return portal;
+	})()?.share();
 
 	if (!portalsBond) {
 		throw new Error('Portals bond is not found');
diff --git a/src/lib/components/portal/teleport.svelte b/src/lib/components/portal/teleport.svelte
index a4bc602..51ccd49 100644
--- a/src/lib/components/portal/teleport.svelte
+++ b/src/lib/components/portal/teleport.svelte
@@ -6,7 +6,7 @@
 		E extends HtmlElementTagName = 'div',
 		B extends Base = Base
 	> = HtmlAtomProps<E, B> & {
-		portal?: string;
+		portal?: string | PortalBond;
 	};
 </script>
 
@@ -15,6 +15,7 @@
 	import { PortalsBond } from './portals';
 	import { RootBond } from '$svelte-atoms/core/components/root/bond.svelte';
 	import { port } from './utils';
+	import type { PortalBond } from '.';
 
 	type Element = HtmlElementType<E>;
 
@@ -24,9 +25,14 @@
 	const portalsBond = PortalsBond.get();
 	const rootBond = RootBond.get();
 
-	const portalBond = $derived(
-		portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!)
-	);
+	const portalBond = $derived.by(() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
+		}
+
+		return portal;
+	});
+
 	const targetElement = $derived(portalBond?.targetElement);
 
 	function _port(node: HTMLElement) {
diff --git a/src/lib/components/root/root.svelte b/src/lib/components/root/root.svelte
index e401b60..5cdd0f0 100644
--- a/src/lib/components/root/root.svelte
+++ b/src/lib/components/root/root.svelte
@@ -114,7 +114,7 @@
 			</Portal.Outer>
 		{/if}
 
-		<ActivePortal id="root.l0">
+		<ActivePortal portal="root.l0">
 			{@render children?.()}
 		</ActivePortal>
 	</HtmlAtom>

From ef5032a7b4b6a1d84e87c6e5da435e9449898679 Mon Sep 17 00:00:00 2001
From: abdel <rioman19@gmail.com>
Date: Fri, 7 Nov 2025 06:13:26 +0800
Subject: [PATCH 4/4] fix: update children prop type in SlideoverRootProps and
 adjust ActivePortal usage

---
 src/lib/components/drawer/drawer-root.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/drawer/drawer-root.svelte b/src/lib/components/drawer/drawer-root.svelte
index 2930c09..ad2dbfb 100644
--- a/src/lib/components/drawer/drawer-root.svelte
+++ b/src/lib/components/drawer/drawer-root.svelte
@@ -7,7 +7,7 @@
 	> = Override<
 		HtmlAtomProps<E, B>,
 		{
-			children?: Snippet<[{ slideover: DrawerBond }]>;
+			children?: Snippet<[{ drawer: DrawerBond }]>;
 			initial?: (node: HTMLElement, bond: DrawerBond) => void;
 			enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
 			exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
@@ -30,7 +30,7 @@
 	import Teleport from '$svelte-atoms/core/components/portal/teleport.svelte';
 	import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
 	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
-	import type { PortalBond } from '../portal';
+	import { ActivePortal, type PortalBond } from '../portal';
 
 	type Element = HTMLElementTagNameMap[E];
 
@@ -112,5 +112,7 @@
 	animate={animate?.bind(bond.state)}
 	{...rootProps}
 >
-	{@render children?.({ drawer: bond })}
+	<ActivePortal portal={portal ?? 'root.l1'}>
+		{@render children?.({ drawer: bond })}
+	</ActivePortal>
 </Teleport>