### Install @solid-primitives/fullscreen

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/fullscreen/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/fullscreen
# or
yarn add @solid-primitives/fullscreen
```

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

### Install @solid-primitives/transition-group

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/transition-group/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/transition-group
# or
yarn add @solid-primitives/transition-group
# or
pnpm add @solid-primitives/transition-group
```

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

### Install @solid-primitives/fetch

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/fetch/README.md

Install the primitive using npm or yarn.

```bash
npm install @solid-primitives/fetch
# or
yarn add @solid-primitives/fetch
```

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

### Install @solid-primitives/event-listener

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/event-listener/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/event-listener
# or
yarn add @solid-primitives/event-listener
```

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

### Install @solid-primitives/storage

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/storage/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/storage
# or
yarn add @solid-primitives/storage
```

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

### Install @solid-primitives/promise

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/promise/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/promise
# or
yarn add @solid-primitives/promise
```

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

### Install @solid-primitives/virtual

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/virtual/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/virtual
# or
yarn add @solid-primitives/virtual
# or
pnpm add @solid-primitives/virtual
```

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

### Install @solid-primitives/refs

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/refs/README.md

Install the package using npm, pnpm, or yarn.

```bash
npm install @solid-primitives/refs
# or
pnpm add @solid-primitives/refs
# or
yarn add @solid-primitives/refs
```

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

### Install @solid-primitives/filesystem

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/filesystem/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/filesystem
# or
yarn add @solid-primitives/filesystem
# or
pnpm add @solid-primitives/filesystem
```

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

### Install @solid-primitives/scheduled

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/scheduled/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/scheduled
# or
yarn add @solid-primitives/scheduled
```

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

### Install @solid-primitives/pointer

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/pointer/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/pointer
# or
yarn add @solid-primitives/pointer
```

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

### Install @solid-primitives/page-visibility

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/page-visibility/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/page-visibility
# or
yarn add @solid-primitives/page-visibility
```

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

### Install @solid-primitives/utils

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/utils/README.md

Install the package using npm, pnpm, or yarn.

```bash
npm install @solid-primitives/utils
# or
pnpm add @solid-primitives/utils
# or
yarn add @solid-primitives/utils
```

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

### Install @solid-primitives/connectivity

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/connectivity/README.md

Install the connectivity primitive using npm or yarn.

```bash
npm install @solid-primitives/connectivity
# or
yarn add @solid-primitives/connectivity
```

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

### Install @solid-primitives/resource

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/resource/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/resource
# or
yarn add @solid-primitives/resource
# or
pnpm add @solid-primitives/resource
```

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

### Install @solid-primitives/pagination

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/pagination/README.md

Install the pagination primitive using your preferred package manager.

```bash
npm install @solid-primitives/pagination
# or
yarn add @solid-primitives/pagination
# or
pnpm add @solid-primitives/pagination
```

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

### Install @solid-primitives/memo

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/memo/README.md

Install the package using npm, pnpm, or yarn.

```bash
npm install @solid-primitives/memo
# or
pnpm add @solid-primitives/memo
# or
yarn add @solid-primitives/memo
```

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

### Install @solid-primitives/platform

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/platform/README.md

Install the package using npm, pnpm, or yarn.

```bash
npm install @solid-primitives/platform
# or
pnpm add @solid-primitives/platform
# or
yarn add @solid-primitives/platform
```

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

### Install @solid-primitives/styles

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/styles/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/styles
# or
yarn add @solid-primitives/styles
# or
pnpm add @solid-primitives/styles
```

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

### Install @solid-primitives/event-props

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/event-props/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/event-props
# or
yarn add @solid-primitives/event-props
```

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

### Install @solid-primitives/scroll

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/scroll/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/scroll
# or
yarn add @solid-primitives/scroll
```

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

### Install @solid-primitives/static-store

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/static-store/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/static-store
# or
yarn add @solid-primitives/static-store
# or
pnpm add @solid-primitives/static-store
```

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

### Install @solid-primitives/audio

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/audio/README.md

Install the audio primitive package using npm or yarn.

```bash
npm install @solid-primitives/audio
# or
yarn add @solid-primitives/audio
```

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

### Install @solid-primitives/destructure

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/destructure/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/destructure
# or
yarn add @solid-primitives/destructure
```

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

