open-index/open-npm huggingface dataset:
npm package: @melony/inspector
Description: Real-time inspection and observability for Melony agents.
Latest version: 0.3.0

# @melony/inspector

The real-time inspection plugin for Melony agents.

## Installation

```bash
npm install @melony/inspector
```

## Usage

```typescript
import { agent } from "@melony/agents";
import { inspector } from "@melony/inspector";

const myAgent = agent("my-agent")
  .use(inspector({
    url: "http://localhost:7777" // Optional: default studio URL
  }))
  .use(llm(...));
```

## Features

- **Captures Events**: Every event emitted by the agent is sent to Melony Studio.
- **State Snapshots**: Captures the full `context.state` at the time of each event.
- **Minimal Performance Impact**: Uses fire-and-forget `fetch` to avoid blocking agent execution.
npm package: @melony/react
Description: React components and hooks for Melony.
Latest version: 0.3.0

# @melony/react

React UI + providers/hooks for building chat experiences on top of **Melony’s event stream**.

## Installation

```bash
npm install @melony/react melony react
```

## Quick start

```tsx
import { MelonyClient } from "melony/client";
import { MelonyProvider } from "@melony/react";

const client = new MelonyClient({ url: "/api/chat" });

export default function App() {
  return (
    <MelonyProvider client={client}>
      {/* Your components */}
    </MelonyProvider>
  );
}
```

### Send a message from UI

```tsx
import { useMelony } from "@melony/react";

function Controls() {
  const { send, streaming } = useMelony();
  return (
    <button
      disabled={streaming}
      onClick={() =>
        send({ type: "text", data: { content: "Hello!" } })
      }
    >
      Send
    </button>
  );
}
```

## Providers & hooks

- **`MelonyProvider`** + **`useMelony()`**
  - Connects to a Melony runtime endpoint.
  - Exposes `messages`, `events`, `streaming`, `error`, and `send()`.

## Event Stream & UI

Melony React provides the foundation for building interactive agent UIs. It automatically aggregates raw events into `messages` for easy rendering of chat interfaces.

```tsx
const { messages } = useMelony();

return (
  <div>
    {messages.map(message => (
      <div key={message.runId} className={message.role}>
        {message.content.map(event => {
          if (event.type === "assistant:text-delta") {
             return <span key={event.id}>{event.data.delta}</span>;
          }
          if (event.type === "ui") {
             return <MyCustomUI key={event.id} {...event.data} />;
          }
          return null;
        })}
      </div>
    ))}
  </div>
);
```

You can still access raw `events` if you need lower-level control.

## Development

```bash
pnpm build
pnpm dev
pnpm typecheck
pnpm clean
```
npm package: @melospot/icons-svg
Description: Static SVG icons for MeloSpot.
Author: Madalitso Simbeye
Latest version: 0.0.6

# MeloSpot Icons Static

**Static SVG icons made for MeloSpot.**

An open-source project offering a collection of high-quality static SVG icons for developers and designers.

---

## 🌍 Community

Join the MeloSpot community to discuss features, get help, and share feedback!

