@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/popover/popover-root.svelte

@@ -1,49 +1,87 @@
-<script lang="ts">
-	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import type { PopoverRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 1,
-		portal = undefined,
-		extend = {},
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: PopoverRootProps = $props();
-
-	const bondProps = defineState<PopoverStateProps>([
-		defineProperty(
-			'open',
-			() => open,
-			(v) => {
-				open = v;
-			}
-		),
-		defineProperty('disabled', () => disabled),
-		defineProperty('placement', () => placement),
-		defineProperty('offset', () => offset),
-		defineProperty('placements', () => placements ?? []),
-		defineProperty('portal', () => portal),
-		defineProperty('rest', () => restProps)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const popoverState = new PopoverState(() => props);
-		const popoverBond = new PopoverBond(popoverState);
-
-		return popoverBond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ popover: bond })}
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { PopoverState, PopoverBond } from './bond.svelte';
+	import type { PopoverStateProps } from './bond.svelte';
+	import { type BondStateProps } from '../../shared/bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import type { PopoverRootProps } from './types';
+	import { DialogBond } from '../dialog/bond.svelte';
+	import { DrawerBond } from '../drawer';
+	import { SidebarBond } from '../sidebar';
+
+	interface PopoverOwnerState {
+		readonly props: PopoverStateProps;
+
+		open: () => void;
+		close: () => void;
+		toggle: () => void;
+	}
+	interface PopoverOwner {
+		readonly state: PopoverOwnerState;
+	}
+
+	const owner = (()=> {
+		const potentialOwners = [DialogBond, DrawerBond, SidebarBond];
+		for (const potentialOwner of potentialOwners) {
+			try {
+				return potentialOwner.get() as unknown as PopoverOwner;
+			} catch {
+				continue;
+			}
+		}
+		
+		return null;
+	})();
+
+	const positionStrategy = $derived.by(()=> {
+		if(owner instanceof DialogBond){
+			return 'fixed';
+		}
+
+		return 'absolute';
+	})
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'bottom', 'top'],
+		placement = 'bottom',
+		offset = 1,
+		portal = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: PopoverRootProps = $props();
+
+	const bondProps = defineState<PopoverStateProps>([
+		defineProperty(
+			'open',
+			() => open && (owner?.state?.props?.open ?? true),
+			(v) => {
+				open = v;
+			}
+		),
+		defineProperty('disabled', () => disabled),
+		defineProperty('placement', () => placement),
+		defineProperty('offset', () => offset),
+		defineProperty('placements', () => placements ?? []),
+		defineProperty('portal', () => portal),
+		defineProperty('positionStrategy', () => positionStrategy),
+		defineProperty('rest', () => restProps)
+	]);
+
+	const bond = untrack(() => factory(bondProps as unknown as BondStateProps)).share();
+
+	function _factory() {
+		const popoverState = new PopoverState(() => bondProps);
+		const popoverBond = new PopoverBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ popover: bond })}

package/dist/components/popover/popover-root.svelte.d.ts

