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

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 open = $derived(bond?.state.props.open);
+	const reference = $derived(bond?.element<BondVirtualElement>('virtual-trigger') ?? bond?.element<Element>('trigger'));
+	const content = $derived(bond?.element<HTMLElement>('content'));
+
+	$effect.pre(() => {
+		if (!(reference) || !content || !open) 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 || !content) {
+				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, content, {
+					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.position = {
+					middlewareData: position.middlewareData,
+					placement: position.placement,
+					strategy: position.strategy,
+					x,
+					y
+				};
+				onchangeCallback?.(content, position);
+
+				// Set minimum width to match trigger
+				if (reference && (reference instanceof Element)) {
+					requestAnimationFrame(() => {
+						content.style.minWidth = `${reference.clientWidth}px`;
+					});
+				}
+			};
+
+			// Use auto-update if provided, otherwise compute once
+			if (updater) {
+				return updater(reference, content, 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

@@ -5,32 +5,10 @@ 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 {
+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,12 @@ export interface AnimateParams {
     yOffset: number;
     open: boolean;
 }
-export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends HtmlAtomProps<T, B>, PopoverContentExtendProps {
+export interface PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> extends HtmlAtomProps<T, B, PopoverChildren> {
+    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

@@ -25,7 +25,7 @@
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 
 	const bondProps = $derived({
-		...bond?.inner(),
+		...bond?.inner().spread,
 		...restProps
 	});
 </script>

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: {};

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

@@ -1,76 +1,76 @@
-<script module lang="ts">
-	export type { PortalOuterProps } from './types';
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { PortalOuterProps } from './types';
-	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
-	import { RootBond } from '../root';
-	import { HtmlAtom, type ElementType, type Base } from '../atom';
-	import { defineProperty, defineState } from '../../utils';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		id,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const rootBond = RootBond.get();
-	const portalsBond = PortalsBond.get();
-
-	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id), defineProperty('rest', () => restProps)]);
-	const bond = factory(bondProps).share() as PortalBond;
-
-	portalsBond?.state.set(id, bond);
-
-	$effect(() => {
-		if (rootBond) {
-			rootBond.state.setPortal(id, bond);
-		}
-
-		return () => {
-			portalsBond?.state.delete(id);
-			bond.destroy();
-		};
-	});
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const portalState = new PortalState(() => props);
-		return new PortalBond(portalState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="portal"
-	class={['border-border pointer-events-none', '$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)}
-	{...rootProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script module lang="ts">
+	export type { PortalOuterProps } from './types';
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PortalOuterProps } from './types';
+	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
+	import { RootBond } from '../root';
+	import { HtmlAtom, type ElementType, type Base } from '../atom';
+	import { defineProperty, defineState } from '../../utils';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		id,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const rootBond = RootBond.get();
+	const portalsBond = PortalsBond.get();
+
+	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id), defineProperty('rest', () => restProps)]);
+	const bond = factory(bondProps).share() as PortalBond;
+
+	portalsBond?.state.set(id, bond);
+
+	$effect(() => {
+		if (rootBond) {
+			rootBond.state.setPortal(id, bond);
+		}
+
+		return () => {
+			portalsBond?.state.delete(id);
+			bond.destroy();
+		};
+	});
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const portalState = new PortalState(() => props);
+		return new PortalBond(portalState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="portal"
+	class={['border-border pointer-events-none', '$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)}
+	{...rootProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 import { PortalBond } from '.';
 import { type ElementType, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: import("../atom").HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
+    props: import("../atom").HtmlAtomProps<E, B, import("./types").PortalChildren> & {
         id: import("../root/root.svelte").RootPortals | (string & {});
         children?: import("svelte").Snippet;
     } & HTMLAttributes<ElementType<E>>;

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

@@ -1,5 +1,5 @@
-import type { PortalBond } from '../bond.svelte.js';
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte.js';
+import type { PortalBond } from '../bond.svelte';
+import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
 export type PortalsStateProps = BondStateProps & {
     id: string;
 };

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

@@ -1,10 +1,10 @@
 import { SvelteMap } from 'svelte/reactivity';
 import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../../shared/bond.svelte.js';
+import { Bond, BondState } from '../../../shared/bond.svelte';
 export class PortalsBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/portals';
     constructor(bond) {
-        super(bond);
+        super(bond, 'portals');
     }
     share() {
         return PortalsBond.set(this);