### Install Project Dependencies with Bun

Source: https://github.com/refzlund/floating-runes/blob/main/CONTRIBUTING.md

Installs all necessary project dependencies using the Bun package manager. This is a prerequisite for running the project locally and for development.

```bash
bun install
```

--------------------------------

### Start Development Application with Bun

Source: https://github.com/refzlund/floating-runes/blob/main/CONTRIBUTING.md

Launches the development application for testing and interactive development within the project. This command is typically run from the root of the project.

```bash
bun app
```

--------------------------------

### Link Local Package with Bun

Source: https://github.com/refzlund/floating-runes/blob/main/CONTRIBUTING.md

Links a subfolder package directory within the monorepo to be used in other projects. This allows for local development and testing of packages across different parts of the monorepo or in external projects.

```bash
bun link <package-name>
```

--------------------------------

### Tethering Example

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

Illustrates the tethering functionality, allowing a floated element to reference a different element temporarily. The `use:float.tether` directive is used to establish the temporary reference, and `float.untether()` can be called to revert to the primary reference. This example uses a snippet to dynamically manage references.

```html
<script>
    import floatingUI, { flip, shift, arrow } from 'floating-runes'

    let url = '/a' // demo example

    const float = floatingUI()
</script>

{#snippet href(ref, text)}
	 <a
		class:active={ref === url}
		use:float.ref={() => ref === url}
		use:float.tether={'pointerenter'}
		href={ref}
	>
		{text}
	 </a>
{/snippet}

{#if float.tethered}
	<div class='hovered' use:float={{ untether: false }}></div>
{/if}
<div class='active' use:float={{ tether: false }}></div>

<div use:float.untether={'pointerleave'}>
    {@render href('/a', 'Hover me')}
    {@render href('/b', 'I want attention')}
    {@render href('/c', 'Guys... what about meeEeEe')}
    {@render href('/d', 'Ignore my brother')}
</div>
```

--------------------------------

### Generate Version Bump and Changelog with Changesets

Source: https://github.com/refzlund/floating-runes/blob/main/CONTRIBUTING.md

Generates version bumps and changelogs for packages within the monorepo using the Changesets tool. This command should be run when a Pull Request is ready to be merged to update package versions and generate release notes.

```bash
bunx changeset
```

--------------------------------

### Basic Usage with Tooltip

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

Demonstrates the fundamental usage of the `floating-runes` library to create a tooltip. It initializes the floating UI with common middleware like `flip`, `shift`, and `arrow`, and applies the `use:float` directive to the tooltip and reference elements.

```html
<script>
    import floatingUI, { flip, shift, arrow } from 'floating-runes'

    const float = floatingUI({
        placement: 'top',
        middleware: [
            flip(),
            shift(),
            arrow()
        ]
    })
</script>

<div>
    <tooltip use:float>
        <arrow use:float.arrow></arrow>
    </tooltip>
    <button use:float.ref> Hover me </button>
</div>
```

--------------------------------

### Advanced Floating UI Configuration

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

Shows how to extend the functionality by using the `.then()` method on the `floatingUI` instance, similar to the core Floating UI library. This allows access to computed data, including middleware data, for more complex styling or logic.

```html
<script>
    import floatingUI, { ... } from 'floating-runes'

    const float = floatingUI({
        placement: 'top',
        middleware: [
            ...
        ]
    }).then(computedData => {
        const { middlewareData } = computedData
        ...
    })
</script>
```

--------------------------------

### Configure Floating UI Options

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

FloatingRuneOptions extends ComputePositionConfig from Floating UI, allowing customization of middleware, platform, placement, strategy, and auto-update behavior for floating elements.

```typescript
interface FloatingRuneOptions extends ComputePositionConfig {
  middleware?: Middleware[];
  platform?: Platform;
  placement?: Placement;
  strategy?: Strategy;
  autoUpdate?: AutoUpdateOptions;
  autoPosition?: boolean;
}
```

--------------------------------

### TypeScript WindowEventMap Interface

Source: https://github.com/refzlund/floating-runes/blob/main/WindowEventMap.md

Defines the `WindowEventMap` interface in TypeScript, which maps various window event types to their corresponding event objects. This interface is essential for type-safe event handling in browser environments. It includes events like `DOMContentLoaded`, `click`, `keydown`, `message`, and many more. No external dependencies are required for this definition.