### Install @solid-primitives/spring

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/spring/README.md

Install the spring primitive using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/spring
# or
yarn add @solid-primitives/spring
# or
pnpm add @solid-primitives/spring
```

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

### Install @solid-primitives/active-element

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/active-element/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/active-element
# or
yarn add @solid-primitives/active-element
```

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

### Install @solid-primitives/jsx-tokenizer

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/jsx-tokenizer/README.md

Install the package using npm, pnpm, or yarn.

```bash
npm install @solid-primitives/jsx-tokenizer
# or
pnpm add @solid-primitives/jsx-tokenizer
# or
yarn add @solid-primitives/jsx-tokenizer
```

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

### Install @solid-primitives/bounds

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/bounds/README.md

Install the package using npm or yarn.

```bash
npm install @solid-primitives/bounds
# or
yarn add @solid-primitives/bounds
```

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

### Install Dependencies and Build

Source: https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md

Run this command to install all project dependencies and build local packages. Re-run after pulling from the main branch.

```bash
pnpm install
```

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

### Install @solid-primitives/graphql

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/graphql/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/graphql
# or
yarn add @solid-primitives/graphql
# or
pnpm add @solid-primitives/graphql
```

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

### Install @solid-primitives/stream

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/stream/README.md

Install the stream primitive using npm or yarn.

```bash
npm install @solid-primitives/stream
# or
yarn add @solid-primitives/stream
```

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

### Install Devices Primitive

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/devices/README.md

Install the @solid-primitives/devices package using npm or yarn.

```bash
npm install @solid-primitives/devices
# or
yarn add @solid-primitives/devices
```

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

### Install @solid-primitives/timer

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/timer/README.md

Install the timer primitives package using npm or yarn.

```bash
npm install @solid-primitives/timer
# or
yarn add @solid-primitives/timer
```

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

### Install @solid-primitives/idle

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/idle/README.md

Install the primitive using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/idle
# or
yarn add @solid-primitives/idle
# or
pnpm add @solid-primitives/idle
```

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

### Install @solid-primitives/set

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/set/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/set
# or
yarn add @solid-primitives/set
# or
pnpm add @solid-primitives/set
```

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

### Install @solid-primitives/state-machine

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/state-machine/README.md

Install the state-machine primitive using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/state-machine
# or
yarn add @solid-primitives/state-machine
# or
pnpm add @solid-primitives/state-machine
```

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

### Install @solid-primitives/cursor

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/cursor/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/cursor
# or
yarn add @solid-primitives/cursor
# or
pnpm add @solid-primitives/cursor
```

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

### Install Dependencies

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/storage/tauri-storage/README.md

Installs the necessary project dependencies using npm.

```bash
npm i
```

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

### Install @solid-primitives/tween

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/tween/README.md

Install the tween primitive using npm or yarn.

```bash
npm install @solid-primitives/tween
# or
yarn add @solid-primitives/tween
```

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

### Install @solid-primitives/autofocus

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/autofocus/README.md

Install the autofocus primitive using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/autofocus
# or
yarn add @solid-primitives/autofocus
# or
pnpm add @solid-primitives/autofocus
```

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

### Install @solid-primitives/permission

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/permission/README.md

Install the permission primitive using npm or yarn.

```bash
npm install @solid-primitives/permission
# or
yarn add @solid-primitives/permission
```

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

### Install @solid-primitives/template-primitive

Source: https://github.com/solidjs-community/solid-primitives/blob/main/template/README.md

Install the template-primitive package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/template-primitive
# or
yarn add @solid-primitives/template-primitive
# or
pnpm add @solid-primitives/template-primitive
```

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

### Install @solid-primitives/marker

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/marker/README.md

Install the marker primitive using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/marker
# or
yarn add @solid-primitives/marker
# or
pnpm add @solid-primitives/marker
```

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

### Install @solid-primitives/masonry

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/masonry/README.md

