need help getting component to work

[JonathonRP]

this is the component I am working on, and seems to not be working as expected.

the point props should be a store updated by the style that is subscribed to by useTransfom and be returning a store as well.

Also effect doesn't seem to be firing every value change of subscriped value

repo: https://stackblitz.com/edit/sveltejs-kit-template-default-nsfarh?file=src%2Flib%2Fcomponents%2FReorder%2FItem.svelte

<svelte:options runes={true} />

<script lang="ts" generics="V">
	import type { SvelteHTMLElements } from 'svelte/elements';

	import type { Snippet } from 'svelte';
	import type { ForwardMotionProps } from '$lib/animations';

	import { Motion, useMotionValue, useTransform } from 'svelte-motion';
	import { getContext } from 'svelte';

	import { invariant, isMotionValue } from './utils.svelte';
	import type { ReorderContextProps } from './types';

	type Props<V> = {
		/**
		 * A HTML element to render this component as. Defaults to `"li"`.
		 *
		 * @public
		 */
		as?: keyof SvelteHTMLElements;

		/**
		 * The value in the list that this component represents.
		 *
		 * @public
		 */
		value: V;

		/**
		 * A subset of layout options primarily used to disable layout="size"
		 *
		 * @public
		 * @default true
		 */
		layout?: true | 'position';
	};

	const {
		children,
		value,
		as = 'li',
		layout = true,
		style,
		onDrag,
		class: className,
		...remotion
	} = $props<Props<V> & ForwardMotionProps & { children: Snippet; class?: string }>();

	const context = getContext<ReorderContextProps<V>>('Reorder');
	const point = {
		x: useDefaultMotionValue(style?.x),
		y: useDefaultMotionValue(style?.y),
	};

	const zIndex = $derived(useTransform([point.x, point.y], ([latestX, latestY]) => (latestX || latestY ? 1 : 'unset')));

	invariant(Boolean(context), 'Reorder.Item must be a child of Reorder.Group');

	const { axis, registerItem, updateOrder } = $derived(context);

	function useDefaultMotionValue(value: any, defaultValue: number = 0) {
		return isMotionValue(value) ? value : useMotionValue(defaultValue);
	}

	$effect(() => {
		console.log('style', style);
		point.x.subscribe((v) => console.log('x', v));
		point.y.subscribe((v) => console.log('y', v));
		console.log('zIndex', $zIndex);
	});
</script>

<Motion
	drag={axis}
	{...remotion}
	style={{ ...style, x: point.x, y: point.y, zIndex }}
	{layout}
	onDrag={(event, gesturePoint) => {
		const { velocity } = gesturePoint;
		velocity[axis] && updateOrder(value, point[axis].get(), velocity[axis]);

		onDrag && onDrag(event, gesturePoint);
	}}
	onLayoutMeasure={(measured) => registerItem(value, measured)}
	dragConstraints={{ top: 0, bottom: 0, left: 0, right: 0 }}
	dragElastic={0.8}
	let:motion={animate}>
	<svelte:element this={as} class={className} use:animate>
		{@render children()}
	</svelte:element>
</Motion>

looking for some help to get this working.

[brunnerh]

There is a higher chance of getting help by constructing a proper minimal reproduction first.

It should be:

• Minimal: Contains no code that is irrelevant to the problem at hand
• Self-contained: No unaccounted for references to code, all used files are included (ideally there is just one file, see point above)
• Demonstrates the problem: It is apparent or marked what should happen and what happens instead
• (Ideally) executable: It should run in the preview REPL or, if SvelteKit features are necessary and relevant, something like SvelteLab.

Also, code can be formatted with syntax highlighting by using fenced code blocks that specify a language.

```svelte
<script>
  console.log('test');
</script>
<h1>Heading</h1>
```

Output:

<script>
  console.log('test');
</script>
<h1>Heading</h1>

[JonathonRP]

here is a repo, thanks for that advice didn't know I could use svelte for lang hint.
https://stackblitz.com/edit/sveltejs-kit-template-default-nsfarh?file=src%2Flib%2Fcomponents%2FReorder%2FItem.svelte