@@ -1,4 +1,5 @@
-import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
+import { PopoverState, PopoverBond } from './bond.svelte';
+import type { PopoverStateProps } from './bond.svelte';
 import type { PopoverRootProps } from './types';
 declare const PopoverRoot: import("svelte").Component<PopoverRootProps, {
     getBond: () => PopoverBond<PopoverStateProps, PopoverState<PopoverStateProps>, import("./bond.svelte").PopoverDomElements>;

package/dist/components/popover/popover-trigger.svelte

@@ -1,35 +1,44 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverTriggerProps } from './types';
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('<PopoverTrigger /> must be used within a <Popover />');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'popover.trigger',
-		children = undefined,
-		...restProps
-	}: PopoverTriggerProps<E, B> = $props();
-
-	const triggerProps = $derived({
-		...bond.trigger(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	{preset}
-	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
-	type={as === 'button' ? 'button' : undefined}
-	{...triggerProps}
->
-	{@render children?.({ popover: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverTriggerProps } from './types';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('<PopoverTrigger /> must be used within a <Popover />');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'popover.trigger',
+		children = undefined,
+		onpointerenter = undefined,
+		...restProps
+	}: PopoverTriggerProps<E, B> = $props();
+ 
+	const triggerProps = $derived({
+		...bond.trigger().spread,
+		...restProps
+	});
+
+	function handlePointerEnter(event: PointerEvent) {
+		onpointerenter?.(event);
+		if(event.defaultPrevented) return;
+
+		bond.state.tracking = true;
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
+	type={as === 'button' ? 'button' : undefined}
+	onpointerenter={handlePointerEnter}
+	{...triggerProps}
+>
+	{@render children?.({ popover: bond })}
+</HtmlAtom>

package/dist/components/popover/strategies/floating.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import {
+		autoUpdate,
+		computePosition,
+		arrow,
+		flip,
+		shift,
+		offset,
+		type ComputePositionConfig
+	} from '@floating-ui/dom';
+	import { PopoverBond, type PopoverParams } from '../bond.svelte';
+	import type { BondVirtualElement } from '../../../shared/bond.svelte';
+
+	const bond = PopoverBond.get();
+
+	const tracking = $derived(bond?.state.shouldTrackPosition ?? false);
+	const reference = $derived(bond?.element<BondVirtualElement>('virtual-trigger') ?? bond?.element<Element>('trigger'));
+	const overlay = $derived(bond?.element<HTMLElement>('overlay'));
+
+	$effect.pre(() => {
+		if (!reference || !overlay || !tracking) return;
+
+		// Use the existing positioning behavior
+		const cleanup = compute(bond)({}, autoUpdate);
+
+		return () => cleanup?.();
+	});
+
+	function compute(bond: PopoverBond) {
+		return (props: Record<string, unknown>, updater?: typeof autoUpdate) => {
+			const { offset: ofs, placements, placement } = bond.state.props;
+
+			const arrowElement = bond.element<HTMLElement>('arrow');
+
+			// Guard: ensure required elements exist
+			if (!reference || !overlay) {
+				return;
+			}
+
+			// Build middleware stack
+			const middleware: ComputePositionConfig['middleware'] = [
+				offset(ofs),
+				flip({
+					fallbackPlacements: placements,
+					padding: 8,
+					crossAxis: true,
+					fallbackStrategy: 'bestFit'
+				}),
+				shift({
+					padding: 8,
+					limiter: {
+						fn: (state) => {
+							const { x, y } = state;
+							return { x, y };
+						}
+					}
+				})
+			];
+
+			// Add arrow middleware if element exists
+			if (arrowElement) {
+				middleware.push(arrow({ element: arrowElement }));
+			}
+
+			const onchangeCallback = props.onchange as PopoverParams['onchange'];
+
+			// Compute position and notify listeners
+			const compute = async () => {
+				// Double rAF ensures browser has completed layout + paint
+				await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+				const position = await computePosition(reference, overlay, {
+					placement: placement ?? 'bottom',
+					middleware,
+					strategy: bond.state.props.positionStrategy
+				});
+
+				// Round to 0.01 precision to avoid excessive updates from sub-pixel changes
+				const x = Math.round((position.x ?? 0) * 100) / 100;
+				const y = Math.round((position.y ?? 0) * 100) / 100;
+
+				bond.state.notifyComputed({
+					middlewareData: position.middlewareData,
+					placement: position.placement,
+					strategy: position.strategy,
+					x,
+					y
+				});
+				onchangeCallback?.(overlay, position);
+
+				// Set minimum width to match trigger
+				if (reference && (reference instanceof Element)) {
+					requestAnimationFrame(() => {
+						overlay.style.minWidth = `${reference.clientWidth}px`;
+					});
+				}
+			};
+
+			// Use auto-update if provided, otherwise compute once
+			if (updater) {
+				return updater(reference, overlay, compute, {
+					ancestorScroll: false
+				});
+			}
+
+			compute();
+		};
+	}
+</script>

package/dist/components/popover/strategies/floating.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Floating: import("svelte").Component<Record<string, never>, {}, "">;
+type Floating = ReturnType<typeof Floating>;
+export default Floating;

package/dist/components/popover/strategies/index.d.ts

@@ -0,0 +1 @@
+export { default as FloatingStrategy } from './floating.svelte';

package/dist/components/popover/strategies/index.js

@@ -0,0 +1 @@
+export { default as FloatingStrategy } from './floating.svelte';

package/dist/components/popover/strategy-types.d.ts

@@ -0,0 +1,40 @@
+import type { Component } from 'svelte';
+import type { PopoverBond } from './bond.svelte';
+/**
+ * Props passed to all popover strategy components
+ */
+export type PopoverStrategyProps = {
+    /** The popover bond instance */
+    bond: PopoverBond;
+    /** Reference to trigger element (may be undefined during mount) */
+    trigger?: HTMLElement;
+    /** Reference to content element (may be undefined during mount) */
+    content?: HTMLElement;
+    /** Whether the popover is currently open */
+    open: boolean;
+};
+/**
+ * A strategy component that controls how popover content is rendered and positioned.
+ *
+ * Strategy components receive the bond, trigger, content elements, and open state.
+ * They are responsible for:
+ * - Positioning the content element
+ * - Handling layout/rendering logic
+ * - Cleanup on unmount
+ *
+ * @example
+ * ```svelte
+ * <!-- MyStrategy.svelte -->
+ * <script lang="ts">
+ *   import type { PopoverStrategyProps } from '@svelte-atoms/core/popover';
+ *
+ *   let { bond, trigger, content, open }: PopoverStrategyProps = $props();
+ *
+ *   $effect(() => {
+ *     if (!trigger || !content || !open) return;
+ *     // Position content relative to trigger
+ *   });
+ * </script>
+ * ```
+ */
+export type PopoverStrategy = Component<PopoverStrategyProps>;

package/dist/components/popover/strategy-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/popover/types.d.ts

@@ -1,36 +1,14 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { Placement } from '@floating-ui/dom';
 import type { Factory } from '../../types';
 import type { PopoverBond } from './bond.svelte';
 import type { Base, HtmlAtomProps } from '../atom';
 import type { HtmlElementTagName } from '../element';
-import type { PortalBond } from '../portal';
-/**
- * Extend this interface to add custom popover root properties in your application.
- */
-export interface PopoverRootExtendProps {
-}
-/**
- * Extend this interface to add custom popover content properties in your application.
- */
-export interface PopoverContentExtendProps {
-}
-/**
- * Extend this interface to add custom popover indicator properties in your application.
- */
-export interface PopoverIndicatorExtendProps {
-}
-/**
- * Extend this interface to add custom popover arrow properties in your application.
- */
-export interface PopoverArrowExtendProps {
-}
-/**
- * Extend this interface to add custom popover trigger properties in your application.
- */
-export interface PopoverTriggerExtendProps {
-}
-export interface PopoverRootProps extends PopoverRootExtendProps {
+import type { PortalBond, TeleportProps } from '../portal';
+export type PopoverChildren = Snippet<[{
+    popover: PopoverBond;
+}]>;
+export interface PopoverRootProps {
     open?: boolean;
     disabled?: boolean;
     placements?: Placement[];
@@ -39,9 +17,7 @@ export interface PopoverRootProps extends PopoverRootExtendProps {
     portal?: string | PortalBond;
     extend?: Record<string, unknown>;
     factory?: Factory<PopoverBond>;
-    children?: Snippet<[{
-        popover: PopoverBond;
-    }]>;
+    children?: PopoverChildren;
 }
 export interface AnimateParams {
     x: number;
@@ -50,14 +26,17 @@ export interface AnimateParams {
     yOffset: number;
     open: boolean;
 }
-export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends HtmlAtomProps<T, B>, PopoverContentExtendProps {
+export interface PopoverOverlayProps<E extends HtmlElementTagName = 'div', B extends Base = Base> extends TeleportProps<E, B, PopoverChildren> {
+    portal: string | PortalBond;
+    children?: PopoverChildren;
+}
+export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends HtmlAtomProps<T, B, PopoverChildren> {
+    overlay?: Component<PopoverOverlayProps>;
+    onclickoutside?: (ev: PointerEvent, atom: PopoverBond) => void;
 }
-export interface PopoverIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, PopoverIndicatorExtendProps {
+export interface PopoverIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, PopoverChildren> {
 }
-export interface PopoverArrowProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, PopoverArrowExtendProps {
+export interface PopoverArrowProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, PopoverChildren> {
 }
-export interface PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> extends HtmlAtomProps<T, B>, PopoverTriggerExtendProps {
-    children?: Snippet<[{
-        popover?: PopoverBond;
-    }]>;
+export interface PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> extends HtmlAtomProps<T, B, PopoverChildren> {
 }

package/dist/components/portal/active-portal.svelte

@@ -13,10 +13,13 @@
 		return portal as PortalBond;
 	});
 
+	
 	if (!portalsBond) {
 		throw new Error('Portals bond is not found');
 	}
-
+	
+	const content = $derived(activePortal ? proxy : undefined);
+	
 	function proxy(...args: any[]) {
 		activePortal?.share();
 
@@ -24,6 +27,4 @@
 	}
 </script>
 
-{#if activePortal}
-	{@render proxy?.()}
-{/if}
+{@render content?.()}

package/dist/components/portal/bond.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Bond, BondState, type BondElements, type BondStateProps } from '../../shared/bond.svelte.js';
+import { Bond, BondState, BondAtom, type BondElements, type BondStateProps } from '../../shared/bond.svelte';
 export type PortalStateProps = BondStateProps & {
     id: string;
     readonly rest?: Record<string, unknown>;
@@ -7,17 +7,21 @@ export type PortalElements = BondElements & {
     root?: HTMLElement;
     inner?: HTMLElement;
 };
+export declare class PortalRootAtom extends BondAtom<PortalBond, HTMLElement> {
+    constructor(bond: PortalBond);
+    get attrs(): {
+        id: string;
+    };
+}
+export declare class PortalInnerAtom extends BondAtom<PortalBond, HTMLElement> {
+    constructor(bond: PortalBond);
+}
 export declare class PortalBond extends Bond<PortalStateProps, PortalState, PortalElements> {
     static CONTEXT_KEY: string;
     constructor(atom: PortalState);
     get targetElement(): HTMLElement | undefined;
-    root(props?: Record<string, unknown>): {
-        id: string;
-        'data-kind': string;
-    };
-    inner(props?: Record<string, unknown>): {
-        'data-kind': string;
-    };
+    root(): PortalRootAtom;
+    inner(): PortalInnerAtom;
     share(): this;
     destroy(): void;
     static get(): PortalBond | undefined;

package/dist/components/portal/bond.svelte.js

@@ -1,44 +1,42 @@
-import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte.js';
-const PORTAL_ELEMENTS_KIND = {
-    root: 'portal-root',
-    inner: 'portal-inner'
-};
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+export class PortalRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            id: this.bond.id
+        };
+    }
+}
+export class PortalInnerAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'inner');
+    }
+}
 export class PortalBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/portal';
     constructor(atom) {
-        super(atom);
+        super(atom, 'portal');
     }
     get targetElement() {
-        return this.elements.inner ?? this.elements.root;
+        return this.element('inner') ?? this.element('root');
     }
-    root(props = {}) {
-        return {
-            id: this.id,
-            'data-kind': PORTAL_ELEMENTS_KIND.root,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
+    root() {
+        return this.atom('root', () => new PortalRootAtom(this));
     }
-    inner(props = {}) {
-        return {
-            'data-kind': PORTAL_ELEMENTS_KIND.inner,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.inner = node;
-            }
-        };
+    inner() {
+        return this.atom('inner', () => new PortalInnerAtom(this));
     }
     share() {
         return PortalBond.set(this);
     }
     destroy() {
         super.destroy();
-        this.elements.inner?.remove();
-        this.elements.root?.remove();
+        this.element('inner')?.remove();
+        this.element('root')?.remove();
     }
     static get() {
         return getContext(PortalBond.CONTEXT_KEY);

package/dist/components/portal/index.d.ts

@@ -3,6 +3,7 @@ export * as Portal from './atoms';
 export { PortalBond, PortalState, type PortalStateProps } from './bond.svelte';
 export { portal } from './attachements.svelte';
 export { port } from './utils';
+export { ZLayer, LAYER_BASE, type LayerName } from './zlayer.svelte';
 export { default as ActivePortal } from './active-portal.svelte';
 export { default as Teleport } from './teleport.svelte';
 export * from './portals';

package/dist/components/portal/index.js

@@ -3,6 +3,7 @@ export * as Portal from './atoms';
 export { PortalBond, PortalState } from './bond.svelte';
 export { portal } from './attachements.svelte';
 export { port } from './utils';
+export { ZLayer, LAYER_BASE } from './zlayer.svelte';
 export { default as ActivePortal } from './active-portal.svelte';
 export { default as Teleport } from './teleport.svelte';
 export * from './portals';

package/dist/components/portal/portal-inner.svelte

@@ -15,17 +15,11 @@
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const bondProps = $derived({
-		...bond?.inner(),
+		...bond?.inner().spread,
 		...restProps
 	});
 </script>
@@ -34,12 +28,6 @@
 	{bond}
 	preset="portal.inner"
 	class={['border-border relative size-full', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
 	{...bondProps}
 >
 	{@render children?.()}

package/dist/components/portal/portal-inner.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>>;
+    props: HtmlAtomProps<E, B, import("svelte").Snippet<[]>> & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";
     slots: {};