Install the masonry primitive using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/masonry
# or
yarn add @solid-primitives/masonry
# or
pnpm add @solid-primitives/masonry
```

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

### Install Event Dispatcher

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/event-dispatcher/README.md

Install the @solid-primitives/event-dispatcher package using npm or yarn.

```bash
npm install @solid-primitives/event-dispatcher
# or
yarn add @solid-primitives/event-dispatcher
```

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

### Install @solid-primitives/keyed

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/keyed/README.md

Install the keyed primitives package using npm or yarn.

```bash
npm install @solid-primitives/keyed
# or
yarn add @solid-primitives/keyed
```

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

### Install @solid-primitives/script-loader

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/script-loader/README.md

Install the script-loader primitive using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/script-loader
# or
yarn add @solid-primitives/script-loader
# or
pnpm add @solid-primitives/script-loader
```

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

### Package Development Playground

Source: https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md

Starts a development playground for an individual package.

```bash
pnpm run dev
```

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

### Install pnpm

Source: https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md

Install pnpm globally if you don't have it. This is required for managing the monorepo.

```bash
npm install -g pnpm
```

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

### Install Controlled Props

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/controlled-props/README.md

Install the @solid-primitives/controlled-props package using npm, yarn, or pnpm.

```bash
npm install @solid-primitives/controlled-props
# or
yarn add @solid-primitives/controlled-props
# or
pnpm add @solid-primitives/controlled-props
```

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

### Install Input Mask Primitive

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/input-mask/README.md

Install the @solid-primitives/input-mask package using npm or yarn.

```bash
npm install @solid-primitives/input-mask
# or
yarn add @solid-primitives/input-mask
```

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

### Install Mutation Observer Primitive

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/mutation-observer/README.md

Install the mutation observer primitive using npm or yarn.

```bash
npm install @solid-primitives/mutation-observer
# or
yarn add @solid-primitives/mutation-observer
```

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

### Install node-fetch for Server-Side Fetch

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/fetch/README.md

If using on the server with Node.js versions prior to 18.0.0, install node-fetch.

```bash
npm install node-fetch
# or
yarn add node-fetch
```

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

### Basic createReducer Usage Example

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/memo/README.md

A simple example demonstrating createReducer for a counter. The reducer function doubles the state, and the dispatch function is called to trigger the update.

```tsx
import { createReducer } from "@solid-primitives/memo";

function Counter() {
  const [count, double] = createReducer(c => c * 2, 1);

  return <button onClick={double}>{count()}</button>;
}
```

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

### Basic Filesystem Operations with createFileSystem

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/filesystem/README.md

Demonstrates basic filesystem operations using `createFileSystem` with a virtual filesystem adapter. Shows how to create directories, write files, and use Solid's reactivity to log file types, directory contents, and file contents.

```tsx
const vfs = makeVirtualFileSystem({});
const fs = createFileSystem(vfs);
// create a directory
fs.mkdir("/src");
// create or overwrite a file
fs.writeFile("/src/index.ts", "console.log(0);");
// checking entry type: "file" | "dir" | null (file not found) | undefined (not yet ready)
// will be called again if the file or directory is deleted (-> null)
createEffect(() => console.log("/src type", fs.getType("/src")));
// read a directory
// will be called again if the contents of "/" change due to
// writing a new file or deleting an existing file or directory
createEffect(() => console.log("/", fs.readdir("/")));
// reading files
// this signal (or resource for async adapters) will update if
// the file is written by the same fs
createEffect(() => console.log("/src/index.ts", fs.readFile("/src/index.ts")));
```

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

### Create and Manage Selection

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/selection/README.md

Initializes a reactive selection state and provides functions to get and set the selection. The state is represented as a tuple of the target node, start offset, and end offset.

```typescript
import { createSelection } from "@solid-primitives/selection";

const [selection, setSelection] = createSelection();

// nothing is selected:
selection(); // [null, NaN, NaN]

// select the second to fourth letter inside a contentEditable div:
setSelection([document.querySelector("div[contenteditable]"), 1, 3]);
selection(); // [HTMLDivElement, 1, 3]

// change the selection to a cursor behind the fourth letter inside the first input:
setSelection([document.querySelector("input"), 3, 3]);
selection(); // [HTMLInputElement, 3, 3]

// remove the selection again:
setSelection([null, NaN, NaN]);
```

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

