open-index/open-npm huggingface dataset:
npm package: @288-toolkit/base64-filters
Description: ```sh npm i @288-toolkit/base64-filters ```
Author: DeuxHuitHuit
Latest version: 1.0.2

# Base64-filters

```sh
npm i @288-toolkit/base64-filters
```

This modules provides functions that will encode and decode positive numeric filters into base64
strings. This is suitable for use in URLs, since it will use the url safe variant of base64.

The main api are the functions `encodeFilters` and `decodeFilters`. It will use 2 formats, depending
on the number of filters: If _all_ filters have one or zero value, the layout will be x 16 bits
numbers, one for each filter. 0 is used to represent no value. if _any_ filter have more than one
value, the layout will be 1 8 bits number for the length, followed by each value on 2 bytes
(lowest/highest).

This means that the maximum value for a filter is 65535 and the maximum number of values per filter
is 255. Only positive values are supported.

You can also choose the format strategy by using either `encodeSingleFilters` or
`encodeMultiFilters`, along with their respective `decode` functions.
npm package: @288-toolkit/cookie-popup
Description: ```sh pnpm i @288-toolkit/cookie-popup ```
Author: DeuxHuitHuit
Latest version: 3.0.7

# Cookie-popup

```sh
pnpm i @288-toolkit/cookie-popup
```

A cookie popup behavior component. Provides `accept` and `deny` methods to deal with the user's
choice.

## Props

### gtmConsentEvent

The consent event pushed to the dataLayer when the user accepts cookies.

```ts
export let gtmConsentEvent: Maybe<string> = null;
```

### key

The storage key used to persist the popup dismissal. Must be unique across projects.

```ts
export let key: string;
```

### maxAge

How long the cookie popup should take to re-appear when dismissed. Default: 30 days.

```ts
 export let maxAge = 1000 _ 60 _ 60 _ 24 _ 30; // 30 days
```

### timeout

How long the popup should take to show up on the page. Default: 0.

```ts
export let timeout = 0;
```

## Slot props

-   `accept` (`() => void`): The function to call when the user accepts cookies
-   `deny` (`() => void`): The function to call when the user denies cookies

## Example

```svelte
<script lang="ts">
	import { CookiePopup } from '@288-toolkit/cookie-popup';
</script>

<CookiePopup
	key="my-project-cookie-banner"
	gtmConsentEvent="consent"
	timeout={500}
	let:accept
	let:deny
>
	<div>
		<p>This site uses cookies</p>
		<button on:click={deny}> Deny </button>
		<button on:click={accept}> Accept </button>
	</div>
</CookiePopup>
```
npm package: @288-toolkit/copyright
Description: ```sh pnpm i @288-toolkit/copyright ```
Author: DeuxHuitHuit
Latest version: 3.0.0

# Copyright

```sh
pnpm i @288-toolkit/copyright
```

Outputs a website copyright in a standardized way. The publish year is the year the site was put
online. If the current year is greater, the output will automatically be updated to display a range
of year.

```svelte
<Copyright as="small" orgName="288 inc." publishYear={2022} />
```

## Props

-   `publishYear` (`number`): The year the website was put online.
-   `orgName` (`string`): The organization name to display in the copyright.
-   `as` (`string`): The element to use for the copyright. DEFAULT: `small`.
npm package: @288-toolkit/device
Description: A collection of functions, stores and actions to work with the user's device.
Author: DeuxHuitHuit
Latest version: 5.0.0

# Device

A collection of functions, stores and actions to work with the user's device.

## Media

### `createMatchMediaStore`

A readable store which is true when the media query matches and false when it doesn't.

```ts
const reducedData = createMatchMediaStore('(prefers-reduced-data)');

$: if ($reducedData) {
	// ...
} else {
	// ...
}
```

### `isTouch`

A readable store that returns whether the user is using a touch device.

### `reducedMotion`

A readable store that returns whether the user has requested reduced motion.

### `runOnMatchMedia`

A function that allows you to run a callback only when the media matches the specified condition
('matches' or 'doesNotMatch'). The callback can return a cleanup function that will be called when
the media changes.

The media is determined by the `MediaStore` store (see `createMatchMediaStore`).

```ts
import { runOnMatchMedia, createMediaMediaStore } from '@288-toolkit/device/media';

// Run a callback only when the viewport size is below 800px
const destroy = runOnMatchMedia(createMediaMediaStore('(max-width: 800px)'), 'matches', () => {
	// do something
});

// Later, when you want to unsubscribe from the store and call the cleanup function if it exists
destroy();
```

### `runActionOnMatchMedia`

Uses `runOnMatchMedia` to run a Svelte action only when the media matches the specified condition.

The action can be typed via generic params.

```ts
import { runActionOnMatchMedia, createMediaMediaStore } from '@288-toolkit/device/media';
import { scroll } from 'motion';

// Run a Svelte action only when the viewport size is below 1200px
const myAction = runActionOnMatchMedia<
	HTMLButtonElement,
	{
		test: string;
	},
	{ 'on:visible': (e: CustomEvent) => void }
>(createMediaMediaStore('(min-width: 1200px)'), 'doesNotMatch', (node, params) => {
	const unsubscribe = scroll(() => {
		// do something
	});
	return {
		destroy: () => {
			unsubscribe();
		},
		update: (params) => {
			// Code here will only be run when the params change and the viewport size is below 1200px
		}
	};
});
```

