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

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

@@ -0,0 +1,50 @@
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
+export type StackStateProps = BondStateProps & {
+    value?: string;
+    readonly rest?: Record<string, unknown>;
+};
+export type StackElements = {
+    root?: HTMLElement;
+};
+export declare class StackRootAtom extends BondAtom<StackBond> {
+    constructor(bond: StackBond);
+    get attrs(): {
+        'data-atom': string;
+        'data-kind': string;
+    };
+}
+export declare class StackItemAtom extends BondAtom<StackBond> {
+    #private;
+    constructor(bond: StackBond, value: string);
+    get attrs(): {
+        'data-atom': string;
+        'data-kind': string;
+        'data-stack-item': string;
+        style: string;
+    };
+}
+export declare class StackBond extends Bond<StackStateProps, StackState, StackElements> {
+    static CONTEXT_KEY: string;
+    constructor(state: StackState);
+    share(): this;
+    root(): StackRootAtom;
+    item(value: string): StackItemAtom;
+    static get(): StackBond | undefined;
+    static set(bond: StackBond): StackBond;
+}
+export declare class StackState extends BondState<StackStateProps> {
+    #private;
+    constructor(props: () => StackStateProps);
+    register(value: string): void;
+    unregister(value: string): void;
+    raise(value: string): void;
+    bringToFront(value: string): void;
+    sendToBack(value: string): void;
+    bringForward(value: string): void;
+    sendBackward(value: string): void;
+    getZIndex(value: string): number;
+    get items(): {
+        id: string;
+        index: number;
+    }[];
+}

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

