things are not good

Author: huntabyte

package.json

@@ -2,6 +2,7 @@
 	"name": "monorepo",
 	"private": true,
 	"scripts": {
+		"dev": "pnpm -F \"./packages/**\" svelte-kit sync && pnpm -r --parallel --reporter append-only --color dev",
 		"format": "biome check . --write",
 		"format:check": "biome check .",
 		"build": "pnpm --recursive build",

packages/floating-ui-svelte/package.json

@@ -5,12 +5,11 @@
 		"build": "svelte-package --input ./src",
 		"build:watch": "pnpm build --watch",
 		"test": "vitest run",
+		"dev": "pnpm build:watch",
 		"test:watch": "pnpm test --watch",
 		"sync": "svelte-kit sync && pnpm build"
 	},
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"sideEffects": false,
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",

…ents/floating-tree/floating-arrow.svelte …lte/src/components/floating-arrow.sveltepackages/floating-ui-svelte/src/components/floating-tree/floating-arrow.svelte renamed to packages/floating-ui-svelte/src/components/floating-arrow.svelte packages/floating-ui-svelte/src/components/floating-tree/floating-arrow.svelte renamed to packages/floating-ui-svelte/src/components/floating-arrow.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import type { SVGAttributes } from "svelte/elements";
-	import type { FloatingContext } from "../../hooks/use-floating.svelte.js";
+	import type { FloatingContext } from "../hooks/use-floating.svelte.js";
 
 	export interface FloatingArrowProps extends SVGAttributes<SVGElement> {
 		/** The bound HTML element reference. */
@@ -47,14 +47,12 @@
 
 <script lang="ts">
 	import type { Alignment, Side } from "@floating-ui/dom";
-	import { platform } from "@floating-ui/dom";
-	import { useId } from "../../hooks/use-id.js";
+	import { useId } from "../hooks/use-id.js";
 	import {
 		styleObjectToString,
 		styleStringToObject,
-	} from "../../internal/style-object-to-string.js";
-	import parse from "style-to-object";
-	import { watch } from "../../internal/watch.svelte.js";
+	} from "../internal/style-object-to-string.js";
+	import { watch } from "../internal/watch.svelte.js";
 
 	let {
 		ref = $bindable(null),

packages/floating-ui-svelte/src/hooks/use-floating-root-context.svelte.ts

@@ -87,6 +87,10 @@ class FloatingRootContext<RT extends ReferenceType = ReferenceType> {
 		this.#positionReference = node;
 	}
 
+	setFloatingElement(node: HTMLElement | null) {
+		this.#floatingElement = node;
+	}
+
 	get elements() {
 		const _this = this;
 		return {
@@ -97,7 +101,7 @@ class FloatingRootContext<RT extends ReferenceType = ReferenceType> {
 				return _this.#elements.floating;
 			},
 			set floating(node: HTMLElement | null) {
-				_this.#floatingElement = node;
+				_this.setFloatingElement(node);
 			},
 			get domReference() {
 				return _this.#referenceElement;

packages/floating-ui-svelte/src/hooks/use-floating.svelte.ts

@@ -210,6 +210,10 @@ class FloatingState<RT extends ReferenceType = ReferenceType> {
 		this.#positionReference = computedPositionReference;
 	}
 
+	setDomReference(node: NarrowedElement<RT> | null) {
+		this.#domReference = node;
+	}
+
 	get placement() {
 		return this.#position.data.placement;
 	}
@@ -249,7 +253,7 @@ class FloatingState<RT extends ReferenceType = ReferenceType> {
 			},
 			set reference(node: RT | null) {
 				if (isElement(node) || node === null) {
-					state.#domReference = node as NarrowedElement<RT> | null;
+					state.setDomReference(node as NarrowedElement<RT> | null);
 				}
 			},
 			get floating() {
@@ -264,9 +268,9 @@ class FloatingState<RT extends ReferenceType = ReferenceType> {
 		};
 	};
 
-	get elements() {
+	readonly elements = $derived.by(() => {
 		return this.#getElements(this);
-	}
+	});
 }
 
 /**

packages/floating-ui-svelte/src/hooks/use-hover.svelte.ts

@@ -6,7 +6,6 @@ import {
 	isMouseLikePointerType,
 } from "../internal/dom.js";
 import { noop } from "../internal/noop.js";
-import type { ElementProps } from "./use-interactions.svelte.js";
 import type { FloatingTreeType, OpenChangeReason } from "../types.js";
 import type {
 	FloatingContext,

packages/floating-ui-svelte/src/hooks/use-position.svelte.ts

@@ -109,12 +109,14 @@ interface UsePositionData {
  * Manages the positioning of floating elements.
  */
 class PositionState<RT extends ReferenceType = ReferenceType> {
-	#strategy: Strategy = $derived.by(() => this.options.strategy ?? "absolute");
-	#placement: Placement = $derived.by(() => this.options.placement ?? "bottom");
+	#strategy: Strategy = $derived.by(() => this.options?.strategy ?? "absolute");
+	#placement: Placement = $derived.by(
+		() => this.options?.placement ?? "bottom",
+	);
 	#middleware: Array<Middleware | undefined | null | false> = $derived.by(
-		() => this.options.middleware ?? [],
+		() => this.options?.middleware ?? [],
 	);
-	#transform: boolean = $derived.by(() => this.options.transform ?? true);
+	#transform: boolean = $derived.by(() => this.options?.transform ?? true);
 	#positionReference = $derived.by(() => this.getPositionReference());
 	reference = $derived.by(
 		() => this.#positionReference ?? this.rootContext.elements.reference,

packages/floating-ui-svelte/src/internal/context.ts

@@ -1,7 +1,6 @@
 /**
  * Sourced from Runed `Context`: https://runed.dev/docs/utilities/context
  */
-
 import { getContext, hasContext, setContext } from "svelte";
 
 export class Context<TContext> {

packages/floating-ui-svelte/test/hooks/wrapper-components/use-click.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
 	import { autoUpdate } from "@floating-ui/dom";
-	import {
-		type UseClickOptions,
-		useClick,
-	} from "../../../src/hooks/use-click.svelte.js";
 	import { useFloating } from "../../../src/hooks/use-floating.svelte.js";
 	import { useHover } from "../../../src/hooks/use-hover.svelte.js";
 	import { useInteractions } from "../../../src/hooks/use-interactions.svelte.js";
+	import { useClick, type UseClickOptions } from "../../../src/index.js";
 
 	interface Props extends UseClickOptions {
 		open?: boolean;

packages/floating-ui-svelte/test/hooks/wrapper-components/use-dismiss.svelte

@@ -30,7 +30,9 @@
 <button
 	data-testid="reference"
 	bind:this={floating.elements.reference}
-	{...interactions.getReferenceProps()}></button>
+	{...interactions.getReferenceProps()}>
+	button
+</button>
 
 {#if open}
 	<div