### Install Geolocation Primitives

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/geolocation/README.md

Install the geolocation primitives package using npm or yarn.

```bash
npm install @solid-primitives/geolocation
# or
yarn add @solid-primitives/geolocation
```

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

### Create and Start Analytics

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/analytics/README.md

Initialize analytics management and start the analytics process. The provided function will be called when analytics starts.

```typescript
const [running, start, stop] = createAnalytics(() => console.log('hi')));
start();
```

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

### Combine resource primitives

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/resource/README.md

An example demonstrating the combined usage of makeAbortable, makeCache, and createAggregated with createResource.

```typescript
// abort signal will abort the resource in-flight if it takes more then 10000ms
const [signal, abort] = makeAbortable({ timeout: 10000 });

const fetcher = (url: string) => fetch(url, { signal: signal() }).then(r => r.json());

// cached fetcher will not be called if something for the same URL is still in cache
const [cachedFetcher, invalidate] = makeCache(fetcher, { storage: localStorage });

// works with createResource, or any wrapping API with the same interface
const [data, { refetch }] = createResource(address, fetcher);
const aggregatedData = createAggregated(data);
```

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

### Scheduling Strategies Examples

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/scheduled/README.md

Demonstrates how to use createScheduled with different scheduling functions like debounce, throttle, and their leading/trailing variants.

```typescript
// e.g. with debounce
createScheduled(fn => debounce(fn, 1000));
```

```typescript
// e.g. with throttle
createScheduled(fn => throttle(fn, 1000));
```

```typescript
// e.g. with leading debounce
createScheduled(fn => leading(debounce, fn, 1000));
```

```typescript
// e.g. with leading throttle
createScheduled(fn => leading(throttle, fn, 1000));
```

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

### Using createFetch with undefined RequestInfo

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/fetch/README.md

Shows how to initialize a fetch request without starting it immediately by using an accessor that returns undefined.

```typescript
const [resource] = createFetch(
  () => undefined // Request will not start until this accessor returns a valid RequestInfo
);
```

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

### Build All Packages

Source: https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md

Builds all packages in the monorepo.

```bash
pnpm run build
```

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

### Create Fullscreen Primitive with Options

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/fullscreen/README.md

Demonstrates the signature for createFullscreen, showing how options can be passed as a second or third argument. This is particularly useful for directive-based usage.

```typescript
const isActive: Accessor<boolean> = createFullscreen(
  ref: HTMLElement | undefined,
  active?: Accessor<FullscreenOptions | boolean>,
  options?: FullscreenOptions
);

```

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

### Create and Use Tokenizer and Tokens

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/jsx-tokenizer/README.md

Demonstrates creating a tokenizer, defining token components, and resolving tokens within a parent component.

```tsx
import { createTokenizer, createToken, resolveTokens } from "@solid-primitives/jsx-tokenizer";

const Tokenizer = createTokenizer<Token1 | Token2>({
  name: "Example Tokenizer", // optional (used for warnings during development)
});

// lets you create multiple token components with the same id:
const MyTokenA = createToken(Tokenizer, props => ({ type: "A" }));

const MyTokenB = createToken(Tokenizer, props => ({ type: "B" }));

function ParentComponent(props) {
  const tokens = resolveTokens(Tokenizer, () => props.children);
  return (
    <ul>
      <For each={tokens()}>{token => <li>{token.data.type}</li>}</For>
    </ul>
  );
}

<ParentComponent>
  <MyTokenA />
  <MyTokenB />
</ParentComponent>;
```

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

### Typical usage of Key component

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/keyed/README.md

Demonstrates the typical usage of the Key component for creating a list of elements by mapping items by a provided key. It includes a fallback for empty lists.

```tsx
<Key each={items()} by={item => item.id} fallback={<div>No items</div>}>
  {item => <div>{item()}</div>}
</Key>
```

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

