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

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

@@ -0,0 +1,180 @@
+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);
+        $effect(() => {
+            const value = this.props.value;
+            if (value) {
+                untrack(() => this.bringToFront(value));
+            }
+        });
+    }
+    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,53 @@
 <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}`
+	});
+
+	const isActive = $derived(bond?.state.props.value === value);
 </script>
 
 <HtmlAtom
 	preset="stack.item"
-	class={['stack-item border-border flex flex-1', '$preset', klass]}
-	{...restProps}
+	class={['stack-item', '$preset', klass]}
+	data-value={value}
+	data-active={isActive}
+	{...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);

package/dist/components/stepper/step/README.md

@@ -1,97 +1,97 @@
-# Step
-
-The Step component represents an individual step within a Stepper workflow. It manages its own state (active, completed, disabled, optional) and provides a composable structure for building step indicators, headers, and content.
-
-## Usage
-
-Steps are typically used within a `Stepper.Root` component to create multi-step workflows. Each step can display an indicator, title, description, and content.
-
-```svelte
-<script>
-  import { Stepper, Step } from '@svelte-atoms/core';
-</script>
-
-<Stepper.Root>
-  <Step.Root index={0} header="Account Setup" body="Create your account">
-    {#snippet children({ step })}
-      <Step.Header>
-        <Step.Indicator />
-        <Step.Separator />
-        
-        <div>
-          <Step.Title>Account Setup</Step.Title>
-          <Step.Description>Create your account</Step.Description>
-        </div>
-      </Step.Header>
-      
-      <Step.Body>
-        <!-- Step content goes here -->
-      </Step.Body>
-    {/snippet}
-  </Step.Root>
-</Stepper.Root>
-```
-
-## Components
-
-### Step.Root
-
-The root container for a step. Manages step state and provides context to child components.
-
-**Props:**
-- `index` - Step index in the stepper sequence
-- `header` - Step header text
-- `body` - Step body/description text
-- `optional` - Whether the step is optional
-- `disabled` - Whether the step is disabled
-
-### Step.Header
-
-Container for the step's header section, typically containing the indicator, title, and description.
-
-### Step.Indicator
-
-Visual indicator showing the step's state (number, icon, checkmark for completed steps).
-
-### Step.Separator
-
-Visual separator line between step indicators, typically used in horizontal steppers.
-
-### Step.Title
-
-The main title/label for the step.
-
-### Step.Description
-
-Secondary description or subtitle for the step.
-
-### Step.Body
-
-Container for the step's main content area. This content is rendered when the step is active.
-
-## Step States
-
-Each step can be in one of several states:
-
-- **Active** - Currently visible/selected step
-- **Completed** - Step that has been completed
-- **Disabled** - Step that cannot be accessed
-- **Optional** - Step that can be skipped
-- **Pending** - Step that hasn't been reached yet
-
-## Integration
-
-Steps work seamlessly with the Stepper component's navigation system. The step's state is automatically managed based on the active step index and user interactions.
-
-```svelte
-<Step.Root index={0}>
-  {#snippet children({ step })}
-    {@const isActive = step?.state?.isActive}
-    {@const isCompleted = step?.state?.isCompleted}
-    
-    <Step.Title class={isActive ? 'font-bold' : ''}>
-      Step 1
-    </Step.Title>
-  {/snippet}
-</Step.Root>
-```
+# Step
+
+The Step component represents an individual step within a Stepper workflow. It manages its own state (active, completed, disabled, optional) and provides a composable structure for building step indicators, headers, and content.
+
+## Usage
+
+Steps are typically used within a `Stepper.Root` component to create multi-step workflows. Each step can display an indicator, title, description, and content.
+
+```svelte
+<script>
+  import { Stepper, Step } from '@svelte-atoms/core';
+</script>
+
+<Stepper.Root>
+  <Step.Root index={0} header="Account Setup" body="Create your account">
+    {#snippet children({ step })}
+      <Step.Header>
+        <Step.Indicator />
+        <Step.Separator />
+        
+        <div>
+          <Step.Title>Account Setup</Step.Title>
+          <Step.Description>Create your account</Step.Description>
+        </div>
+      </Step.Header>
+      
+      <Step.Body>
+        <!-- Step content goes here -->
+      </Step.Body>
+    {/snippet}
+  </Step.Root>
+</Stepper.Root>
+```
+
+## Components
+
+### Step.Root
+
+The root container for a step. Manages step state and provides context to child components.
+
+**Props:**
+- `index` - Step index in the stepper sequence
+- `header` - Step header text
+- `body` - Step body/description text
+- `optional` - Whether the step is optional
+- `disabled` - Whether the step is disabled
+
+### Step.Header
+
+Container for the step's header section, typically containing the indicator, title, and description.
+
+### Step.Indicator
+
+Visual indicator showing the step's state (number, icon, checkmark for completed steps).
+
+### Step.Separator
+
+Visual separator line between step indicators, typically used in horizontal steppers.
+
+### Step.Title
+
+The main title/label for the step.
+
+### Step.Description
+
+Secondary description or subtitle for the step.
+
+### Step.Body
+
+Container for the step's main content area. This content is rendered when the step is active.
+
+## Step States
+
+Each step can be in one of several states:
+
+- **Active** - Currently visible/selected step
+- **Completed** - Step that has been completed
+- **Disabled** - Step that cannot be accessed
+- **Optional** - Step that can be skipped
+- **Pending** - Step that hasn't been reached yet
+
+## Integration
+
+Steps work seamlessly with the Stepper component's navigation system. The step's state is automatically managed based on the active step index and user interactions.
+
+```svelte
+<Step.Root index={0}>
+  {#snippet children({ step })}
+    {@const isActive = step?.state?.isActive}
+    {@const isCompleted = step?.state?.isCompleted}
+    
+    <Step.Title class={isActive ? 'font-bold' : ''}>
+      Step 1
+    </Step.Title>
+  {/snippet}
+</Step.Root>
+```