@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.60

package/dist/internal/FormFields.svelte

@@ -2,7 +2,7 @@
   import { disposables } from "../utils/disposables.js"
   import { objectToFormEntries } from "../utils/form.js"
   import FormResolver from "./FormResolver.svelte"
-  import HoistFormFields from "./HoistFormFields.svelte"
+  import { hoistFormFields } from "./form-fields.svelte.js"
   import Hidden, { HiddenFeatures } from "./Hidden.svelte"
   import { compact } from "../utils/object.js"
 
@@ -29,25 +29,30 @@
 
     return d.addEventListener(form, "reset", onReset)
   })
-</script>
 
-<HoistFormFields>
-  <FormResolver setForm={(value) => (form = value)} {formId} />
-  {#each objectToFormEntries(data) as [name, value]}
-    <Hidden
-      features={HiddenFeatures.Hidden}
-      {...compact({
+  const fields = $derived(
+    objectToFormEntries(data).map(([name, value]) =>
+      compact({
         key: name,
         as: "input",
         type: "hidden",
-        hidden: true,
-        readOnly: true,
         form: formId,
         disabled,
         name,
         value,
         ...overrides,
-      })}
-    />
+      })
+    )
+  )
+
+  const hoisted = hoistFormFields(formFields)
+</script>
+
+{#snippet formFields()}
+  <FormResolver setForm={(value) => (form = value)} {formId} />
+  {#each fields as props}
+    <Hidden features={HiddenFeatures.Hidden} {...props} />
   {/each}
-</HoistFormFields>
+{/snippet}
+
+{#if !hoisted}{@render formFields()}{/if}

package/dist/internal/FormFields.svelte.d.ts

@@ -1,24 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FormFields: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     data: Record<string, any>;
     overrides?: Record<string, any>;
     form?: string;
     disabled?: boolean;
     onReset?: (e: Event) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FormFields = InstanceType<typeof FormFields>;
+};
+declare const FormFields: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormFields = ReturnType<typeof FormFields>;
 export default FormFields;

package/dist/internal/FormFieldsProvider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { createFormFieldsContext } from "./form-fields.svelte.js"
+
+  const { children }: { children?: Snippet } = $props()
+
+  const context = createFormFieldsContext()
+  const { fields } = $derived(context)
+</script>
+
+{#if children}{@render children()}{/if}
+<Hidden features={HiddenFeatures.Hidden}>
+  {#each fields as field}
+    {@render field()}
+  {/each}
+</Hidden>

package/dist/internal/FormFieldsProvider.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const FormFieldsProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormFieldsProvider = ReturnType<typeof FormFieldsProvider>;
+export default FormFieldsProvider;

package/dist/internal/FormResolver.svelte

@@ -11,7 +11,7 @@
     }
   })
 
-  let element = $state<HTMLInputElement>()
+  let element = $state<HTMLElement>()
 
   onMount(() => {
     if (!element) return
@@ -21,5 +21,9 @@
 </script>
 
 {#if !formId}
-  <Hidden features={HiddenFeatures.Hidden} as="input" type="hidden" hidden readonly bind:ref={element} />
+  <Hidden asChild features={HiddenFeatures.Hidden}>
+    {#snippet children({ props })}
+      <input {...props} type="hidden" hidden readonly bind:this={element} />
+    {/snippet}
+  </Hidden>
 {/if}

package/dist/internal/FormResolver.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FormResolver: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     setForm: (form: HTMLFormElement) => void;
     formId?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FormResolver = InstanceType<typeof FormResolver>;
+};
+declare const FormResolver: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormResolver = ReturnType<typeof FormResolver>;
 export default FormResolver;

package/dist/internal/Hidden.svelte

@@ -1,30 +1,30 @@
 <script lang="ts" module>
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { HiddenFeatures } from "./HiddenFeatures.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   export * from "./HiddenFeatures.js"
 
   const DEFAULT_VISUALLY_HIDDEN_TAG = "span" as const
 
-  type HiddenRenderPropArg = {}
+  export type HiddenRenderPropArg = {}
   type HiddenPropsWeControl = never
-  export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<
-    TTag,
+  export type HiddenProps = Props<
+    typeof DEFAULT_VISUALLY_HIDDEN_TAG,
     HiddenRenderPropArg,
-    HiddenPropsWeControl,
-    { features?: HiddenFeatures }
+    { element?: HTMLElement; features?: HiddenFeatures }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">
-  let { ref = $bindable(), features = HiddenFeatures.None, ...theirProps }: { as?: TTag } & HiddenProps<TTag> = $props()
+<script lang="ts">
+  let { element = $bindable(), features = HiddenFeatures.None, ...theirProps }: HiddenProps = $props()
 
   let ourProps = {
     "aria-hidden":
       (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable
         ? true
-        : (theirProps["aria-hidden" as keyof typeof theirProps] ?? undefined),
+        : (theirProps["aria-hidden"] ?? undefined),
     hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : undefined,
     style: [
       "position: fixed",
@@ -46,4 +46,4 @@
   }
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:element />

package/dist/internal/Hidden.svelte.d.ts

@@ -1,39 +1,12 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { HiddenFeatures } from "./HiddenFeatures.js";
 export * from "./HiddenFeatures.js";
 declare const DEFAULT_VISUALLY_HIDDEN_TAG: "span";
-type HiddenRenderPropArg = {};
-type HiddenPropsWeControl = never;
-export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, {
+export type HiddenRenderPropArg = {};
+export type HiddenProps = Props<typeof DEFAULT_VISUALLY_HIDDEN_TAG, HiddenRenderPropArg, {
+    element?: HTMLElement;
     features?: HiddenFeatures;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<HiddenRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: HiddenRenderPropArg) => string) | undefined;
-    } : {}) & {
-        features?: HiddenFeatures;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Hidden: $$IsomorphicComponent;
-type Hidden<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = InstanceType<typeof Hidden<TTag>>;
+declare const Hidden: import("svelte").Component<HiddenProps, {}, "element">;
+type Hidden = ReturnType<typeof Hidden>;
 export default Hidden;

package/dist/internal/MainTreeProvider.svelte

@@ -93,6 +93,6 @@
 </script>
 
 {#if children}{@render children()}{/if}
-{#if resolvedMainTreeNode === null}
-  <Hidden features={HiddenFeatures.Hidden} bind:ref={el} />
+{#if resolvedMainTreeNode.node === null}
+  <Hidden features={HiddenFeatures.Hidden} bind:element={el} />
 {/if}

package/dist/internal/MainTreeProvider.svelte.d.ts

@@ -8,24 +8,10 @@ export declare function useMainTreeNode(options?: {
     fallbackMainTreeNode?: HTMLElement | null;
 }): MainTreeContext;
 import { type Snippet } from "svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MainTreeProvider: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     children: Snippet;
     node?: HTMLElement | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type MainTreeProvider = InstanceType<typeof MainTreeProvider>;
+};
+declare const MainTreeProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type MainTreeProvider = ReturnType<typeof MainTreeProvider>;
 export default MainTreeProvider;

package/dist/internal/Portal.svelte.d.ts

@@ -1,22 +1,8 @@
 import { type Snippet } from "svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Portal: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     target: HTMLElement;
     children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Portal = InstanceType<typeof Portal>;
+};
+declare const Portal: import("svelte").Component<$$ComponentProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
 export default Portal;

package/dist/internal/floating-provider.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare const useFloatingProvider: (options?: {
+    enabled: boolean;
+}) => void;

package/dist/internal/floating-provider.svelte.js

@@ -0,0 +1,206 @@
+import { setContext } from "svelte";
+import { useFixScrollingPixel, useResolvedConfig, } from "./floating.svelte.js";
+import { autoUpdate, flip as flipMiddleware, inner as innerMiddleware, offset as offsetMiddleware, shift as shiftMiddleware, size as sizeMiddleware, useFloating, useInnerOffset, useInteractions, } from "../utils/floating-ui/svelte/index.js";
+export const useFloatingProvider = (options = { enabled: true }) => {
+    const { enabled } = $derived(options);
+    // TODO: Make this a config part of the `config`. Just need to decide on a name.
+    const MINIMUM_ITEMS_VISIBLE = 4;
+    let config = $state(null);
+    let innerOffset = $state(0);
+    const setInnerOffset = (offset) => (innerOffset = typeof offset === "function" ? offset(innerOffset) : offset);
+    const overflowRef = $state({ current: null });
+    let floatingEl = $state(null);
+    const setFloatingElement = (element) => (floatingEl = element ?? null);
+    useFixScrollingPixel({
+        get element() {
+            return floatingEl;
+        },
+    });
+    const isEnabled = $derived(enabled && config !== null && floatingEl !== null);
+    const resolvedConfig = useResolvedConfig({
+        get config() {
+            return config;
+        },
+        get element() {
+            return floatingEl;
+        },
+    });
+    const { to: placement = "bottom", gap = 0, offset = 0, padding = 0, inner } = $derived(resolvedConfig);
+    const [to, align = "center"] = $derived(placement.split(" "));
+    // Reset
+    $effect(() => {
+        if (!isEnabled)
+            return;
+        innerOffset = 0;
+    });
+    const middleware = $derived([
+        // - The `mainAxis` is set to `gap` which defines the gap between the panel and the
+        //   trigger/reference.
+        // - The `crossAxis` is set to `offset` which nudges the panel from its original position.
+        //
+        // When we are showing the panel on top of the selected item, we don't want a gap between the
+        // reference and the panel, therefore setting the `mainAxis` to `0`.
+        offsetMiddleware({
+            mainAxis: to === "selection" ? 0 : gap,
+            crossAxis: offset,
+        }),
+        // When the panel overflows the viewport, we will try to nudge the panel to the other side to
+        // ensure it's not clipped. We use the `padding` to define the  minimum space between the
+        // panel and the viewport.
+        shiftMiddleware({ padding }),
+        // The `flip` middleware will swap the `placement` of the panel if there is not enough room.
+        // This is not compatible with the `inner` middleware (which is only enabled when `to` is set
+        // to "selection").
+        to !== "selection" && flipMiddleware({ padding }),
+        // The `inner` middleware will ensure the panel is always fully visible on screen and
+        // positioned on top of the reference and moved to the currently selected item.
+        to === "selection" && inner
+            ? innerMiddleware({
+                ...inner,
+                padding, // For overflow detection
+                overflowRef,
+                offset: innerOffset,
+                minItemsVisible: MINIMUM_ITEMS_VISIBLE,
+                referenceOverflowThreshold: padding,
+                onFallbackChange(fallback) {
+                    if (!fallback)
+                        return;
+                    const parent = context.elements.floating;
+                    if (!parent)
+                        return;
+                    const scrollPaddingBottom = parseFloat(getComputedStyle(parent).scrollPaddingBottom) || 0;
+                    // We want at least X visible items, but if there are less than X items in the list,
+                    // we want to show as many as possible.
+                    let missing = Math.min(MINIMUM_ITEMS_VISIBLE, parent.childElementCount);
+                    let elementHeight = 0;
+                    let elementAmountVisible = 0;
+                    for (const child of context.elements.floating?.childNodes ?? []) {
+                        if (child instanceof HTMLElement) {
+                            const childTop = child.offsetTop;
+                            // It can be that the child is fully visible, but we also want to keep the scroll
+                            // padding into account to ensure the UI looks good. Therefore we fake that the
+                            // bottom of the child is actually `scrollPaddingBottom` amount of pixels lower.
+                            const childBottom = childTop + child.clientHeight + scrollPaddingBottom;
+                            const parentTop = parent.scrollTop;
+                            const parentBottom = parentTop + parent.clientHeight;
+                            // Figure out if the child is fully visible in the scroll parent.
+                            if (childTop >= parentTop && childBottom <= parentBottom) {
+                                missing--;
+                            }
+                            else {
+                                // Not fully visible, so we will use this child to calculate the height of
+                                // each item. We will also use this to calculate how much of the item is
+                                // already visible.
+                                elementAmountVisible = Math.max(0, Math.min(childBottom, parentBottom) - Math.max(childTop, parentTop));
+                                elementHeight = child.clientHeight;
+                                break;
+                            }
+                        }
+                    }
+                    // There are fewer visible items than we want, so we will try to nudge the offset
+                    // to show more items.
+                    if (missing >= 1) {
+                        setInnerOffset((existingOffset) => {
+                            const newInnerOffset = elementHeight * missing - // `missing` amount of `elementHeight`
+                                elementAmountVisible + // The amount of the last item that is visible
+                                scrollPaddingBottom; // The scroll padding to ensure the UI looks good
+                            // Nudged enough already, no need to continue
+                            if (existingOffset >= newInnerOffset) {
+                                return existingOffset;
+                            }
+                            return newInnerOffset;
+                        });
+                    }
+                },
+            })
+            : null,
+        // The `size` middleware will ensure the panel is never bigger than the viewport minus the
+        // provided `padding` that we want.
+        sizeMiddleware({
+            padding,
+            apply({ availableWidth, availableHeight, elements }) {
+                Object.assign(elements.floating.style, {
+                    overflow: "auto",
+                    maxWidth: `${availableWidth}px`,
+                    maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight}px)`,
+                });
+            },
+        }),
+    ].filter(Boolean));
+    const floating = useFloating({
+        get open() {
+            return isEnabled;
+        },
+        get placement() {
+            return (to === "selection"
+                ? align === "center"
+                    ? "bottom"
+                    : `bottom-${align}`
+                : align === "center"
+                    ? `${to}`
+                    : `${to}-${align}`);
+        },
+        // This component will be used in combination with a `Portal`, which means the floating
+        // element will be rendered outside of the current DOM tree.
+        strategy: "absolute",
+        // We use the panel in a `Dialog` which is making the page inert, therefore no re-positioning is
+        // needed when scrolling changes.
+        transform: false,
+        get middleware() {
+            return middleware;
+        },
+        whileElementsMounted: autoUpdate,
+    });
+    const { refs, floatingStyles, context } = $derived(floating);
+    // Calculate placement information to expose as data attributes
+    const { exposedTo, exposedAlign } = $derived.by(() => {
+        const [exposedTo = to, exposedAlign = align] = context.placement.split("-");
+        return { exposedTo: to === "selection" ? "selection" : exposedTo, exposedAlign };
+    });
+    // If user-land code is using custom styles specifically for `bottom`, but
+    // they chose `selection`, then we want to make sure to map it to selection
+    // again otherwise styles could be wrong.
+    //if (to === "selection") exposedTo = "selection"
+    const data = $derived({
+        anchor: [exposedTo, exposedAlign].filter(Boolean).join(" "),
+    });
+    const innerOffsetConfig = useInnerOffset({
+        get context() {
+            return context;
+        },
+        get props() {
+            return {
+                overflowRef,
+                onChange: setInnerOffset,
+            };
+        },
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions({
+        get propsList() {
+            return [innerOffsetConfig];
+        },
+    });
+    const setFloatingRef = (el) => {
+        setFloatingElement(el);
+        refs.setFloating(el);
+    };
+    setContext("PlacementContext", {
+        updatePlacementConfig: (value) => {
+            config = value;
+        },
+    });
+    setContext("FloatingContext", {
+        setFloating: setFloatingRef,
+        get setReference() {
+            return refs.setReference;
+        },
+        get styles() {
+            return floatingStyles;
+        },
+        getReferenceProps,
+        getFloatingProps,
+        get slot() {
+            return data;
+        },
+    });
+};

package/dist/internal/floating.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { MutableRefObject } from "../utils/ref.svelte.js";
-type Align = "start" | "end";
-type Placement = "top" | "right" | "bottom" | "left";
-type BaseAnchorProps = {
+import { useInteractions, type InnerProps, type UseFloatingReturn } from "../utils/floating-ui/svelte/index.js";
+export type Align = "start" | "end";
+export type Placement = "top" | "right" | "bottom" | "left";
+export type BaseAnchorProps = {
     /**
      * The `gap` is the space between the trigger and the panel.
      */
@@ -31,32 +31,56 @@ export type AnchorPropsWithSelection = false | (`${Placement | "selection"}` | `
 }>;
 export type InternalFloatingPanelProps = Partial<{
     inner: {
-        listRef: MutableRefObject<(HTMLElement | null)[]>;
-        index: () => number | null;
+        listRef: InnerProps["listRef"];
+        index: InnerProps["index"];
     };
 }>;
-type FloatingContext = {
-    styles?: string;
-    setReference: (reference: HTMLElement | null | undefined) => void;
-    setFloating: (floating: HTMLElement | null | undefined) => void;
-    getReferenceProps: () => Record<string, any>;
-    getFloatingProps: () => Record<string, any>;
+export type FloatingContext = {
+    styles?: UseFloatingReturn["floatingStyles"];
+    setReference: UseFloatingReturn["refs"]["setReference"];
+    setFloating: UseFloatingReturn["refs"]["setFloating"];
+    getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
     slot: Partial<{
         anchor: `${Placement | "selection"}` | `${Placement | "selection"} ${Align}`;
     }>;
 };
-export declare function useResolvedAnchor<T extends AnchorProps | AnchorPropsWithSelection>(anchor?: T): Exclude<T, boolean | string> | null;
-export declare function useFloating(): FloatingContext;
-export declare function useFloatingPanelProps(): () => Record<string, any> & {
-    "data-anchor": Placement | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection" | "selection end" | "selection start" | undefined;
+export type PlacementContext = {
+    updatePlacementConfig: ((value: Exclude<AnchorPropsWithSelection, boolean> | null) => void) | null;
 };
-export declare function useFloatingPanel(options: {
+export declare function useResolvedAnchor<T extends AnchorProps | AnchorPropsWithSelection>(options: {
+    anchor?: T;
+}): {
+    anchor: Exclude<T, boolean | string> | null;
+};
+export declare function useFloatingReference(): {
+    readonly setReference: ((node: import("../utils/floating-ui/svelte-dom/types.js").ReferenceType | null | undefined) => void) & ((node: import("../utils/floating-ui/svelte/types.js").ReferenceType | null | undefined) => void);
+};
+export declare function useFloatingReferenceProps(): {
+    readonly getReferenceProps: (userProps?: import("svelte/elements.js").HTMLAttributes<Element>) => Record<string, unknown>;
+};
+export declare function useFloatingPanelProps(): (...args: Parameters<(userProps?: import("svelte/elements.js").HTMLAttributes<HTMLElement>) => Record<string, unknown>>) => Record<string, unknown> & {
+    "data-anchor": Placement | "top start" | "top end" | "right start" | "right end" | "bottom start" | "bottom end" | "left start" | "left end" | "selection" | "selection start" | "selection end" | undefined;
+};
+export declare function useFloatingPanel(options?: {
     placement: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null;
 }): {
-    readonly setFloating: (floating: HTMLElement | null | undefined) => void;
-    readonly style: string | undefined;
+    readonly setFloating: ((node: HTMLElement | null | undefined) => void) & ((node: HTMLElement | null | undefined) => void);
+    readonly styles: string | undefined;
+};
+export declare function useFixScrollingPixel(options: {
+    element: HTMLElement | null;
+}): void;
+export declare function useResolvedConfig(options: {
+    config: (Exclude<AnchorPropsWithSelection, boolean | string> & InternalFloatingPanelProps) | null;
+    element?: HTMLElement | null;
+}): {
+    readonly to: Placement | "top start" | "top end" | "right start" | "right end" | "bottom start" | "bottom end" | "left start" | "left end" | "selection" | "selection start" | "selection end" | undefined;
+    readonly gap: number | undefined;
+    readonly offset: number | undefined;
+    readonly padding: number | undefined;
+    readonly inner: {
+        listRef: InnerProps["listRef"];
+        index: InnerProps["index"];
+    } | undefined;
 };
-export declare const createFloatingContext: ({ enabled }?: {
-    enabled?: boolean;
-}) => FloatingContext;
-export {};