### Supabase Database Setup SQL

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/db-store/dev/README.md

SQL statements to create the 'todos' table, enable real-time publications, and set up row-level security policies for authenticated users.

```sql
create table todos (
  id serial primary key,
  task text,
  user_id uuid references auth.users default auth.uid()
);

alter publication supabase_realtime add table todos;

create policy "realtime updates only for authenticated users"
on "realtime"."messages"
for select
to authenticated
using (true);

alter table "public"."todos" enable row level security;

create policy "Select only own tasks" on "public"."todos"
for select
to authenticated
using (((SELECT auth.uid() AS uid) = user_id));

create policy "Insert only own tasks" on "public"."todos"
for insert
to authenticated
with check (((SELECT auth.uid() AS uid) = user_id));

create policy "Delete only own tasks" on "public"."todos"
for delete
to authenticated
using (((SELECT auth.uid() AS uid) = user_id));

create policy "Update only own tasks" on "public"."todos"
for update
to authenticated
using (((SELECT auth.uid() AS uid) = user_id))
with check (((SELECT auth.uid() AS uid) = user_id));
```

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

### Ref Component

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/refs/README.md

Component to get up-to-date reference to a single child element. It accepts a `ref` prop for getting the current element or `undefined`.

```APIDOC
## <Ref>

### Description
Component to get up-to-date reference to a single child element. It accepts a `ref` prop for getting the current element or `undefined`.

### How to use it
`<Ref>` accepts only a `ref` property for getting the current element or `undefined`, and requires `children` to be passed in.

```tsx
import { Ref } from "@solid-primitives/refs";

const [ref, setRef] = createSignal<Element | undefined>();

<Ref ref={setRef}>{props.children}</Ref>;
```
```

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

### Get Position Relative to Screen

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/mouse/README.md

Converts page coordinates to coordinates relative to the screen.

```typescript
const pos = getPositionToScreen(pageX, pageY);
```

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

### Basic makeSSE Usage

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/sse/README.md

Demonstrates how to create a raw EventSource connection using `makeSSE`. Event handlers are attached immediately, and you are responsible for calling the returned cleanup function.

```typescript
import { makeSSE } from "@solid-primitives/sse";

const [source, cleanup] = makeSSE("https://api.example.com/events", {
  onOpen: () => console.log("Connected"),
  onMessage: e => console.log("Message:", e.data),
  onError: e => console.error("Error:", e),
  events: {
    // Named SSE event types (server sends `event: update`)
    update: e => console.log("Update:", e.data),
  },
});

// When done:
cleanup();
```

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

### Create and Use Event Stack

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/event-bus/README.md

Demonstrates how to create an event stack with optional value parsing and how to listen to, emit, and manage events.

```typescript
import { createEventStack } from "@solid-primitives/event-bus";

const bus = createEventStack<string, { message: string }>({
  // toValue parsing function is optional
  toValue: e => ({ message: e })
});
// can be destructured:
const { listen, emit, clear, value } = bus;

const listener: EventStackListener<{ text: string }> = ({ event, stack, remove }) => {
  console.log(event, stack);
  // you can remove the value from stack
  remove();
};
bus.listen(listener);

bus.emit({ text: "foo" });

// a signal accessor:
bus.value() // => { text: string }[]

bus.setValue(stack => stack.filter(item => {...}))
```

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

### Get Position Relative to Element

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/mouse/README.md

Converts page coordinates to coordinates relative to a specified element.

```typescript
const pos = getPositionToElement(pageX, pageY, element);
```

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

### Create Permission State

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/permission/README.md

Use the createPermission function to get the permission state for a given descriptor.

```typescript
const state: "unknown" | PermissionState = createPermission(descriptor: PermissionDescription | PermissionName);
```

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

### Create and Use GraphQL Client

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/graphql/README.md

Initialize a GraphQL client with a URL and create a query. The query function returns data and a refetch function.

```typescript
import { createGraphQLClient, gql } from "@solid-primitives/graphql";

const newQuery = createGraphQLClient("https://foobar.com/v1/api");
const [data, { refetch }] = newQuery(
  gql`
    query data($path: ID!) {
      PageItem(id: $path) {
        content {
          body
        }
      }
    }
  `,
  { path: "home" },
);
```

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