@@ -0,0 +1,174 @@
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+import { getContext, setContext, tick, untrack } from 'svelte';
+export class StackRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            'data-atom': this.bond.id ?? '',
+            'data-kind': 'stack-root'
+        };
+    }
+}
+export class StackItemAtom extends BondAtom {
+    #value;
+    constructor(bond, value) {
+        super(bond, `item-${value}`);
+        this.#value = value;
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            'data-atom': this.bond.id ?? '',
+            'data-kind': 'stack-item',
+            'data-stack-item': this.#value,
+            style: `z-index: ${this.bond.state.getZIndex(this.#value)}`
+        };
+    }
+}
+export class StackBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/stack';
+    constructor(state) {
+        super(state);
+    }
+    share() {
+        return StackBond.set(this);
+    }
+    root() {
+        return this.atom('root', () => new StackRootAtom(this));
+    }
+    item(value) {
+        return this.atom(`item-${value}`, () => new StackItemAtom(this, value));
+    }
+    static get() {
+        return getContext(StackBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(StackBond.CONTEXT_KEY, bond);
+    }
+}
+export class StackState extends BondState {
+    #order = $state([]);
+    constructor(props) {
+        super(props);
+    }
+    register(value) {
+        const order = untrack(() => this.#order);
+        if (!order.find((item) => item.id === value)) {
+            // Start z-index at 1 so items are always above the stacking context baseline
+            this.#order = [...order, { id: value, index: order.length + 1 }];
+        }
+    }
+    unregister(value) {
+        const order = untrack(() => this.#order);
+        tick().then(() => {
+            this.#order = order.filter((i) => i.id !== value);
+        });
+    }
+    raise(value) {
+        this.bringToFront(value);
+    }
+    bringToFront(value) {
+        const order = untrack(() => this.#order);
+        const item = order.find((item) => item.id === value);
+        if (!item)
+            return;
+        const newOrder = [...order]
+            .sort((a, b) => {
+            if (a.id === value)
+                return 1;
+            if (b.id === value)
+                return -1;
+            return a.index - b.index;
+        })
+            .map((item, i) => ({ ...item, index: i + 1 }));
+        this.#order = newOrder;
+        // Update value to the new top item
+        const topValue = newOrder.at(-1)?.id;
+        if (topValue) {
+            this.props.value = topValue;
+        }
+    }
+    sendToBack(value) {
+        const order = untrack(() => this.#order);
+        const item = order.find((item) => item.id === value);
+        if (!item)
+            return;
+        const newOrder = [...order]
+            .sort((a, b) => {
+            if (a.id === value)
+                return -1;
+            if (b.id === value)
+                return 1;
+            return a.index - b.index;
+        })
+            .map((item, i) => ({ ...item, index: i + 1 }));
+        this.#order = newOrder;
+        // Update value to the new top item
+        const topValue = newOrder.at(-1)?.id;
+        if (topValue) {
+            this.props.value = topValue;
+        }
+    }
+    bringForward(value) {
+        const order = untrack(() => this.#order);
+        const item = order.find((i) => i.id === value);
+        if (!item)
+            return;
+        const sortedOrder = [...order].sort((a, b) => a.index - b.index);
+        const currentIndex = sortedOrder.findIndex((i) => i.id === value);
+        const neighbor = sortedOrder[currentIndex + 1];
+        if (!neighbor)
+            return;
+        const newOrder = [...order]
+            .sort((a, b) => {
+            if (a.id === value && b.id === neighbor.id)
+                return 1;
+            if (a.id === neighbor.id && b.id === value)
+                return -1;
+            return a.index - b.index;
+        })
+            .map((item, i) => ({ ...item, index: i + 1 }));
+        this.#order = newOrder;
+        // Update value to the new top item
+        const topValue = newOrder.at(-1)?.id;
+        if (topValue) {
+            this.props.value = topValue;
+        }
+    }
+    sendBackward(value) {
+        const order = untrack(() => this.#order);
+        const item = order.find((i) => i.id === value);
+        if (!item)
+            return;
+        const sortedOrder = [...order].sort((a, b) => a.index - b.index);
+        const currentIndex = sortedOrder.findIndex((i) => i.id === value);
+        const neighbor = sortedOrder[currentIndex - 1];
+        if (!neighbor)
+            return;
+        const newOrder = [...order]
+            .sort((a, b) => {
+            if (a.id === value && b.id === neighbor.id)
+                return -1;
+            if (a.id === neighbor.id && b.id === value)
+                return 1;
+            return a.index - b.index;
+        })
+            .map((item, i) => ({ ...item, index: i + 1 }));
+        this.#order = newOrder;
+        // Update value to the new top item
+        const topValue = newOrder.at(-1)?.id;
+        if (topValue) {
+            this.props.value = topValue;
+        }
+    }
+    getZIndex(value) {
+        const item = this.#order.find((item) => item.id === value);
+        return item ? item.index : 0;
+    }
+    get items() {
+        return this.#order;
+    }
+}

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

@@ -1 +1,3 @@
+export * from './types';
 export * as Stack from './atoms';
+export { StackBond, StackState, type StackStateProps, type StackElements } from './bond.svelte';

package/dist/components/stack/index.js

@@ -1 +1,3 @@
+export * from './types';
 export * as Stack from './atoms';
+export { StackBond, StackState } from './bond.svelte';

package/dist/components/stack/stack-item.svelte

@@ -1,13 +1,49 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { StackBond } from './bond.svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ElementType } from '../atom';
 
-	let { class: klass = '', children, ...restProps } = $props();
+	type Element = ElementType<E>;
+
+	const bond = StackBond.get();
+
+	if (!bond) {
+		throw new Error('Stack.Item must be used within a Stack.Root component.');
+	}
+
+	let {
+		class: klass = '',
+		value,
+		children,
+		style: userStyle = '',
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> & { value: string } = $props();
+
+	$effect.pre(() => {
+		if(!bond) return;
+
+		bond.state.register(value)
+
+		return () => {
+			bond.state.unregister(value)
+		};
+	});
+
+	const zIndex = $derived(bond?.state.getZIndex(value) ?? 0);
+
+	const itemProps = $derived({
+		...bond?.item(value).spread,
+		...restProps,
+		// Merge user style with z-index from atom
+		style: userStyle ? `${userStyle}; z-index: ${zIndex}` : `z-index: ${zIndex}`
+	});
 </script>
 
 <HtmlAtom
 	preset="stack.item"
-	class={['stack-item border-border flex flex-1', '$preset', klass]}
-	{...restProps}
+	class={['stack-item', '$preset', klass]}
+	{...itemProps}
 >
 	{@render children?.()}
 </HtmlAtom>

package/dist/components/stack/stack-item.svelte.d.ts

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

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

@@ -1,4 +1,5 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { untrack } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		HtmlAtom,
@@ -6,22 +7,50 @@
 		type HtmlAtomProps,
 		type Base
 	} from '../atom';
-
+	import { defineProperty, defineState } from '../../utils';
+	import { StackBond, StackState } from './bond.svelte';
 	import './stack.css';
 
 	type Element = ElementType<E>;
 
 	let {
+		value = $bindable<string | undefined>(undefined),
 		class: klass = '',
+		factory = _factory,
 		children,
 		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> & { factory?: typeof _factory } = $props();
+
+	const bondProps = defineState([
+		defineProperty(
+			'value',
+			() => value,
+			(v) => { value = v; }
+		)
+	]);
+
+	const bond = untrack(()=> factory(bondProps)).share();
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new StackState(() => props);
+		return new StackBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
 </script>
 
 <HtmlAtom
 	preset="stack.root"
-	class={['stack-root border-border flex flex-1', '$preset', klass]}
-	{...restProps}
+	{bond}
+	class={['stack-root', '$preset', klass]}
+	{...rootProps}
 >
 	{@render children?.()}
 </HtmlAtom>

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

@@ -1,10 +1,17 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
+import { StackBond } from './bond.svelte';
 import './stack.css';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>>;
-    exports: {};
-    bindings: "";
+    props: HtmlAtomProps<E, B, import("svelte").Snippet<[]>> & HTMLAttributes<ElementType<E>> & {
+        factory?: (props: {
+            [x: string]: /*elided*/ any;
+        }) => StackBond;
+    };
+    exports: {
+        getBond: () => StackBond;
+    };
+    bindings: "value";
     slots: {};
     events: {};
 };
@@ -12,8 +19,10 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
-    bindings(): "";
-    exports(): {};
+    bindings(): "value";
+    exports(): {
+        getBond: () => StackBond;
+    };
 }
 interface $$IsomorphicComponent {
     new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {

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

@@ -1,12 +1,13 @@
-import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom stack properties in your application.
- */
-export interface StackExtendProps {
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+import type { Snippet } from 'svelte';
+export interface StackSnippetProps extends SnippetProps {
 }
-export interface StackProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, StackExtendProps {
-    direction?: 'row' | 'column';
-    gap?: number | string;
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type StackChildren = Snippet<[StackSnippetProps]>;
+export interface StackRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StackChildren> {
+    /** The value of the topmost (front) item — bindable, updates reactively */
+    value?: string;
+}
+export interface StackItemProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, StackChildren> {
+    /** Unique identifier for this stack item */
+    value: string;
 }

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

@@ -1,5 +1,5 @@
 import type { StepBond } from './step/bond.svelte';
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 import type { Snippet } from 'svelte';
 export type StepperStateProps = BondStateProps & {
     step: number;
@@ -15,16 +15,17 @@ export type StepContentSnippet = {
         step?: StepBond;
     }]>;
 };
+export declare class StepperRootAtom extends BondAtom<StepperBond> {
+    constructor(bond: StepperBond);
+    get attrs(): {
+        role: "group";
+    };
+}
 export declare class StepperBond extends Bond<StepperStateProps, StepperState, StepperElements> {
     static CONTEXT_KEY: string;
     constructor(s: StepperState);
     share(): this;
-    root(): {
-        [x: symbol]: (node: HTMLElement) => void;
-        'data-atom': string;
-        id: string;
-        role: string;
-    };
+    root(): StepperRootAtom;
     static get(): StepperBond | undefined;
     static set(bond: StepperBond): StepperBond;
 }

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

@@ -1,24 +1,27 @@
 import { SvelteMap } from 'svelte/reactivity';
-import { createAttachmentKey } from 'svelte/attachments';
-import { Bond, BondState } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
 import { getContext, setContext } from 'svelte';
+export class StepperRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            role: 'group'
+        };
+    }
+}
 export class StepperBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/stepper';
     constructor(s) {
-        super(s);
+        super(s, 'stepper');
     }
     share() {
         return StepperBond.set(this);
     }
     root() {
-        return {
-            'data-atom': this.id ?? '',
-            id: `stepper-${this.id}`,
-            role: 'group',
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
+        return this.atom('root', () => new StepperRootAtom(this));
     }
     static get() {
         return getContext(StepperBond.CONTEXT_KEY);