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

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

@@ -1,65 +1,53 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { LayerBond, LayerBondState } from './bond.svelte';
-	import { RootBond } from '../root/bond.svelte';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-	import { defineProperty, defineState } from '../../utils';
-
-	type Element = ElementType<E>;
-
-	const rootAtom = RootBond.get();
-
-	let {
-		class: klass = '',
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
-
-	if (!rootAtom) {
-		throw new Error('Root atom is not found');
-	}
-
-	const bondProps = defineState([defineProperty('rest', () => restProps)], () => ({}));
-
-	const bond = factory().share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const layerAtomState = new LayerBondState(() => props);
-		return new LayerBond(layerAtomState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	preset="layer"
-	class={['pointer-events-none absolute inset-0', '$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 lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { LayerBond, LayerBondState } from './bond.svelte';
+	import { RootBond } from '../root/bond.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { defineProperty, defineState } from '../../utils';
+
+	type Element = ElementType<E>;
+
+	const rootAtom = RootBond.get();
+
+	let {
+		class: klass = '',
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	if (!rootAtom) {
+		throw new Error('Root atom is not found');
+	}
+
+	const bondProps = defineState([defineProperty('rest', () => restProps)], () => ({}));
+
+	const bond = factory().share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const layerAtomState = new LayerBondState(() => props);
+		return new LayerBond(layerAtomState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	preset="layer"
+	class={['pointer-events-none absolute inset-0', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/layer/layer-root.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: {
         getBond: () => any;
     };

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

@@ -1,11 +1,11 @@
-import type { HtmlAtomProps, Base } from '../atom';
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Factory } from '../../types';
 import type { LayerBond } from './bond.svelte';
-/**
- * Extend this interface to add custom layer properties in your application.
- */
-export interface LayerExtendProps {
+export interface LayerSnippetProps extends SnippetProps {
+    layer: LayerBond;
 }
-export interface LayerRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, LayerExtendProps {
+export type LayerChildren = Snippet<[LayerSnippetProps]>;
+export interface LayerRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, LayerChildren> {
     factory?: Factory<LayerBond>;
 }

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

@@ -1 +1,2 @@
 export { default as Lazy } from './lazy.svelte';
+export type { LazySnippetProps, LazyChildren } from './types';

package/dist/components/lazy/lazy.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import { untrack, type Component } from 'svelte';
-	import type { LazyProps } from './types';
-
-	let { promise, children, loading, error, ...restProps }: LazyProps = $props();
-
-	let Lazy: Component | null = $state(null);
-
-	let err = $state();
-
-	untrack(() => promise
-		.then((c) => {
-			Lazy = c;
-		})
-		.catch((r) => {
-			err = r;
-		}
-	));
-</script>
-
-<Lazy {...restProps}>
-	{@render children?.()}
-</Lazy>
-
-{#if err && error}
-	{@render error?.(err)}
-{:else if !Lazy}
-	{@render loading?.()}
-{/if}
+<script lang="ts">
+	import { untrack, type Component } from 'svelte';
+	import type { LazyProps } from './types';
+
+	let { promise, children, loading, error, ...restProps }: LazyProps = $props();
+
+	let Lazy: Component | null = $state(null);
+
+	let err = $state();
+
+	untrack(() => promise
+		.then((c) => {
+			Lazy = c;
+		})
+		.catch((r) => {
+			err = r;
+		}
+	));
+</script>
+
+<Lazy {...restProps}>
+	{@render children?.()}
+</Lazy>
+
+{#if err && error}
+	{@render error?.(err)}
+{:else if !Lazy}
+	{@render loading?.()}
+{/if}

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

@@ -1,10 +1,10 @@
 import type { Component, Snippet } from 'svelte';
-import type { HtmlAtomProps } from '../atom';
-export interface LazyExtendProps {
+import type { HtmlAtomProps, SnippetProps } from '../atom';
+export interface LazySnippetProps extends SnippetProps {
 }
-export interface LazyProps extends HtmlAtomProps<'button'>, LazyExtendProps {
+export type LazyChildren = Snippet<[LazySnippetProps]>;
+export interface LazyProps extends HtmlAtomProps<'button', never, LazyChildren> {
     promise: Promise<Component>;
-    children?: Snippet;
     error?: Snippet<[error: unknown]>;
     loading?: Snippet;
 }

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

@@ -1 +1,2 @@
 export { default as Link } from './link.svelte';
+export type { LinkSnippetProps, LinkChildren } from './types';

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

@@ -1,8 +1,7 @@
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom link properties in your application.
- */
-export interface LinkExtendProps {
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+export interface LinkSnippetProps extends SnippetProps {
 }
-export interface LinkProps<E extends keyof HTMLElementTagNameMap = 'a', B extends Base = Base> extends HtmlAtomProps<E, B>, LinkExtendProps {
+export type LinkChildren = Snippet<[LinkSnippetProps]>;
+export interface LinkProps<E extends keyof HTMLElementTagNameMap = 'a', B extends Base = Base> extends HtmlAtomProps<E, B, LinkChildren> {
 }

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

@@ -1 +1,2 @@
 export * as List from './atoms';
+export type { ListSnippetProps, ListChildren } from './types';

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

@@ -1,8 +1,7 @@
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom list properties in your application.
- */
-export interface ListExtendProps {
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+export interface ListSnippetProps extends SnippetProps {
 }
-export interface ListRootProps<E extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base> extends HtmlAtomProps<E, B>, ListExtendProps {
+export type ListChildren = Snippet<[ListSnippetProps]>;
+export interface ListRootProps<E extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base> extends HtmlAtomProps<E, B, ListChildren> {
 }

package/dist/components/menu/atoms.d.ts

@@ -1,9 +1,4 @@
-export { default as Root } from './menu-root.svelte';
-export { default as Content } from './menu-content.svelte';
 /**
- * @deprecated Use Menu.Content instead
+ * @deprecated Import from `dropdown-menu` instead. This module will be removed in a future version.
  */
-export { default as List } from './menu-content.svelte';
-export { default as Item } from './item/menu-item.svelte';
-export { Trigger, Arrow, Indicator } from '../popover/atoms';
-export { Divider, Group, Title } from '../list/atoms';
+export * from '../dropdown-menu/atoms';

package/dist/components/menu/atoms.js

@@ -1,9 +1,4 @@
-export { default as Root } from './menu-root.svelte';
-export { default as Content } from './menu-content.svelte';
 /**
- * @deprecated Use Menu.Content instead
+ * @deprecated Import from `dropdown-menu` instead. This module will be removed in a future version.
  */
-export { default as List } from './menu-content.svelte';
-export { default as Item } from './item/menu-item.svelte';
-export { Trigger, Arrow, Indicator } from '../popover/atoms';
-export { Divider, Group, Title } from '../list/atoms';
+export * from '../dropdown-menu/atoms';

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

@@ -1,5 +1,6 @@
 import { PopoverBond, PopoverState, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
 import type { MenuItemControllerInterface } from './item/controller.svelte';
+import type { MenuItemAtom } from './item/bond.svelte';
 export type MenuBondProps = PopoverStateProps;
 export type MenuBondElements = PopoverDomElements;
 export declare class MenuBond<Props extends MenuBondProps = MenuBondProps, State extends MenuBondState<Props> = MenuBondState<Props>, Elements extends MenuBondElements = MenuBondElements> extends PopoverBond<Props, State, Elements> {
@@ -9,27 +10,10 @@ export declare class MenuBond<Props extends MenuBondProps = MenuBondProps, State
         'aria-activedescendant': string | undefined;
         'aria-orientation': "vertical";
         onkeydown: (ev: KeyboardEvent) => void;
-        id: string;
-        'aria-modal': boolean;
-        'aria-labelledby': string;
-        inert: boolean | undefined;
-        tabindex: number;
-        'data-atom': string;
-        'data-kind': string;
-        'data-active': boolean;
     };
     trigger(): {
         'aria-haspopup': "menu";
         onkeydown: (ev: KeyboardEvent) => void;
-        id: string;
-        role: string;
-        disabled: boolean | undefined;
-        tabindex: number;
-        'aria-expanded': boolean;
-        'aria-disabled': boolean;
-        'aria-controls': string;
-        'data-kind': string;
-        onclick: (ev: PointerEvent) => void;
     };
     item(): {
         role: string;
@@ -41,14 +25,16 @@ export declare class MenuBond<Props extends MenuBondProps = MenuBondProps, State
 export declare class MenuBondState<Props extends MenuBondProps = MenuBondProps> extends PopoverState<Props> {
     #private;
     constructor(props: () => Props);
-    get items(): Map<string, MenuItemControllerInterface<Record<string, any>>>;
+    get items(): Map<string, MenuItemControllerInterface<Record<string, any>> | MenuItemAtom<MenuBond<PopoverStateProps, MenuBondState<PopoverStateProps>, PopoverDomElements>>>;
     get highlightedId(): string | null;
-    get highlightedItem(): MenuItemControllerInterface<Record<string, any>> | null;
+    get highlightedItem(): MenuItemControllerInterface<Record<string, any>> | MenuItemAtom<MenuBond<PopoverStateProps, MenuBondState<PopoverStateProps>, PopoverDomElements>> | null;
     get navigation(): {
-        next: () => MenuItemControllerInterface<Record<string, any>> | null;
-        previous: () => MenuItemControllerInterface<Record<string, any>> | null;
+        next: () => MenuItemControllerInterface<Record<string, any>> | MenuItemAtom<MenuBond<PopoverStateProps, MenuBondState<PopoverStateProps>, PopoverDomElements>> | null;
+        previous: () => MenuItemControllerInterface<Record<string, any>> | MenuItemAtom<MenuBond<PopoverStateProps, MenuBondState<PopoverStateProps>, PopoverDomElements>> | null;
     };
-    mountItem(id: string, item: MenuItemControllerInterface<Record<string, any>>): () => void;
+    mountItem(id: string, item: MenuItemControllerInterface<Record<string, any>> | MenuItemAtom): () => void;
     unmountItem(id: string): void;
-    item(id: string): MenuItemControllerInterface<Record<string, any>> | undefined;
+    item(id: string): MenuItemControllerInterface<Record<string, any>> | MenuItemAtom<MenuBond<PopoverStateProps, MenuBondState<PopoverStateProps>, PopoverDomElements>> | undefined;
+    registerItem(id: string, atom: MenuItemAtom): void;
+    unregisterItem(id: string): void;
 }

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

@@ -131,4 +131,10 @@ export class MenuBondState extends PopoverState {
     item(id) {
         return this.#items.get(id);
     }
+    registerItem(id, atom) {
+        this.#items.set(id, atom);
+    }
+    unregisterItem(id) {
+        this.#items.delete(id);
+    }
 }

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

@@ -1,5 +1,41 @@
-export * as Menu from './atoms';
-export * from './types';
-export { PopoverBond, type PopoverDomElements, type PopoverParams, PopoverState, type PopoverStateProps, type TriggerParams } from '../popover';
-export type { AnimatePopoverContentParams as AnimateMenuContentParams, animatePopoverContent as animateMenuContent } from '../popover/motion';
+/**
+ * @deprecated Import from `dropdown-menu` instead. This module will be removed in a future version.
+ */
+export { 
+/**
+ * @deprecated Use `DropdownMenu` instead.
+ */
+DropdownMenu as Menu } from '../dropdown-menu';
+export { 
+/**
+ * @deprecated Use `DropdownMenuBond` instead.
+ */
+DropdownMenuBond as MenuBond, 
+/**
+ * @deprecated Use `DropdownMenuBondState` instead.
+ */
+DropdownMenuBondState as MenuBondState, 
+/**
+ * @deprecated Use `DropdownMenuBondProps` instead.
+ */
+type DropdownMenuBondProps as MenuBondProps, 
+/**
+ * @deprecated Use `DropdownMenuBondElements` instead.
+ */
+type DropdownMenuBondElements as MenuBondElements } from '../dropdown-menu/bond.svelte';
+export { 
+/**
+ * @deprecated Use `dropdownMenu` instead.
+ */
+dropdownMenu as menu } from '../dropdown-menu/attachments.svelte';
+export type { 
+/**
+ * @deprecated Use `AnimateDropdownMenuContentParams` instead.
+ */
+AnimateDropdownMenuContentParams as AnimateMenuContentParams } from '../dropdown-menu';
+export type { 
+/**
+ * @deprecated Use `DropdownMenuListProps` instead.
+ */
+DropdownMenuListProps as MenuListProps } from '../dropdown-menu/types';
 export * from './item';

package/dist/components/menu/index.js

@@ -1,4 +1,27 @@
-export * as Menu from './atoms';
-export * from './types';
-export { PopoverBond, PopoverState } from '../popover';
+/**
+ * @deprecated Import from `dropdown-menu` instead. This module will be removed in a future version.
+ */
+// Namespace — DropdownMenu is the canonical export; Menu remains for backward compat
+export { 
+/**
+ * @deprecated Use `DropdownMenu` instead.
+ */
+DropdownMenu as Menu } from '../dropdown-menu';
+// Bond classes
+export { 
+/**
+ * @deprecated Use `DropdownMenuBond` instead.
+ */
+DropdownMenuBond as MenuBond, 
+/**
+ * @deprecated Use `DropdownMenuBondState` instead.
+ */
+DropdownMenuBondState as MenuBondState } from '../dropdown-menu/bond.svelte';
+// Attachment function
+export { 
+/**
+ * @deprecated Use `dropdownMenu` instead.
+ */
+dropdownMenu as menu } from '../dropdown-menu/attachments.svelte';
+// Item exports (already shimmed in item/index.ts)
 export * from './item';

package/dist/components/menu/item/bond.svelte.d.ts

@@ -0,0 +1,27 @@
+import { BondAtom } from '../../../shared/bond.svelte';
+import type { MenuBond } from '../bond.svelte';
+export type MenuItemAtomProps = {
+    id: string;
+    disabled?: boolean;
+};
+export declare class MenuItemAtom<B extends MenuBond = MenuBond> extends BondAtom<B, HTMLElement> {
+    #private;
+    constructor(props: () => MenuItemAtomProps, menuBond: B);
+    get id(): string;
+    get createdAt(): Date;
+    get props(): MenuItemAtomProps;
+    get isHighlighted(): boolean;
+    get attrs(): {
+        id: string;
+        role: string;
+        'data-highlighted': boolean;
+        'aria-disabled': boolean | undefined;
+        tabIndex: number;
+    };
+    get handlers(): {
+        onclick: () => void;
+    };
+    close(): void;
+    mount(): () => void;
+    unmount(): void;
+}

package/dist/components/menu/item/bond.svelte.js

@@ -0,0 +1,54 @@
+import { BondAtom } from '../../../shared/bond.svelte';
+import { nanoid } from 'nanoid';
+export class MenuItemAtom extends BondAtom {
+    #id;
+    #props;
+    #menuBond;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #createdAt = new Date();
+    constructor(props, menuBond) {
+        super(menuBond, `item-${props().id}`);
+        this.#props = props;
+        this.#menuBond = menuBond;
+        this.#id = props().id ?? nanoid();
+    }
+    get id() {
+        return this.#id;
+    }
+    get createdAt() {
+        return this.#createdAt;
+    }
+    get props() {
+        return this.#props();
+    }
+    get isHighlighted() {
+        return this.#menuBond.state.highlightedId === this.#id;
+    }
+    get attrs() {
+        const itemId = `menu-item-${this.#id}`;
+        return {
+            ...super.attrs,
+            id: itemId,
+            role: 'menuitem',
+            'data-highlighted': this.isHighlighted,
+            'aria-disabled': this.#props().disabled ? true : undefined,
+            tabIndex: this.#props().disabled ? -1 : 0
+        };
+    }
+    get handlers() {
+        return {
+            onclick: () => {
+                this.#menuBond?.state.close();
+            }
+        };
+    }
+    close() {
+        this.#menuBond?.state.close();
+    }
+    mount() {
+        return this.#menuBond?.state?.mountItem?.(this.#id, this);
+    }
+    unmount() {
+        // Items are unregistered via unmount hook
+    }
+}

package/dist/components/menu/item/controller.svelte.d.ts

@@ -22,7 +22,7 @@ export declare class MenuItemController implements MenuItemControllerInterface<M
     get createdAt(): Date;
     get props(): MenuItemControllerProps;
     get element(): HTMLElement | null;
-    get menu(): MenuBond<import("..").PopoverStateProps, MenuBondState<import("..").PopoverStateProps>, import("..").PopoverDomElements> | undefined;
+    get menu(): MenuBond<import("../..").PopoverStateProps, MenuBondState<import("../..").PopoverStateProps>, import("../..").PopoverDomElements> | undefined;
     get isHighlighted(): boolean;
     mount(): () => void;
     unmount(): void;

package/dist/components/menu/item/index.d.ts

@@ -1,2 +1,5 @@
-export { MenuItemController, type MenuItemControllerProps } from './controller.svelte';
-export * from './types';
+/**
+ * @deprecated Import from `dropdown-menu/item` instead. This module will be removed in a future version.
+ */
+export { DropdownMenuItemController as MenuItemController, type DropdownMenuItemControllerProps as MenuItemControllerProps, type DropdownMenuItemControllerInterface as MenuItemControllerInterface } from '../../dropdown-menu/item/controller.svelte';
+export type { DropdownMenuItemProps as MenuItemProps } from '../../dropdown-menu/item/types';

package/dist/components/menu/item/index.js

@@ -1,2 +1,4 @@
-export { MenuItemController } from './controller.svelte';
-export * from './types';
+/**
+ * @deprecated Import from `dropdown-menu/item` instead. This module will be removed in a future version.
+ */
+export { DropdownMenuItemController as MenuItemController } from '../../dropdown-menu/item/controller.svelte';