open-index/open-npm huggingface dataset:
npm package: @pearl-js/pearl
Description: A Javascript library for building Browser User Interfaces.
Author: Beingana Jim Junior
Latest version: 1.1.0


# PEARL JS
### `[@pearl-js/pearl](https://www.npmjs.com/package/@pearl-js/pearl)`
A Javascript library for building Browser User Interfaces.
Pearl JS is a component base javascript rendering library for creating User Interfaces in the browser.

## Installation
`Pearl Js` can be added to a website by adding the following script in the `html` of your website.

```html
<script src="https://cdn.jsdelivr.net/npm/@pearl-js/pearl@1.0.1/umd/pearljs.production.js" ></script>
```

### Using `npm` or `yarn`

If your are using `npm` or `yarn` all you have to do is add the package to your project.

```bash
# npm
npm install @pearl-js/pearl

# yarn
yarn add @pearl-js/pearl
```

## Usage
Pearl can be used directly using javascript syntax but this is usually hard since you will write alot of functions so we developed a [babel plugin](https://www.npmjs.com/package/babel-plugin-jsx-to-pearl) that transforms `jsx` into `pearl` functions.

### Using plain Javascript
```js
const button = Pearl.createElement("button", {
  attributes: {
    id: "mybutton",
    className: "btn btn-primary"
  },
  events: {
    click: (e)=> {
      console.log('clicked')
    }
  },
  children: [
    "Click Me"
  ]
})

Pearl.append(button, document.getElementById('button-cover'), ()=>{
  console.log('mounted')
})

```
### Using `jsx`
```jsx
import Pearl, {append} from "@pearl-js/pearl";


const button = <button id="mybutton" onClick={(e)=>{
  console.log('clicked')
}} className="btn btn-primary" >Click Me</button>

append(button, document.getElementById('button-cover'), ()=>{
  console.log('mounted')
})
```

Both of the above create the same button.

If you want to use `jsx` you should install [babel-plugin-jsx-to-pearl](https://www.npmjs.com/package/babel-plugin-jsx-to-pearl) and also `@babel/plugin-syntax-jsx` and add them to your babel configuration. These will transform all `jsx` code into Pearl functions. And always add `@babel/plugin-syntax-jsx` before `babel-plugin-jsx-to-pearl`.
```bash
# using npm
npm install babel-plugin-jsx-to-pearl --save-dev

# using yarn
yarn add babel-plugin-jsx-to-pearl --dev
```
Inside the babel configuration file
```json
// .babelrc
{
  ...
  "plugins": [
    ...
    "@babel/plugin-syntax-jsx",
    "babel-plugin-jsx-to-pearl"
    ...
  ]
}
```
___
## License
MIT License
npm package: @pearl.com/pearl-widget
Description: A lightweight vanilla JS function to embed the Pearl Widget iframe into any webpage or app.
Author: Pearl.com
Latest version: 1.0.0

# @pearl.com/pearl-widget

Vanilla JavaScript library to embed the **Pearl Widget** iframe in your web application. Initialize the widget with an access key and mode for interactive chat or expert systems powered by Pearl.

## ✨ Features

- Embeds a secure iframe widget from Pearl
- Configurable via `accessKey` and `mode`
- Initializes via `postMessage` on iframe load
- Simple integration into any HTML page

By default chat starts in pearl-ai mode. To enable other mods you need to obtain `accessKey` [here](https://www.pearl.com/contact).

## 📦 Installation

Include `pearl-widget.global.js` in your HTML, or install via npm:

```bash
npm install @pearl.com/pearl-widget
```

### Import

```js
// ES Module
import { insertPearlWidget } from '@pearl.com/pearl-widget';

// CommonJS
const { insertPearlWidget } = require('@pearl.com/pearl-widget');
```

## 🚀 Usage

Add a container to your HTML:

```html
<div id="pearl-widget-container" style="width: 800px; height: 600px;"></div>
```

Then insert the widget:

```js
document.addEventListener('DOMContentLoaded', function() {
  insertPearlWidget('#pearl-widget-container', {
    accessKey: 'your-access-key', // Optional
    mode: 'pearl-ai'              // Optional
  });
});
```

## 🔧 Inputs

The `insertPearlWidget` function accepts a configuration object with the following optional properties:

| Property    | Type     | Description                                                                                         |
| ----------- | -------- | --------------------------------------------------------------------------------------------------- |
| `accessKey` | `string` | Optional. The key used to authenticate the widget session.                                      |
| `mode`      | `string` | Optional. Used only with **accessKey**. One of the available modes: `expert`, `pearl-ai`, `pearl-ai-verified`, `pearl-ai-expert`. |

## 🧪 Development

To build the package locally (if you set up a build process, e.g., for minification or module bundling):

```bash
npm run build
```

## 📄 License

MIT
npm package: @pearl.com/pearl-widget-angular
Description: Angular component wrapper for the Pearl Widget iframe
Author: Pearl.com
Latest version: 1.0.0

# @pearl.com/pearl-widget-angular

An Angular component that embeds the **Pearl Widget** iframe into your application. It allows initialization of the widget with an access key and mode, enabling interactive chat or expert systems powered by Pearl.

## ✨ Features

- Embeds a secure iframe widget from Pearl
- Configurable via `accessKey` and `mode`
- Automatically initializes via `postMessage` on iframe load
- Simple Angular integration

By default chat starts in pearl-ai mode. To enable other mods you need to obtain `accessKey` [here](https://www.pearl.com/contact).

## 📦 Installation

Install the widget package via npm:

```bash
npm install @pearl.com/pearl-widget-angular
```

## 🚀 Usage

```html
<pearl-widget
  [accessKey]="'your-access-key'"
  [mode]="'pearl-ai'"
></pearl-widget>
```

## 🔧 Inputs

| Input       | Type     | Description                                                                                         |
| ----------- | -------- | --------------------------------------------------------------------------------------------------- |
| `accessKey` | `string` | Optional. The key used to authenticate the widget session.                                      |
| `mode`      | `string` | Optional. Used only with **accessKey**. One of the available modes: `expert`, `pearl-ai`, `pearl-ai-verified`, `pearl-ai-expert`. |

## 🧪 Development

To build the package locally:

```bash
ng build pearl-widget
```

## 📄 License

MIT
npm package: @pearl.com/pearl-widget-react
Description: React component wrapper for the Pearl Widget iframe
Author: Pearl.com
Latest version: 1.0.0

# @pearl.com/pearl-widget-react

React component for embedding the **Pearl Widget** iframe in your application. Easily initialize the widget with an access key and mode for interactive chat or expert systems powered by Pearl.

## ✨ Features
- Embeds a secure iframe widget from Pearl
- Configurable via `accessKey` and `mode`
- Initializes via `postMessage` on iframe load
- Simple React integration

By default chat starts in pearl-ai mode. To enable other mods you need to obtain `accessKey` [here](https://www.pearl.com/contact).

## 📦 Installation
```bash
npm install @pearl.com/pearl-widget-react
```

## 🚀 Usage
```jsx
import { PearlWidget } from '@pearl.com/pearl-widget-react';

<PearlWidget accessKey="your-access-key" mode="pearl-ai" />
```

## 🛠️ Props
| Prop     | Type     | Description                                                                 |
|----------|----------|-----------------------------------------------------------------------------|
| accessKey   | string   | Optional. Key to authenticate the widget session.                            |
| mode     | string   | Optional. Widget mode: `expert`, `pearl-ai`, `pearl-ai-verified`, `pearl-ai-expert` |

## 🧑‍💻 Development
To build locally:
```bash
npm run build
```

## 📄 License
MIT
npm package: @pearl.com/pearl-widget-vue
Description: Vue component wrapper for the Pearl Widget iframe
Author: Pearl.com
Latest version: 1.0.0

# @pearl.com/pearl-widget-vue

Vue component to embed the **Pearl Widget** iframe in your web application. Initialize the widget with an access key and mode for interactive chat or expert systems powered by Pearl.

## ✨ Features

- Embeds a secure iframe widget from Pearl
- Configurable via `accessKey` and `mode`
- Initializes via `postMessage` on iframe load
- Simple Vue integration

By default chat starts in pearl-ai mode. To enable other mods you need to obtain `accessKey` [here](https://www.pearl.com/contact).


## 📦 Installation

```bash
npm install @pearl.com/pearl-widget-vue
# or
yarn add @pearl.com/pearl-widget-vue
```

## 🚀 Usage

```vue
<template>
  <div style="width: 800px; height: 600px;">
    <PearlWidget :accessKey="yourAccessKey" :mode="yourMode" />
  </div>
</template>

<script setup lang="ts">
import { PearlWidget } from '@pearl.com/pearl-widget-vue';
import { ref } from 'vue';

const yourAccessKey = ref('your-actual-access-key');
const yourMode = ref('pearl-ai'); // e.g., 'expert', 'pearl-ai', 'pearl-ai-verified'
</script>
```

## 🛠️ Props

- `accessKey` (String, optional): Your Pearl access key.
- `mode` (String, optional): Widget mode (e.g., `expert`, `pearl-ai`). Required if `accessKey` is provided.

## 🧑‍💻 Development

1. Clone the repository.
2. Install dependencies: `npm install`
3. Build the library: `npm run build`

The distributable files will be in the `dist` folder.
npm package: @pearlai/core
Description: Pearl is a powerful SDK for deploying AI agents in web environments, enabling automated workflows and interactions with various Google services.
Latest version: 0.0.4

# Pearl

Pearl is a powerful SDK for deploying AI agents in web environments, enabling automated workflows and interactions with various Google services.

## Features

- Easy deployment of AI agents for web automation
- Integration with Google services (Meet, Calendar, Docs, Sheets, Gmail)
- Customizable workflows with context-aware agents
- Event-driven architecture for responsive automation
- TypeScript support for enhanced developer experience

## Api Key

- pearl.computer/dashboard
npm package: @pearlbea/better-img-nutmeg
Description: A simple web component that adds a fallback url and error logging function to an image
Latest version: 1.7.4

# better-img-nutmeg

## Installation

Install the [npm package](https://www.npmjs.com/package/@pearlbea/better-img-nutmeg) or add the script from [unkpg](https://unpkg.com/@pearlbea/better-img-nutmeg@1.2.8/dist/better-img-nutmeg.min.js) to your HTML page. If you want to use this component in [browsers](https://caniuse.com/#feat=custom-elementsv1) that do not support Custom Elements v1, use the [webcomponentsjs](https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-sd-ce.js) polyfill.

Example:

```html
<!-- load the polyfill, if necessary -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-sd-ce.js"></script>

<!-- then load the element from unkpg -->
<script src="https://unpkg.com/@pearlbea/better-img-nutmeg@1.2.8/dist/better-img-nutmeg.min.js"></script>

<!-- or from node modules -->
<script src="../node_modules/@pearlbea/better-img-nutmeg/dist/better-img-nutmeg.js"></script>

<!-- use the component on your page -->
<better-img-nutmeg
  url="https://placeimg.com/480/640/animals"
  fallback="https://lorempixel.com/480/640"
  alt="an adorable animal">
</better-img-nutmeg>
```

## Usage

| property       | type   | default | description                                                                                                                       |
| -------------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| url (required) | string | null    | An image url. This will become the image's "src" attribute.                                                                       |
| fallback       | string | null    | An image url. If the url provided returns an error, the fallback url will be assigned to the "src" attribute.                     |
| width          | number | 480     | Image width                                                                                                                       |
| height         | number | 640     | Image height                                                                                                                      |
| alt            | string | ""      | Image alt text                                                                                                                    |
| log            | string | null    | If you provide the name of a function, it will be called if the url returns an error and receive the error object as a parameter. |

## License

BetterImgNutmeg is released under an MIT license.

Built, tested, and published with [Nutmeg](https://nutmeg.tools).
npm package: @pearlbea/better-img-polymer
Description: A simple element that adds a fallback url and logging function to an image.
Author: pearlbea@gmail.com
Latest version: 1.7.9

# better-img-polymer

A simple Polymer element that adds a fallback url and logging function to an image.

## Installation

Install the [npm package](https://www.npmjs.com/package/@pearlbea/better-img-pollymer) or add the script from [unkpg](https://unpkg.com/@pearlbea/better-img-polymer@1.4.2/dist/bundle.js) to your HTML page.

Example:

```html
<!-- load the element from unkpg -->
<script src="https://unpkg.com/@pearlbea/better-img-polymer@1.4.2/dist/bundle.js"></script>

<!-- or from node modules -->
<script src="../node_modules/@pearlbea/better-img-polymer/better-img-polymer.js"></script>

<!-- use the component on your page -->
<better-img-polymer
  url="https://placeimg.com/480/640/animals"
  fallback="https://lorempixel.com/480/640"
  alt="an adorable animal">
</better-img-polymer>
```

## Usage

| property       | type   | default | description                                                                                                                       |
| -------------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| url (required) | string | null    | An image url. This will become the image's "src" attribute.                                                                       |
| fallback       | string | null    | An image url. If the url provided returns an error, the fallback url will be assigned to the "src" attribute.                     |
| width          | number | 480     | Image width                                                                                                                       |
| height         | number | 640     | Image height                                                                                                                      |
| alt            | string | ""      | Image alt text                                                                                                                    |
| log            | string | null    | If you provide the name of a function, it will be called if the url returns an error and receive the error object as a parameter. |

## Viewing your component

```
$ npm run serve
```

## Running the tests

As of this writing, Polymer tests were not working with Node 10. See the [issue on GitHub](https://github.com/Polymer/tools/issues/280).

```
$ npm test
```