## Window

### `createWindowEventStore`

Create a readable store that listens to a window event. Using a store has the advantage of having
multiple event handlers for the same event listener, which is good for memory management.

You can create a store for any window event. This package already exports the following:

-   `click`
-   `clickUseCapture`
-   `focus`
-   `focusin`
-   `keydown`
-   `pointerdown`
-   `resize`
-   `scroll`

### `currentScroll`

A readable store that returns the current scroll positions of the user (x and y).
npm package: @288-toolkit/functions
Description: ```sh npm i @288-toolkit/functions ```
Author: DeuxHuitHuit
Latest version: 1.0.0

# Functions

```sh
npm i @288-toolkit/functions
```

A collection of functions to wrap other functions with.

## `once()`

Create a function that can only be invoked once.

A re-export of https://github.com/angus-c/just/tree/master/packages/function-once.

## `expirable()`

Creates an expirable version of a value.

The `ttl` is the time to live, in seconds, for the data.

Returns a function that returns the value if it is not expired.

```ts
const expirable: <T>(value: T, ttl: number) => T;
```

## `runCallbacks()`

Batch multiple functions into one.

```ts
const unsubscribeAll = runCallbacks(
	store.subscribe(),
	anotherStore.subscribe(),
	wowAnotherStore.subsribe()
);

unsubscribeAll();
```
npm package: @288-toolkit/html-elements
Description: ```sh npm i @288-toolkit/html-elements ```
Author: DeuxHuitHuit
Latest version: 3.1.15

# Html-elements

```sh
npm i @288-toolkit/html-elements
```

A collection of convenient wrapper components around basic html elements.

## `HtmlAnchor.svelte`

Renders a HTML link (anchor). External links will have `noopener noreferrer` rel and `_blank` target
attributes applied. The only required prop is `href`.

## Slot props

-   `external` (`boolean`): Wether the url is an external url.

## `HtmlImg.svelte`

A wrapper around an html `<img>` element.

-   Automatically adds an empty alt attribute.
-   Only outputs `src` if there is no `srcset`.

## `HtmlVideo.svelte`

A wrapper around an html video element.

-   Automatically adds `playsinline` if `autoplay` is `true`.
-   Automatically adds `disableremoteplayback` (can be removed by passing
    `disableremoteplayback={false}`)
-   Automatically manages `x-webkit-airplay` attribute.

## `HtmlTime.svelte`

A wrapper component arund the <time> html element.

## Props

-   `date` (`Date`): The date to display
-   `formatOptions` (`FormatDateOptions`): The date formatting options (see
    [format package](../format/README.md))

## Slot props

-   `formattedDate` (`string`): The formatted date

## Examples

```svelte
<Time
	date={new Date('2023-04-17T21:34:50.360Z')}
	formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}
/>
```

```svelte
<Time
	date={new Date('2023-04-17T21:34:50.360Z')}
	formatOptions={{ day: 'numeric', month: 'long' }}
	let:formattedDate
>
	<span class="text-[red]">
		{formattedDate}
	</span>
</Time>
```
npm package: @288-toolkit/http
Description: A collection of functions to work with http.
Author: DeuxHuitHuit
Latest version: 4.4.1

# Http

A collection of functions to work with http.

## `cacheHeaders`

Generates a `cache-control` header object from the provided options.

If `enabled: false`, the `cache-control` header will be
`'private, no-cache, noindex, max-age=0, must-revalidate'`.

```ts
type CacheHeadersOptions = {
	// Disables the cache entirely
	enabled?: boolean;
	// All cache-control directives
	maxAge?: number;
	sMaxAge?: number;
	staleWhileRevalidate?: number;
	staleIfError?: number;
	private?: boolean;
	public?: boolean;
	noCache?: boolean;
	noStore?: boolean;
	noTransform?: boolean;
	immutable?: boolean;
	mustRevalidate?: boolean;
	proxyRevalidate?: boolean;
	mustUnderstand?: boolean;
};

const cacheControl = cacheHeaders({
	// ...
});

return new Response('', {
	headers: cacheControl
});
```

## `fetchTimeout`

Fetch with a timeout. Defaults to 20 seconds.

```ts
// 5 second timeout
const response = await fetchTimeout(url, { ... }, 5000);
```

## `isRedirectResponse`

Returns `true` if the response is a redirect response.

```ts
const isRedirectResponse: (response: Response) => boolean;
```

## `isWithoutBody`

Returns `true` if the request should not have a body.

```ts
const isWithoutBody: (request: Request) => boolean;
```

## `getLangFromRequest` (deprecated)

Get the language from the request.

```ts
const getLangFromRequest = <Language extends string>(
	request: Request,
	{ supportedLanguages: Language[]; defaultLanguage: Language }
) => Language;
```

## `parseAcceptLanguage`