- [Join our Discord](https://discord.gg/cksKVD4x)

---
## 💖 Credits

A huge thank you to all our contributors for making MeloSpot Icons possible!
npm package: @mels/babel-preset-tsc-pluggable
Description: Babel preset for common TypeScript and Styled Components configs.
Author: Melanie Seltzer
Latest version: 1.0.0

# @mels/babel-preset-tsc-pluggable

[![npm (scoped)](https://img.shields.io/npm/v/@mels/babel-preset-tsc-pluggable.svg)](https://www.npmjs.com/package/@mels/babel-preset-tsc-pluggable) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Pluggable babel preset for some of my commonly used TypeScript and Styled Components configs.

## Plugins

This preset implements the following plugins:

- [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver)
- [babel-plugin-typescript-to-proptypes](https://github.com/milesj/babel-plugin-typescript-to-proptypes)
- [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components)

## Install

With npm...

```bash
npm install @mels/babel-preset-tsc-pluggable --save-dev
```

With yarn...

```bash
yarn add @mels/babel-preset-tsc-pluggable -D
```

## Usage

**.babelrc**

```json
{
  "presets": ["@mels/tsc-pluggable"]
}
```

With [Next.js](https://nextjs.org/):

```json
{
  "presets": ["next/babel", "@mels/tsc-pluggable"]
}
```

Each plugin is turned on by default, but can be turned off manually:

```json
{
  "presets": [
    "next/babel",
    [
      "@mels/tsc-pluggable",
      {
        "moduleResolver": false,
        "proptypes": false,
        "styledComponents": false
      }
    ]
  ]
}
```

## Module Resolver Usage with TypeScript

This preset sets the following options for the module resolver:

```js
{
  root: ['./'],
  alias: {
    components: './src/components'
  },
  extensions: ['.js', '.jsx', '.ts', '.tsx']
}
```

In addition to this, to get things working properly you'll need to set `baseUrl` and `paths` in `tsconfig.json`, e.g:

```json
{
  "baseUrl": ".",
  "paths": {
    "components/*": ["src/components/*"]
  }
}
```
npm package: @mels/eslint-config-base
Description: Shareable base JS ESLint config.
Latest version: 1.0.1

<h1 align="center">
  <br>
  <img src="https://raw.githubusercontent.com/melanieseltzer/toolkit/main/assets/toolkit.png" alt="Toolkit" width="150">
  <br>
  @mels/eslint-config-base
  <br>
</h1>

<h4 align="center">Shareable base JS ESLint config.</h4>

<p align="center">
  <a href="https://www.npmjs.com/package/@mels/eslint-config-base"><img alt="npm (scoped)" src="https://img.shields.io/npm/v/@mels/eslint-config-base"></a>
  <a href="https://twitter.com/melanieseltzer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/melanieseltzer?style=social"></a>
</p>

<p align="center">
  <a href="#install">Install</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

## ✨ Features

This package contains my base/common JS rules as an extensible shared config.

## Install

With npm:

```bash
npm install @mels/eslint-config-base --save-dev
```

With yarn:

```bash
yarn add @mels/eslint-config-base --dev
```

## ⚠️ Important Note

`@mels/eslint-config-base` **must be referenced first** in the ESLint `extends` array when using other toolkit packages along with it.

It is the only one that is **required** (the rest are optional) in terms of setup. For example, if you want to use `@mels/eslint-config-typescript` then you also must use `@mels/eslint-config-base` first for the proper setup. If you just want to use `@mels/eslint-config-base` alone, then that is fine too.

Why? Because it uses [@rushstack/eslint-patch](https://www.npmjs.com/package/@rushstack/eslint-patch) under the hood to fix a [longstanding issue](https://github.com/eslint/eslint/issues/3458) with shareable configs not allowing plugins as dependencies.

Having the patch added internally here in the base config was an intentional decision so that the consumer never has to worry about adding it themselves. Doing so allows all `@mels/...` packages up the chain to bring along their own plugins as dependencies.

The trade-off is of course that the configs are bound to a specific order, with `@mels/eslint-config-base` always needing to be first. For now (and until ESLint makes progress on supporting plugins as dependencies) this trade-off is acceptable for the huge convenience in setup.

## How To Use

```js
// .eslintrc.js

module.exports = {
  extends: [
    '@mels/base', // must always be first
    // '@mels/typescript',
    // '@mels/react',
    // ... etc
  ],
  // ... any additional project-specific overrides
};
```

## Credits

- Toolkit logo by <a href="https://www.flaticon.com/authors/creatype" title="Creatype">Creatype</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

## License

MIT
npm package: @mels/eslint-config-jest
Description: Shareable Jest ESLint config.
Latest version: 1.0.0

<h1 align="center">
  <br>
  <img src="https://raw.githubusercontent.com/melanieseltzer/toolkit/main/assets/toolkit.png" alt="Toolkit" width="150">
  <br>
  @mels/eslint-config-jest
  <br>
</h1>

<h4 align="center">Shareable ESLint config for Jest tests.</h4>

<p align="center">
  <a href="https://www.npmjs.com/package/@mels/eslint-config-jest"><img alt="npm (scoped)" src="https://img.shields.io/npm/v/@mels/eslint-config-jest"></a>
  <a href="https://twitter.com/melanieseltzer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/melanieseltzer?style=social"></a>
</p>

<p align="center">
  <a href="#install">Install</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

## ✨ Features

This package contains all my Jest rules as an extensible shared ESLint config. It extends a number of configs as a base:

- [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) recommended rules
- [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) style rules
- [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/lib/configs/react.ts) React rules (but only if this config detects that `@testing-library/react` is installed)

## Install

With npm:

```bash
npm install @mels/eslint-config-jest --save-dev
```

With yarn:

```bash
yarn add @mels/eslint-config-jest --dev
```

## How To Use

```js
// .eslintrc.js

module.exports = {
  extends: ['@mels/base', '@mels/jest'],
  // ... rest of config
};
```

## Credits

- Toolkit logo by <a href="https://www.flaticon.com/authors/creatype" title="Creatype">Creatype</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

## License

MIT
npm package: @mels/eslint-config-prettier
Description: Shareable ESLint config for Prettier.
Latest version: 1.0.0

<h1 align="center">
  <br>
  <img src="https://raw.githubusercontent.com/melanieseltzer/toolkit/main/assets/toolkit.png" alt="Toolkit" width="150">
  <br>
  @mels/eslint-config-prettier
  <br>
</h1>

<h4 align="center">Shareable ESLint config for Prettier.</h4>

<p align="center">
  <a href="https://www.npmjs.com/package/@mels/eslint-config-prettier"><img alt="npm (scoped)" src="https://img.shields.io/npm/v/@mels/eslint-config-prettier"></a>
  <a href="https://twitter.com/melanieseltzer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/melanieseltzer?style=social"></a>
</p>

<p align="center">
  <a href="#install">Install</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

## ✨ Features

This package contains my setup for having Prettier run as an ESLint rule.

## Install

With npm:

```bash
npm install @mels/eslint-config-prettier --save-dev
```

With yarn:

```bash
yarn add @mels/eslint-config-prettier --dev
```

## How To Use

Make sure to put it last in the `extends` array.

```js
// .eslintrc.js

module.exports = {
  extends: ['@mels/base', '@mels/typescript', '@mels/react', '@mels/prettier'],
  // ... rest of config
};
```

## Credits

- Toolkit logo by <a href="https://www.flaticon.com/authors/creatype" title="Creatype">Creatype</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

## License

MIT
npm package: @mels/eslint-config-react
Description: Shareable React ESLint config.
Latest version: 1.0.0

<h1 align="center">
  <br>
  <img src="https://raw.githubusercontent.com/melanieseltzer/toolkit/main/assets/toolkit.png" alt="Toolkit" width="150">
  <br>
  @mels/eslint-config-react
  <br>
</h1>

<h4 align="center">Shareable ESLint config for React projects.</h4>

<p align="center">
  <a href="https://www.npmjs.com/package/@mels/eslint-config-react"><img alt="npm (scoped)" src="https://img.shields.io/npm/v/@mels/eslint-config-react"></a>
  <a href="https://twitter.com/melanieseltzer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/melanieseltzer?style=social"></a>
</p>

<p align="center">
  <a href="#install">Install</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

## ✨ Features

This package contains all my React-related rules as an extensible shared ESLint config.

- React ([eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react))
- React Hooks ([eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks))
- JSX A11y (accessibility rules) ([eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y))
- JSX runtime config (if extended with `@mels/react/jsx-runtime`)

## Install

With npm:

```bash
npm install @mels/eslint-config-react --save-dev
```

With yarn:

```bash
yarn add @mels/eslint-config-react --dev
```

## How To Use

```js
// .eslintrc.js

module.exports = {
  extends: ['@mels/base', '@mels/react'],
  // ... rest of config
};
```

This package also exports a `jsx-runtime` config, if you're using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports).

```js
// .eslintrc.js

module.exports = {
  extends: ['@mels/base', '@mels/react', '@mels/react/jsx-runtime'],
  // ... rest of config
};
```

## Credits

- Toolkit logo by <a href="https://www.flaticon.com/authors/creatype" title="Creatype">Creatype</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

## License

MIT
npm package: @mels/eslint-config-typescript
Description: Shareable TypeScript ESLint config.
Latest version: 1.0.1

<h1 align="center">
  <br>
  <img src="https://raw.githubusercontent.com/melanieseltzer/toolkit/main/assets/toolkit.png" alt="Toolkit" width="150">
  <br>
  @mels/eslint-config-typescript
  <br>
</h1>

<h4 align="center">Shareable ESLint config for TypeScript projects.</h4>

<p align="center">
  <a href="https://www.npmjs.com/package/@mels/eslint-config-typescript"><img alt="npm (scoped)" src="https://img.shields.io/npm/v/@mels/eslint-config-typescript"></a>
  <a href="https://twitter.com/melanieseltzer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/melanieseltzer?style=social"></a>
</p>

<p align="center">
  <a href="#install">Install</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#helpful-links">Helpful Links</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

## ✨ Features

This package contains all my TypeScript rules as an extensible shared ESLint config. It also disables ESLint rules which are already handled by TypeScript.

## Install

With npm:

```bash
npm install @mels/eslint-config-typescript --save-dev
```

With yarn:

```bash
yarn add @mels/eslint-config-typescript --dev
```

## How To Use

The only config option that is required is `parserOptions.project`, because this config uses rules which require type information.

```js
// .eslintrc.js
module.exports = {
  extends: ['@mels/base', '@mels/typescript'],
  parserOptions: {
    project: './tsconfig.json', // Set the path to the project tsconfig. This is required.
  },
};
```

Additional config options for `@typescript-eslint/parser` and `eslint-import-resolver-typescript` should be structured like so:

```js
// .eslintrc.js
module.exports = {
  extends: ['@mels/base', '@mels/typescript'],

  // Config options for `@typescript-eslint/parser` should go under `parserOptions`
  // Please see: https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser#configuration
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname, // root directory for relative tsconfig paths specified in the project option above
    // ...etc
  },

  settings: {
    'import/resolver': {
      // Config options for `eslint-import-resolver-typescript`
      // Please see: https://github.com/import-js/eslint-import-resolver-typescript#configuration
      typescript: {
        project: './tsconfig.eslint.json', // if different from default <root>/tsconfig.json
      },
    },
  },
};
```

## Helpful Links

- [Monorepo configuration help](https://typescript-eslint.io/docs/linting/typed-linting/monorepos/)
- [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser#configuration) config options
- [eslint-import-resolver-typescript](https://github.com/import-js/eslint-import-resolver-typescript#configuration) config options

## Credits

- Toolkit logo by <a href="https://www.flaticon.com/authors/creatype" title="Creatype">Creatype</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

## License

MIT
npm package: @mels/eslint-patch
Description: Allow shared ESLint configs to bring along their own plugins.
Latest version: 1.0.3

<h1 align="center">
  <br>
  <img src="https://raw.githubusercontent.com/melanieseltzer/toolkit/main/assets/toolkit.png" alt="Toolkit" width="150">
  <br>
  @mels/eslint-patch
  <br>
</h1>

<h4 align="center">Allow shared ESLint configs to bring along their own plugins.</h4>

<p align="center">
  <a href="https://www.npmjs.com/package/@mels/eslint-patch"><img alt="npm (scoped)" src="https://img.shields.io/npm/v/@mels/eslint-patch"></a>
  <a href="https://twitter.com/melanieseltzer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/melanieseltzer?style=social"></a>
</p>

<p align="center">
  <a href="#install">Install</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

## ✨ Features

`@mels/eslint-patch` uses [@rushstack/eslint-patch](https://github.com/microsoft/rushstack/tree/master/stack/eslint-patch) under the hood to enable shared ESLint configs in this toolkit to bring along their own plugins as dependencies, rather than imposing them as peer dependencies.

Please see for more info: https://www.npmjs.com/package/@rushstack/eslint-patch

## Install

With npm:

```bash
npm install @mels/eslint-patch --save-dev
```

With yarn:

```bash
yarn add @mels/eslint-patch --dev
```

## How To Use

Add a require() call to the to top of the `.eslintrc.js` file in the project that depends on the shared toolkit ESLint config.

```js
// .eslintrc.js

require('@mels/eslint-patch');

module.exports = {
  extends: ['@mels'],
  // ... etc
};
```

## Credits

- [@rushstack/eslint-patch](https://www.npmjs.com/package/@rushstack/eslint-patch)
- Toolkit logo by <a href="https://www.flaticon.com/authors/creatype" title="Creatype">Creatype</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

## License

MIT
npm package: @mels/prettier-config
Description: Prettier rules as a shareable configuration.
Latest version: 1.0.0

<h1 align="center">
  <br>
  <img src="https://raw.githubusercontent.com/melanieseltzer/toolkit/main/assets/toolkit.png" alt="Toolkit" width="150">
  <br>
  @mels/prettier-config
  <br>
</h1>

<h4 align="center">Shareable Prettier configuration.</h4>

<p align="center">
  <a href="https://www.npmjs.com/package/@mels/prettier-config"><img alt="npm (scoped)" src="https://img.shields.io/npm/v/@mels/prettier-config"></a>
  <a href="https://twitter.com/melanieseltzer"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/melanieseltzer?style=social"></a>
</p>

<p align="center">
  <a href="#install">Install</a> •
  <a href="#how-to-use">How To Use</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

## ✨ Features

This package contains all my Prettier rules as a shareable configuration.

## Install

With npm:

```bash
npm install @mels/prettier-config --save-dev
```

With yarn:

```bash
yarn add @mels/prettier-config --dev
```

## How To Use

You can use this config in multiple ways, depending on your preference.

Reference it in your `package.json` using the `prettier` property:

```js
{
  "name": "some-lib",
  "version": "0.0.0",
  "prettier": "@mels/prettier-config"
}
```

Use any of the supported extensions to export a string:

```js
// .prettierrc.json
'@mels/prettier-config';
```

```js
// prettier.config.js or .prettierrc.js
module.exports = '@mels/prettier-config';
```

If you need to extend the config, you can do so with `.prettierrc.js` or `prettier.config.js` and export the modifications in an object:

```js
// prettier.config.js or .prettierrc.js
module.exports = {
  ...require('@mels/prettier-config'), // import the package
  semi: false, // add modifications
};
```

## Credits

- Toolkit logo by <a href="https://www.flaticon.com/authors/creatype" title="Creatype">Creatype</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>

## License

MIT
npm package: @mels/react-components
Description: A collection of some of my frequently used React components.
Author: Melanie Seltzer
Latest version: 0.2.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<div align="center"><a href="https://www.iconfinder.com/icons/3213278/computer_creative_media_photo_icon" target="_blank"><img src="https://github.com/melanieseltzer/react-components/blob/master/public/iconfinder_12-Computer_3213278.png?raw=true" width="70" alt="mels react components" /></a></div>

<h1 align="center">@mels/react-components</h1>

![CircleCI (all branches)](https://img.shields.io/circleci/project/github/melanieseltzer/react-components.svg) [![npm (scoped)](https://img.shields.io/npm/v/@mels/react-components.svg)](https://www.npmjs.com/package/@mels/react-components) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

> A collection of some of my frequently used React components.

This is my attempt at centralizing some of my most repeated components across all of my various side projects and tinkerings 😁

_NOTE: This is still a pretty early work in progress! Expect bugs and API changes 🐛_

## Install

```bash
npm install --save @mels/react-components
```

## Documentation

https://mels-react-components.netlify.com

## Components

- Flex
  - Flex Item
- Form Elements
  - Floating Label Input
  - Input
  - Label

... more to come!

## Usage

```js
import React, { Component } from 'react';
import { Input, Label } from '@mels/react-components';

export default class App extends Component {
  render() {
    return (
      <form>
        <Label htmlFor="email" color="tomato">
          Email
        </Label>
        <Input
          id="email"
          name="email"
          placeholder="hi@example.com"
          color="tomato"
          // ...
        />
      </form>
    );
  }
}
```

## Thanks ❤️

- [Icon logo from IconFinder](https://www.iconfinder.com/icons/3213278/computer_creative_media_photo_icon)
- [create-react-library](https://github.com/transitive-bullshit/create-react-library/)

## License

MIT © [melanieseltzer](https://github.com/melanieseltzer)