### Get Timestamp

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/date/README.md

Converts various inputs (timestamp, date string, Date instance) into a timestamp number.

```typescript
/**
 * @param init timestamp `number` | date `string` | `Date` instance
 * @returns timestamp `number`
 */
const getTime = (init: DateInit): number
```

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

### Create Latest Updated Source Values

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/memo/README.md

Use createLatestMany to get the values of all sources that were updated in the last tick.

```typescript
import { createLatestMany } from "@solid-primitives/memo";

const [count, setCount] = createSignal(1);
const [text, setText] = createSignal("hello");

const lastUpdated = createLatestMany([count, text]);

lastUpdated(); // => [1, "hello"]
setCount(4);
lastUpdated(); // => [4]
```

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

### Static Dictionaries with createMemo

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/i18n/README.md

Use createMemo for static dictionaries when dynamic loading is not required. This example shows how to import dictionaries and create a memoized flattened dictionary for translation.

```tsx
import * as en from "./i18n/en.js";
import * as fr from "./i18n/fr.js";
import * as es from "./i18n/es.js";

const dictionaries = {
  en: en.dict,
  fr: fr.dict,
  es: es.dict,
};

const [locale, setLocale] = createSignal<Locale>("en");

const dict = createMemo(() => i18n.flatten(dictionaries[locale()]));

const t = i18n.translator(dict);
```

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

### Get Date Instance

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/date/README.md

Converts various inputs (timestamp, date string, Date instance) into a Date instance.

```typescript
/**
 * @param init timestamp `number` | date `string` | `Date` instance
 * @returns `Date` instance
 */
const getDate = (init: DateInit): Date
```

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

### Create WebSocket Server with Ping-Pong

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/websocket/README.md

Sets up a WebSocket server that listens for 'ping' messages and responds with 'pong'. This example demonstrates basic message handling and error reporting back to the client.

```typescript
import { createWebSocketServer } from "solid-start/websocket";
import server$ from "solid-start/server";

const pingPong = createWebSocketServer(
  server$(function (webSocket) {
    webSocket.addEventListener("message", async msg => {
      try {
        // Parse the incoming message
        let incomingMessage = JSON.parse(msg.data);
        console.log(incomingMessage);

        switch (incomingMessage.type) {
          case "ping":
            webSocket.send(
              JSON.stringify([
                {
                  type: "pong",
                  data: {
                    id: incomingMessage.data.id,
                    time: Date.now(),
                  },
                },
              ]),
            );
            break;
        }
      } catch (err: any) {
        // Report any exceptions directly back to the client. As with our handleErrors() this
        // probably isn't what you'd want to do in production, but it's convenient when testing.
        webSocket.send(JSON.stringify({ error: err.stack }));
      }
    });
  }),
);
```

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

### Using trackStore for Deep Tracking

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/history/README.md

Illustrates using `trackStore` from `@solid-primitives/deep` for granular store tracking and `structuredClone` for deep cloning state.

```ts
import { trackStore } from "@solid-primitives/deep";

const history = createUndoHistory(() => {
  // track any update to the store
  trackStore(state);
  // clone the object underneath the store
  const copy = structuredClone(unwrap(state));
  // reconcile the state back to the tracked value
  return () => setState(reconcile(copy));
});
```

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

### SSEReadyState Enum Example

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/sse/README.md

Demonstrates how to import and access the SSEReadyState constants for managing connection states. These constants are tree-shakeable.

```typescript
import { SSEReadyState } from "@solid-primitives/sse";

SSEReadyState.CONNECTING; // 0
SSEReadyState.OPEN; // 1
SSEReadyState.CLOSED; // 2
```

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

### IndexRange Component Usage

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/range/README.md

Shows basic usage of the `<IndexRange>` control flow component with specified start, to, and step props.

```tsx
<IndexRange start={2} to={14} step={0.5}>
   <div></div>
</IndexRange>

```

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