Given a string of the form "en,fr;q=0.9,de;q=0.8", returns an array of `AcceptLanguageEntry` ordered
by priority. This is mostly used to parse the `'Accept-Language'` header.

```ts
type AcceptLanguageEntry = {
	lang: string;
	priority: number;
};

const parseAcceptLanguage = (acceptLanguage: string): Maybe<AcceptLanguageEntry[]>
```

## `acceptedLanguage`

Get the accepted language from the request.

```ts
const language = acceptedLanguage(request, {
	supportedLanguages: ['en', 'fr'],
	defaultLanguage: 'en'
});
```

## `getVercelIpHeaders`

Get Vercel headers from a request.

```ts
const getVercelIpHeaders: (request: Request) => {
	country: Maybe<string>;
	region: Maybe<string>;
	city: Maybe<string>;
	latitude: Maybe<string>;
	longitude: Maybe<string>;
	timezone: Maybe<string>;
	ip: Maybe<string>;
};
```
npm package: @288-toolkit/math
Description: ```sh npm i @288-toolkit/math ```
Author: DeuxHuitHuit
Latest version: 1.1.1

# Math

```sh
npm i @288-toolkit/math
```

A collection of math related functions.

## `randomInt()`

Get a random integer between two integers. The given range includes both the min and the max.

Asking for (1, 6) will simulate a d6 and (0, array.length - 1) will return a correct index. If the
range is negative, the min and max will be swapped.

This function tries to not be biased, by rejecting values that would cause a non-uniform
distribution. See https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle.

## `hash()`

Create a hash of a string as a string.

```ts
const hash = await hash('hello'); // sha-1 by default
const hash = await hash('hello', 'SHA-256'); // sha-256
```

## `lerp()`

Linear interpolation function that returns a point between two bounds derived from a value between
two other bounds. It makes sure to not divide or multiply by zero.

X1 and x2 are the target bounds.

Y1 and y2 are the two bounds between which the new value should be found.

Target is the point between to bounds from which we derive a new value.

```ts
const lerp: (x1: number, x2: number, y1: number, y2: number, target: number) => number;
```

```ts
// Convert a `progress` value that's between 0 and 1 to a width between 300 and 500.
const newWidth = lerp(0, 1, 300, 500, progress);
```

## `clamp()`

Restrict a number within a range.

A re-export of https://github.com/angus-c/just/tree/master/packages/number-clamp

## `computeGeoDistance()`

Computes the distance between two points on the earth's surface, using the Haversine formula.

```ts
const distance = computeGeoDistance(0.2323, 53530.3434);
```
npm package: @288-toolkit/strings
Description: A collection of functions to work with strings.
Author: DeuxHuitHuit
Latest version: 4.3.1

# Strings

A collection of functions to work with strings.

## capitalize

Capitalizes the first letter of a string.

## uncapitalize

Uncapitalize the first letter of a string.

## textToId

Converts text to a valid HTML id.

## normalize

Normalizes a string by replacing accents with their base characters.

## removeLineBreaks

Removes line breaks from a string.

## removeSpaces

Removes all spaces from a string.

## removeTrailingSlash

Removes trailing slashes from a string.

## objectToQueryString

Returns a string of URL parameters from an object, filtering out `null` values.

## taggedTemplateToStringForSyntaxHighlighting

Convert a tagged template literal to a string for syntax highlighting.

```ts
import {
	taggedTemplateToStringForSyntaxHighlighting,
	type TemplateParamsArray
} from '@288-toolkit/strings';

const html = (t: TemplateStringsArray) => {
	return taggedTemplateToStringForSyntaxHighlighting(t);
};

// The string is unmodified but the editor can now syntax highlight it.
html`<div></div>`;
```

## toBase64

Converts a string into a base64 encoded string.

```typescript
toBase64(str: string): string
```

## fromBase64

Converts a base64 encoded string into a string.

```typescript
fromBase64(str: string): string
```

## base64ToUrlSafe

Converts a valid base64 string into a URL-safe base64 string.

```typescript
base64ToUrlSafe(str: string): string
```

## base64FromUrlSafe

Converts a URL-safe base64 string into a valid base64 string.

```typescript
base64FromUrlSafe(str: string): string
```

## base64FromBytes

Encodes an array of bytes into a base64 string.

```typescript
base64FromBytes(array: Uint8Array)
```

## base64ToBytes

Decodes a base64 string into an array of bytes.

```typescript
base64ToBytes(base64: string)
```
npm package: @288-toolkit/timeout
Description: A collection of function for timeouts.
Author: DeuxHuitHuit
Latest version: 4.0.0

# Timeout

A collection of function for timeouts.

## `sleep`

Resolves a promise after a given time.

## `throttle`

Return a throttled function that will run the callback at most once until the timer expires.

A re-export of https://github.com/angus-c/just/tree/master/packages/function-throttle

## `debounce`

Return a debounced function that will run the callback <time> ms after the last invocation.

A re-export of https://github.com/angus-c/just/tree/master/packages/function-debounce

## `interval`

Creates an interval that calls a function at a fixed interval using requestAnimationFrame. Returns a
function that cancels the interval.

## `throttleRaf`

Return a throttled function that is called at most once per animation frame.