```typescript
interface WindowEventMap {
    DOMContentLoaded: Event;
    abort: UIEvent;
    afterprint: Event;
    animationcancel: AnimationEvent;
    animationend: AnimationEvent;
    animationiteration: AnimationEvent;
    animationstart: AnimationEvent;
    auxclick: MouseEvent;
    beforeinput: InputEvent;
    beforeprint: Event;
    beforeunload: BeforeUnloadEvent;
    blur: FocusEvent;
    cancel: Event;
    canplay: Event;
    canplaythrough: Event;
    change: Event;
    click: MouseEvent;
    close: Event;
    compositionend: CompositionEvent;
    compositionstart: CompositionEvent;
    compositionupdate: CompositionEvent;
    contextmenu: MouseEvent;
    cuechange: Event;
    dblclick: MouseEvent;
    devicemotion: DeviceMotionEvent;
    deviceorientation: DeviceOrientationEvent;
    drag: DragEvent;
    dragend: DragEvent;
    dragenter: DragEvent;
    dragleave: DragEvent;
    dragover: DragEvent;
    dragstart: DragEvent;
    drop: DragEvent;
    durationchange: Event;
    emptied: Event;
    ended: Event;
    error: ErrorEvent;
    focus: FocusEvent;
    focusin: FocusEvent;
    focusout: FocusEvent;
    formdata: FormDataEvent;
    gamepadconnected: GamepadEvent;
    gamepaddisconnected: GamepadEvent;
    gotpointercapture: PointerEvent;
    hashchange: HashChangeEvent;
    input: Event;
    invalid: Event;
    keydown: KeyboardEvent;
    keypress: KeyboardEvent;
    keyup: KeyboardEvent;
    languagechange: Event;
    load: Event;
    loadeddata: Event;
    loadedmetadata: Event;
    loadstart: Event;
    lostpointercapture: PointerEvent;
    message: MessageEvent<any>;
    messageerror: MessageEvent<any>;
    mousedown: MouseEvent;
    mouseenter: MouseEvent;
    mouseleave: MouseEvent;
    mousemove: MouseEvent;
    mouseout: MouseEvent;
    mouseover: MouseEvent;
    mouseup: MouseEvent;
    offline: Event;
    online: Event;
    orientationchange: Event;
    pagehide: PageTransitionEvent;
    pageshow: PageTransitionEvent;
    pause: Event;
    play: Event;
    playing: Event;
    pointercancel: PointerEvent;
    pointerdown: PointerEvent;
    pointerenter: PointerEvent;
    pointerleave: PointerEvent;
    pointermove: PointerEvent;
    pointerout: PointerEvent;
    pointerover: PointerEvent;
    pointerup: PointerEvent;
    popstate: PopStateEvent;
    progress: ProgressEvent<EventTarget>;
    ratechange: Event;
    rejectionhandled: PromiseRejectionEvent;
    reset: Event;
    resize: UIEvent;
    scroll: Event;
    securitypolicyviolation: SecurityPolicyViolationEvent;
    seeked: Event;
    seeking: Event;
    select: Event;
    selectionchange: Event;
    selectstart: Event;
    slotchange: Event;
    stalled: Event;
    storage: StorageEvent;
    submit: SubmitEvent;
    suspend: Event;
    timeupdate: Event;
    toggle: Event;
    touchcancel: TouchEvent;
    touchend: TouchEvent;
    touchmove: TouchEvent;
    touchstart: TouchEvent;
    transitioncancel: TransitionEvent;
    transitionend: TransitionEvent;
    transitionrun: TransitionEvent;
    transitionstart: TransitionEvent;
    unhandledrejection: PromiseRejectionEvent;
    unload: Event;
    volumechange: Event;
    waiting: Event;
    webkitanimationend: Event;
    webkitanimationiteration: Event;
    webkitanimationstart: Event;
    webkittransitionend: Event;
    wheel: WheelEvent;
}
```

--------------------------------

### Portal Action for DOM Manipulation

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

Demonstrates the `portal` action provided by `floating-runes`. This action allows an element to be moved to a different DOM node, such as the `body`. When the component is destroyed, the portalled element is also automatically removed.

```html
<script>
    import { portal } from 'floating-runes'
</script>

<div use:portal> I'm in the body😏 </div>
<div use:portal={element}> I'm in another element </div>
```

--------------------------------

### Handle Floating UI Compute Position Return Value

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

The '.then(...)' method can be used with the floatingUI function to access the computed position data. The data is of type ComputePositionReturn, which provides detailed positioning information.

```typescript
const float = floatingUI(...).then((data: ComputePositionReturn) => void)
```

--------------------------------

### Use 'float.arrow' Svelte Action for Arrows

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

The 'use:float.arrow' Svelte action is used on an element that serves as an arrow for a 'use:float' element. It must be a direct child of the floating element and requires the 'arrow' middleware to be included in the Floating UI configuration.

```html
<div use:float>
  ...
  <arrow use:float.arrow>...</arrow>
</div>
```

--------------------------------

### Set Reference and Tether Points with Svelte Actions

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

The 'use:float.ref' and 'use:float.tether' Svelte actions set the reference or tether point for a 'use:float' element. They can accept a conditional callback or a window event to trigger the reference/tethering.

```javascript
// Conditional callback example
use:float.ref={() => url === href}

// Event trigger example
use:float.tether={'pointerenter'}
```

--------------------------------

### Use 'float' Svelte Action for Floating Elements

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

The 'use:float' Svelte action creates a floating element relative to a reference or tethered element. It accepts FloatOptions to control tethering behavior.

```javascript
interface FloatOptions {
  tether?: boolean;
  untether?: boolean;
}
```

```html
<div use:float={FloatOptions}>...</div>
```

--------------------------------

### Remove Reference or Tethering with Svelte Actions

Source: https://github.com/refzlund/floating-runes/blob/main/README.md

The 'float.unref' and 'float.untether' methods or Svelte actions are used to remove the current reference or tethering. They can be called directly or triggered by a condition or event, similar to 'ref' and 'tether'.

```javascript
// Direct method calls
float.unref()
float.untether()

// Conditional callback example
use:float.untether={() => condition}

// Event trigger example
use:float.unref={'pointerleave'}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.