open-index/open-npm huggingface dataset:
npm package: @playboy-dm/monroe-ui
Description: Library of React components for Playboy.
Author: Supergroup.co
Latest version: 0.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center" style="margin:25px auto;">
  <a href="https://github.com/playboyenterprises/monroe-ui">
    <img width="200" src="https://raw.githubusercontent.com/playboyenterprises/monroe-ui/develop/public/images/monroe-uiv3.svg?token=AAFTD6E4HANLZU3JWKNXKFC7FQDYG" title="Monroe UI by Playboy">
  </a>
</p>

<h1 align="center">The Official Component Library of Playboy</h1>

## A custom and React component library that powers Playboy's user interface design.

## Links

- [Storybook](https://storybook.playboyengineering.com/)
- [Design Language System in Invision](https://projects.invisionapp.com/dsm/monroe/playboy-dls-v-2)
- [NPM Package](https://www.npmjs.com/package/@playboy-dm/monroe-ui)

## Install

```bash
git clone git@github.com:playboyenterprises/monroe-ui.git
yarn install
yarn storybook
```

## TypeScript

This repository uses typescript and exports the necessary types to be used in your project.

## React

To use MonroeUI components in your application:

```jsx
import React from 'react';
import { Button } from '@playboy-dm/monroe-ui';
...
return ( <Button size="small">Click Me</Button> );
```
npm package: @playbyteinc/pg-tinyqb
Description: Zero dependencies Query Builder for any runtime
Author: Matthew Robb
Latest version: 0.1.1

# pg-tinyqb

Utility to generate postgresql queries with ease.

## Install

`npm install --save @playbyteinc/pg-tinyqb`

## Introduction
The main idea behind the query builder is to be able build a query thanks to a configuration object:
- the name of a table
- its primary key(s)
- the columns we want to read
- the columns we want to write

The builder returns a function which ask for the query parameter:
- id
- data object

And then returns queryData that can be directly passed to the `client.namedQuery` method.

Some builder even allows to create several builder at once.

For example the crud query builder give us builders to:

- create selectOne query to select one item:

```js
const selectOneUserById = selectOne({
    table: 'user',
    primaryKey: 'id',
    returnCols: ['name', 'firstname'],
});

// give us a function to get one user by id

selectOneUserById(1);
// returns:
{
    sql: 'SELECT * FROM user WHERE id=$id;',
    parameters: {
        id: 1,
    },
    returnOne: true,
}
```

- create queries for all basic crud operations:

```js
// configuring the crud builder for the user table
const userQueries = crud({
    table: 'user',
    primaryKey: 'id',
    writableCols: ['name', 'firstname'],
});

// give us a collection of functions to query the user table :

userQueries.selectOne(1);
// returns:
{
    sql: 'SELECT * FROM user WHERE id=$id;',
    parameters: {
        id: 1,
    },
    returnOne: true,
}

userQueries.select({ name: 'doe' });
// returns:
{
    sql: 'SELECT * FROM user WHERE name=$name ORDER BY id ASC;',
    parameters: { name: 'doe' },
}

userQueries.insertOne({ name: 'doe', firstname: 'john' });
// returns:
{
    sql: (
`INSERT INTO user (name, firstname)
VALUES ($name, $firstname)
RETURNING *;`
    ),
    parameters: {
        name: 'doe',
        firstname: 'john',
    },
    returnOne: true,
}

userQueries.batchInsert([
    { name: 'doe', firstname: 'john' },
    { name: 'doe', firstname: 'jane' },
]);
// returns:
{
    sql: (
`INSERT INTO user(name, firstname)
VALUES ('doe', 'john'), ('doe', 'jane')
RETURNING *;`
    ),
    parameters: {
        name1: 'doe',
        firstname1: 'john',
        name2: 'doe',
        firstname2: 'jane',
    },
}

userQueries.updateOne(1, { firstname: 'johnny' });
// returns:
{
    sql: (
`UPDATE user SET firstname=$firstname
WHERE id=$id RETURNING *;`
    ),
    parameters: {
        id: 1,
        firstname: 'johnny',
    }
}

userQueries.removeOne(1);
// returns:
{
    sql: `DELETE FROM user WHERE id=$id RETURNING *;`,
    parameters: { id: 1 },
    returnOne: true,
}
//

userQueries.batchRemove([1, 2]);
// returns:
{
    sql: (
`DELETE FROM user
WHERE id IN ($id1, $id2)
RETURNING *;`
    ),
    parameters: { id1: 1, id2: 2 },
}

userQueries.countAll();
// returns:
{
    sql: `SELECT COUNT(*) FROM user;`,
}
```
npm package: @playcambria/tiled-map-type-guard
Description: ![Github Actions](https://github.com/workadventure/tiled-map-type-guard/workflows/Release/badge.svg) [![codecov](https://codecov.io/gh/workadventure/tiled-map-type-guard/branch/main/graph/badge.svg?token=UCCA6D6JCB)](https://codecov.io/gh/workadventure/ti
Author: Forked From: workadventure/tiled-map-type-guard
Latest version: 1.2.9

# Tiled map type guards

![Github Actions](https://github.com/workadventure/tiled-map-type-guard/workflows/Release/badge.svg) [![codecov](https://codecov.io/gh/workadventure/tiled-map-type-guard/branch/main/graph/badge.svg?token=UCCA6D6JCB)](https://codecov.io/gh/workadventure/tiled-map-type-guard)

When working with [Tiled](https://www.mapeditor.org/) maps, it can be useful to have property defined types in Typescript.

This package contains a set of interfaces that map the [Tiled map JSON format](https://doc.mapeditor.org/en/stable/reference/json-map-format/).

Moreover, this package comes with [Zod type guards](https://github.com/colinhacks/zod) that will allow
you to actually **check** that the JSON file ou are reading is actually a well-formed Tiled map.

Available interfaces:

- `ITiledMap`
- `ITiledMapLayer`
  - `ITiledMapGroupLayer`
  - `ITiledMapImageLayer`
  - `ITiledMapObjectLayer`
    - `ITiledMapObject`
      - `ITiledMapText`
      - `ITiledMapPoint`
  - `ITiledMapTileLayer`
- `ITiledMapTileset`
  - `ITiledMapTile`
    - `ITiledMapWangColor`
    - `ITiledMapWangSet`
    - `ITiledMapWangTile`
- `ITiledMapChunk`
- `ITiledMapFrame`
- `ITiledMapGrid`
- `ITiledMapOffset`
- `ITiledMapProperty`
- `ITiledMapTerrain`
- `ITiledMapTransformations`

Usage:

```ts
// This will throw an error if "data" is not matching the type ITiledMap
const map: ITiledMap = ITiledMap.parse(data);
```
npm package: @playcanvas/attribute-parser
Description: The PlayCanvas Attribute Parser
Author: PlayCanvas
Latest version: 1.10.1

# PlayCanvas Attribute Parser

This is the official JSDoc attribute parser used in the PlayCanvas Editor.

It collects metadata from user scripts by parsing `@attribute` JSDoc annotations. These attributes enable the PlayCanvas Editor to expose UI controls and contextual information for your script properties.

Example

Given a script like this:

```javascript
class Rotator extends ScriptType {
  /**
   * @attribute
   * Speed determines how fast to rotate things
   */
  speed = new Vec3();

  /**
   * @attribute
   * An array of Entities to rotate
   *
   * @type {Entity[]}
   */
  thingsToRotate;
}
```

The parser outputs:


```json
{
  "rotator": {
    "attributes": {
      "speed": {
        "type": "vec3",
        "name": "speed",
        "array": false,
        "description": "Speed determines how fast to rotate things",
        "default": [0, 0, 0]
      },
      "thingsToRotate": {
        "type": "entity",
        "name": "thingsToRotate",
        "array": true,
        "description": "An array of Entities to rotate",
        "default": null
      }
    },
    "errors": []
  }
}
```

JSDocs tags are parsed and values and outputs the metadata in a serializable format.

### Usage 

```javascript
// Initialise the parser
// Initialize the parser
const parser = new JSDocParser();
await parser.init();

// Load your source files: {[filename: string]: string}[]
const scripts = await fetchScripts([...paths, './playcanvas.d.ts']);

// Update the parser program
parser.updateProgram(scripts);

// Parse attributes from the entry point
const [attributes, errors] = parser.parseAttributes("./index.js");
```

### Attribute structure

See the [test fixtures](https://github.com/playcanvas/attribute-parser/tree/main/test/fixtures) for examples of supported JSDoc tags and output formats.

### Tests

This project includes good test coverage for all supported tag formats and edge cases.
npm package: @playcanvas/blocks
Description: High level abstract 3D primitives for React
Latest version: 0.3.7

[![pkg.pr.new](https://pkg.pr.new/badge/playcanvas/blocks)](https://pkg.pr.new/~/playcanvas/blocks)

# Building Blocks for 3D

A set of beautifully crafted high-level 3D primitives for React, built on @playcanvas/react — designed to help you compose 3D content with minimal setup.

## Getting Started

```bash
npm install @playcanvas/blocks playcanvas
```

Follow this guide to [Install Tailwind v4](https://tailwindcss.com/docs/installation)

And add the following top your css

```css
@import "@playcanvas/blocks"
@source "../../node_modules/@playcanvas/blocks";
```

...and you're done!

## Blocks

### Splat Viewer

A responsive and composable component for displaying **Gaussian splats**.

<img width="892" alt="image" src="https://github.com/user-attachments/assets/a43d2955-85ff-4339-8847-109ea9577111" />

Includes built-in camera controls, loading states, and optional UI slots for overlays or actions.  
Supports large assets with lazy loading and automatic framing. Use it in modals, pages, or full-screen scenes. 

Supports compressed gaussian splats.

```jsx
import { Viewer } from "@playcanvas/blocks"

export function SplatViewer() {
    return (
      <Viewer.Splat src='./splat.ply' className="rounded shadow cursor-grab active:cursor-grabbing" >
        <Viewer.Controls >
          <div className="flex gap-1 pointer-events-auto flex-grow">
            <Viewer.FullScreenButton />
            <Viewer.DownloadButton />
          </div>
          <div className="flex gap-1 pointer-events-auto">
            <Viewer.CameraModeToggle />
            <Viewer.HelpButton />
            <Viewer.MenuButton />
          </div>
        </Viewer.Controls>
      </Viewer.Splat>
    )
}
```
npm package: @playcanvas/canvas-mock
Description: Mock for HTMLCanvasElement and related classes
Author: PlayCanvas
Latest version: 1.1.0

# Canvas-Mock: A Mock for HTMLCanvasElement

The `canvas-mock` package recreates the `HTMLCanvasElement` API and is intended to be used in a Node.js environment. This makes it possible to run WebGL-based libraries server-side or to execute unit tests for WebGL codebases within Node.

It has been tested with the [PlayCanvas Engine](https://github.com/playcanvas/engine) but other libraries should be compatible too.

## Installation

Ensure you have [node](http://nodejs.org/) installed. Then:

```bash
npm install @playcanvas/canvas-mock
```

## Usage

`canvas-mock` is currently only available as ES Modules. To use it, do:

```javascript
import { HTMLCanvasElement } from '@playcanvas/canvas-mock';

const width = 500;
const height = 500;
const canvas = new HTMLCanvasElement(width, height);
const gl = canvas.getContext('webgl');

// Use WebGL API as normal
```

Currently, only `webgl` or `2d` contexts can be requested (`webgl2` is unavailable). The WebGL 1.0 implementation assumes a minimum supported spec (so no extensions are available and capabilities are restricted to the absolute minimum allowed by the WebGL 1.0 spec).
npm package: @playcanvas/editor-api
Description: The PlayCanvas Editor API
Author: PlayCanvas
Latest version: 1.1.28
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# PlayCanvas Editor API

[![NPM Version](https://img.shields.io/npm/v/@playcanvas/editor-api)](https://www.npmjs.com/package/@playcanvas/editor-api)
[![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/editor-api)](https://npmtrends.com/@playcanvas/editor-api)
[![License](https://img.shields.io/npm/l/@playcanvas/editor-api)](https://github.com/playcanvas/editor-api/blob/main/LICENSE)
[![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
[![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
[![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)

| [User Manual](https://developer.playcanvas.com/user-manual/editor) | [API Reference](https://api.playcanvas.com/editor) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |

This is the PlayCanvas Editor API. You can find API documentation [here](https://api.playcanvas.com/modules/Editor.html).

## Installing

Run:

```sh
npm install
```

## Building

Run:

```sh
npm run build
```

This will create a UMD build under `dist/index.js` and an ES6 module under `dist/index.mjs`.

## Docs

To build the documentation run:

```sh
npm run docs
```

## Tests

To run tests run:

```sh
npm test
```

To step through the tests using Chrome run:

```sh
npm run test:debug
```
npm package: @playcanvas/jsdoc-template
Description: JSDoc 3.x and 4.x compatible template for PlayCanvas
Author: PlayCanvas
Latest version: 1.1.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# PlayCanvas JSDoc Template
This is a JSDoc 3.x and 4.x compatible template for the PlayCanvas API Reference. It is generated automatically during engine publishing process and hosted on: https://developer.playcanvas.com/api/

[![NPM version][npm-badge]][npm-url]
[![License][license-badge]][license-url]
[![CI][ci-badge]][ci-url]

## How to build

Ensure you have [Node.js](https://nodejs.org) installed. Then, install all of the required Node.js dependencies:

    npm install

Then you can build CSS styles:

    npm run build

To test static html files, you need to use PlayCanvas Engine repository. Clone https://github.com/playcanvas/engine besides this repository:

    ./playcanvas-jsdoc-template/
    ./engine/

Then edit `./engine/conf-api.json`, field `opts.template` to: `"../playcanvas-jsdoc-template"` so it will use your local copy of templates for building the docs, and then in `./engine/` run:

    npm run docs

Static files will be generated to:

    ./engine/docs/

These can be served by the web server of your choice or viewed directly by opening `./engine/docs/index.html` in a web browser.

[ci-badge]: https://github.com/playcanvas/playcanvas-jsdoc-template/actions/workflows/ci.yml/badge.svg
[ci-url]: https://github.com/playcanvas/playcanvas-jsdoc-template/actions/workflows/ci.yml
[npm-badge]: https://img.shields.io/npm/v/@playcanvas/jsdoc-template
[npm-url]: https://www.npmjs.com/package/@playcanvas/jsdoc-template
[license-badge]: https://img.shields.io/npm/l/@playcanvas/jsdoc-template.svg?cacheSeconds=2592000
[license-url]: LICENSE
npm package: @playcanvas/observer
Description: Generic implementation of the observer pattern
Author: PlayCanvas
Latest version: 1.7.1

# Observer - Observer Pattern for JS/TS

[![NPM Version](https://img.shields.io/npm/v/@playcanvas/observer)](https://www.npmjs.com/package/@playcanvas/observer)
[![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/observer)](https://npmtrends.com/@playcanvas/observer)
[![License](https://img.shields.io/npm/l/@playcanvas/observer)](https://github.com/playcanvas/observer/blob/main/LICENSE)
[![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
[![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
[![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)

| [User Manual](https://developer.playcanvas.com) | [API Reference](https://api.playcanvas.com/observer) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |

The PlayCanvas Observer is a powerful TypeScript library for managing and observing changes to objects. It allows tracking modifications to nested properties, emitting events on changes, and maintaining state consistency. This is particularly useful in applications where state management and change tracking are critical, such as in data-driven interfaces or collaborative applications.

## Installing

To install the NPM package, do:

```
npm install @playcanvas/observer --save-dev
```

## Usage

### Creating an Observer

```javascript
import Observer from '@playcanvas/observer';

const data = {
    name: 'John',
    age: 30,
    address: {
        city: 'New York',
        zip: '10001'
    }
};

const observer = new Observer(data);
```

### Listening for Changes

You can listen for changes to specific properties using the `on` method:

```javascript
observer.on('address.city:set', (newValue, oldValue) => {
    console.log(`City changed from ${oldValue} to ${newValue}`);
});

observer.set('address.city', 'San Francisco'); // Logs: City changed from New York to San Francisco
```

## Building

To generate a UMD and ESM build of the Observer library, run:

```
npm install
npm run build
```

The UMD build is `dist/index.js`. The ESM build is `dist/index.mjs`.

## API Docs

To build the API reference manual, run:

```
npm run docs
```

A pre-built API reference manual is hosted [here](https://api.playcanvas.com/observer/).
npm package: @playcanvas/rollup
Description: A collection of PlayCanvas Rollup/Vite plugins
Author: Mark Lundin
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @playcanvas/rollup

A set of useful [Rollup](https://rollupjs.org/) and [Vite](http://vite.dev/) plugins when working with the PlayCanvas engine.

## Installation

```bash
npm i @playcanvas/rollup
```

And in your vite or rollup config

```javascript
// rollup.config.mjs
import { fonts } from '@playcanvas/rollup';

export default {
	input: 'src/main.js',
	plugins: [fonts()]
};

```

## Fonts

PlayCanvas uses SDF fonts for rendering 2D text. This plugin generates the SDF at build time. Just import your `.ttf` font and the plugin will return the SDF. This will internally create an PlayCanvas compatible SDF font.

```javascript
import { Asset } from "playcanvas"
import courier from "fonts/courier.ttf?sdf"

const font = Asset('font', 'font', { url: courier })
```
npm package: @playcanvas/web-components
Description: Web Components for the PlayCanvas Engine
Author: PlayCanvas
Latest version: 0.3.0

# PlayCanvas Web Components

[![NPM Version](https://img.shields.io/npm/v/@playcanvas/web-components)](https://www.npmjs.com/package/@playcanvas/web-components)
[![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/web-components)](https://npmtrends.com/@playcanvas/web-components)
[![License](https://img.shields.io/npm/l/@playcanvas/web-components)](https://github.com/playcanvas/web-components/blob/main/LICENSE)
[![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
[![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
[![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)

| [User Manual](https://developer.playcanvas.com//user-manual/web-components) | [API Reference](https://api.playcanvas.com/web-components) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |

PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:

```html
<!-- A lit sphere -->
<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 0 3">
            <pc-camera></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 45 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="ball">
            <pc-render type="sphere"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>
```

## Examples

[![image](https://github.com/user-attachments/assets/25ac8dd3-abc9-4d65-8950-3d72ed1f7152)](https://playcanvas.github.io/web-components/examples)

See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples

## Usage

Please see the [Getting Started Guide](https://developer.playcanvas.com/user-manual/web-components/getting-started/) for installation and usage instructions.

## Development 

### Setting Up Local Development

1. Clone the repository:

   ```bash
   git clone https://github.com/playcanvas/web-components.git
   cd web-components
   ```

2. Install dependencies:

   ```bash
   npm install
   ```

3. Build the library in watch mode and start the development server:

   ```bash
   npm run dev
   ```

4. Open http://localhost:3000/examples/ in your browser to see the examples.

### Building

To build the library:

```bash
npm run build
```

The built files will be available in the `dist` directory.

### API Documentation

To generate API documentation:

```bash
npm run docs
```

The documentation will be generated in the `docs` directory.