### Basic ReactiveSet Usage

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/set/README.md

Demonstrates creating a ReactiveSet, listening to its changes reactively, and applying standard Set operations.

```typescript
const set = new ReactiveSet([1, 1, 2, 3]);

// listen for changes reactively
createEffect(() => {
  [...set]; // => [1,2,3] (reactive on any change)
  set.has(2); // => true (reactive on change to the result)
});

// apply like with normal Set
set.add(4);
set.delete(2);
set.clear();
```

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

### indexRange Function Definition

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/range/README.md

Defines the signature for the `indexRange` function, which maps a number range with specified start, to, and step values.

```typescript
function indexRange<T>(
  start: Accessor<number>,
  to: Accessor<number>,
  step: Accessor<number>,
  mapFn: (n: Accessor<number>) => T,
  options?: {
    fallback?: Accessor<T>;
  },
): Accessor<T[]>;

```

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

### createAudio

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/audio/README.md

Creates a comprehensive audio player with reactive properties for controlling playback state, volume, and accessing duration and current time. It also provides controls for seeking and volume adjustment.

```APIDOC
## createAudio

### Description

Creates a very basic audio/sound player with reactive properties to control the audio. Be careful not to destructure the value properties provided by the primitive as it will likely break reactivity.

### Method Signature

```typescript
function createAudio(
  src: AudioSource | Accessor<AudioSource>,
  playing?: Accessor<boolean>,
  volume?: Accessor<number>,
): [
  {
    state: AudioState;
    currentTime: number;
    duration: number;
    volume: number;
    player: HTMLAudioElement;
  },
  {
    seek: (time: number) => void;
    setVolume: (volume: number) => void;
    play: VoidFunction;
    pause: VoidFunction;
  },
];
```

### Parameters

- **src** (AudioSource | Accessor<AudioSource>) - The source of the audio file, can be a signal.
- **playing** (Accessor<boolean>, optional) - A signal to control the playing state.
- **volume** (Accessor<number>, optional) - A signal to control the volume.

### Returns

A tuple containing:
1. An object with reactive properties:
   - **state**: The current audio state (e.g., 'LOADING', 'PLAYING', 'PAUSED').
   - **currentTime**: The current playback time in seconds.
   - **duration**: The total duration of the audio in seconds.
   - **volume**: The current volume level.
   - **player**: The underlying HTMLAudioElement instance.
2. An object with control functions:
   - **seek**: Function to seek to a specific time in the audio.
   - **setVolume**: Function to set the audio volume.
   - **play**: Function to play the audio.
   - **pause**: Function to pause the audio.
```

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

### makeResizeObserver

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/resize-observer/README.md

Instantiates a new ResizeObserver that automatically gets disposed on cleanup. It returns observe and unobserve functions for managing targets.

```APIDOC
## makeResizeObserver

### Description
Instantiates a new ResizeObserver that automatically gets disposed on cleanup. It returns `observe` and `unobserve` functions for managing targets.

### Usage
```ts
import { makeResizeObserver } from "@solid-primitives/resize-observer";

const { observe, unobserve } = makeResizeObserver(handleObserverCallback, { box: "content-box" });
observe(document.body);
observe(ref);

function handleObserverCallback(entries: ResizeObserverEntry[]) {
  for (const entry of entries) {
    console.log(entry.contentRect.width);
  }
}
```

### Disposing
`makeResizeObserver` will dispose itself with its parent reactive owner. To dispose early, wrap the primitive with a [`createRoot`](https://www.solidjs.com/docs/latest/api#createroot).

```ts
const { dispose } = createRoot(dispose => {
  const { observe, unobserve } = makeResizeObserver(handleObserverCallback);
  return { dispose, observe, unobserve };
});
// dispose early
dispose();
```
```

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

### Run Demo Application

Source: https://github.com/solidjs-community/solid-primitives/blob/main/packages/storage/tauri-storage/README.md

Commands to run the tauriStorage demo application. Use 'npm run dev' for the web version and 'npm run tauri dev' for the Tauri version.

```bash
# web version
npm run dev
# tauri version
npm run tauri dev
```