open-index/open-npm huggingface dataset:
npm package: @pdeona/react-control-flow
Description: Components for declarative control flow in UI
Author: Pedro De Ona
Latest version: 0.1.9

## React Control Flow [![CircleCI](https://circleci.com/gh/pdeona/react-control-flow/tree/release-candidates.svg?style=svg&circle-token=9bf624690f835a230cf85809d969a5cb61b47e7b)](https://circleci.com/gh/pdeona/react-control-flow/tree/release-candidates)

### If

```tsx
import React from 'react';
import { If } from '@pdeona/react-control-flow';

export const HomePage = ({ user }) => (
  <If cond={!!user}>
    <UserDashboard user={user}>
  </If>
);
```

### Else

```tsx
import React from 'react';
import { Else, If } from '@pdeona/react-control-flow';

export const HomePage = ({ user }) => (
  <If cond={!!user}>
    <UserDashboard user={user}>
    <Else>
      <SignUpForm />
    </Else>
  </If>
);
```

### ElseIf

```tsx
import React from 'react';
import { Else, ElseIf, If } from '@pdeona/react-control-flow';

export const HomePage = ({ signUpEmail, user }) => (
  <If cond={!!user}>
    <UserDashboard user={user}>
    <ElseIf cond={!!signUpEmail}>
      <EmailVerificationModal email={signUpEmail}>
    </ElseIf>
    <Else>
      <SignUpForm />
    </Else>
  </If>
);
```

### For

```tsx
import React from 'react';
import { For } from '@pdeona/react-control-flow';

const UserListItem = ({ user }) => (
  <div>
    <span>User id: {user.uid}</span>
    <span>User name: {user.name}</span>
  </div>
);

export const UsersIndex = ({ users }) => (
  <For let="user" of={users} Render={UserListItem}>
);
```

### Switch

```tsx
import React from 'react';
import { Switch } from '@pdeona/react-control-flow';

const Router = ({ pathname }) => (
  <Switch of={pathname}>
    <AccountPage case="/account" />
    <StorePage case="/store" />
    <HomePage default />
  </Switch>
)
```
npm package: @pderas/vue-input-tag
Description: Vue.js input tag editor component
Author: Matias Tucci
Latest version: 2.1.0

# vue-input-tag
> A Vue.js 2.0 input tag component inspired in [react-tagsinput](https://github.com/olahol/react-tagsinput)

[![Codeship](https://img.shields.io/codeship/3a192ae0-9502-0134-8f6e-1e693cf3975e/master.svg)]()
[![Coverage Status](https://coveralls.io/repos/github/matiastucci/vue-input-tag/badge.svg?branch=master)](https://coveralls.io/github/matiastucci/vue-input-tag?branch=master)
[![Version](https://img.shields.io/npm/v/vue-input-tag.svg)](https://www.npmjs.com/package/vue-input-tag)
[![License](https://img.shields.io/npm/l/vue-input-tag.svg)](https://www.npmjs.com/package/vue-input-tag)
[![Monthly Downloads](https://img.shields.io/npm/dm/vue-input-tag.svg)](https://www.npmjs.com/package/vue-input-tag)

<p align="center">
  <img src="demo.gif" width="750" alt="Logo"/>
</p>

## Installation

#### NPM / Yarn

```bash
npm install vue-input-tag --save
```

```bash
yarn add vue-input-tag
```

Then you need to import and register it:

```js
import InputTag from 'vue-input-tag'
```

```js
Vue.component('input-tag', InputTag)
```

#### CDN

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-input-tag"></script>
```

Then you need to register it:

`Vue.component('input-tag', vueInputTag.default)`

## Usage

```html
<input-tag v-model="tags"></input-tag>
```

## Props
| Name | Type | Default | Description |
| ---:| --- | ---| --- |
| value | Array | [] | Tags to be render in the input (v-model) |
| placeholder | String | "" | Placeholder to be shown when no tags |
| read-only | Boolean | false | Set input to readonly |
| add-tag-on-blur | Boolean | false | Add tag on input blur |
| limit | String or Number | -1 (none) | Set a limit for the amount of tags |
| validate | String or Function or Object | "" | Apply certain validator for user input. Choose from `email`, `url`, `text`, `digits` or `isodate`. Or pass a `function` or a `RegExp` object for custom validation |
| add-tag-on-keys | Array | [ 13 (return), 188 (comma), 9 (tab) ] | Keys that are going to add the new tag
npm package: @pderas/vue2-chars
Description: A string of tokens that produces that many single input boxes
Author: David Buss
Latest version: 1.0.4

# Vue Chars
A vue.js plugin that gets takes a string of tokens and produces that many single input boxes.
The value, however, will be one connected string (e.i. Not a bunch of single characters seperated)

## How to initialize Vue Chars
Vue chars is built as a vue plugin to allow for use throughout the application.

```javascript
import Chars from "@pderas/vue2-chars";

Vue.use(Chars);
```

## Usage
#### Creation
Vue chars is easily created, but at mininum requires a [mask](#masks). Having said that, Vue chars works best with v-model.
```HTML
<chars mask="####" v-model="myVar"></chars>
```

## Properties
| Property  | Required | Type                 | Default                 | Description                                   |
|-----------|----------|----------------------|:-----------------------:|-----------------------------------------------|
| mask      | true     | Number               | n/a                     | The mask for the input                        |
| value     | false    | Number&#124;String   | 0                       | Value for the input, can be used with v-model |


#### Masks
| Mask  | Description                                            |
|:-----:|--------------------------------------------------------|
| #     |  Number character only                                 |
| X     |  Alphanumeric character only                           |
| S     |  Alphabetic character only                             |
| A     |  Alphabetic character only (will convert to uppercase) |
| a     |  Alphabetic character only (will conver to lowercase)  |

## License
This project is covered under the MIT License. Feel free to use it wherever you like.
npm package: @pderas/vue2-foldable
Description: A vue 2 component to show / hide content
Latest version: 1.0.0

# Vue Loader
A vue.js component to allow a section to collapse and expand with an ainimation.

## How to initialize Vue Loader
Vue foldable is built as a vue plugin. It can be initialized just as the Vue documentation states.

```javascript
import Foldable from "@pderas/vue2-foldable";

Vue.use(Foldable, {
    peekabooHeight:  0, // default
});
```
## Usage

#### Creation
Vue foldable is easily created, and allows for a slot to be inserted.

```HTML
<foldable :collapsed="false">
    <div slot-scope>

    </div>
</foldable>
```

## Properties
| Property  | Required | Type    | Default | Description                                             |
|-----------|:--------:|:-------:|---------|---------------------------------------------------------|
| collapsed | true     | Boolean | n/a     | If the section is collapsed or not.                     |
| height    | false    | Number  | 0       | The height of foldable.                                 |
| minHeight | false    | Number  | 0       | The minimum height to show of the content.              |

## License
This project is covered under the MIT License. Feel free to use it wherever you like.
npm package: @pderas/vue2-geocoder
Description: A vue 2 plugin to interact with google maps api
Author: Cody Moorhouse
Latest version: 1.1.0

# Vue Geocoder
A vue.js plugin to interact with Google Maps API.

## How to initialize Vue Geocoder
A vue 2 plugin to interact with google maps api that will query the google maps API to retrieve location results.

```javascript
import Geocoder from "@pderas/vue2-geocoder";

Vue.use(Geocoder, {
    defaultCountryCode: null, // e.g. 'CA'
    defaultLanguage:    null, // e.g. 'en'
    defaultMode:        'address', // or 'lat-lng'
    googleMapsApiKey:   GOOGLE_MAPS_API_KEY
});
```
## Usage
General usage: ```Vue.$geocoder.[FUNCTION_NAME]```

##### Address Example
```javascript
Vue.$geocoder.setDefaultMode('address');      // this is default
var addressObj = {
    address_line_1: '1600 Amphitheatre Parkway',
    address_line_2: '',
    city:           'Mountain View',
    state:          'CA',               // province also valid
    zip_code:       '94043',            // postal_code also valid
    country:        'United States'
}
Vue.$geocoder.send(addressObj, response => { console.log(response) });
```

Its important to note that even if your country is set in the address object to the specified country, it is still possible to pull results from other countries. If you want to limit the results to a specific country, you must set the country code in the geocoder.
```javascript
Vue.$geocoder.setDefaultCountryCode('CA');
```
[Click here for Country Codes](https://developers.google.com/maps/coverage)

##### Lat Lng Example
```javascript
Vue.$geocoder.setDefaultMode('lat-lng');
var latLngObj = {
    lat: 37.421512,
    lng: -122.084101
}
Vue.$geocoder.send(latLngObj, response => { console.log(response) });
```

##### Language
To get result in your language you should set language code in the geocoder
```javascript
Vue.$geocoder.setDefaultLanguage('en') // this is default
```

## License
This project is covered under the MIT License. Feel free to use it wherever you like.
npm package: @pderas/vue2-loader
Description: A vue 2 component to show a loading indicator
Author: Cody Moorhouse
Latest version: 1.0.8

# Vue Loader
A vue.js component to show a loading indicator.

## How to initialize Vue Loader
Vue loader is built as a vue plugin. It can be initialized just as the Vue documentation states.

```javascript
import Loader from "@pderas/vue2-loader";

Vue.use(Loader, {
    color:  'black',    // default
    type:   'bar'       // default
});
```
## Usage

#### Creation
A vue loader is easily created, and usually combined with a v-if to show/hide the loader.<br>
```HTML
<loader></loader>
```

## Properties
| Property  | Required | Type    | Default | Description                                             |
|-----------|----------|---------|---------|---------------------------------------------------------|
| color     | false    | String  | 'black' | The color of the loader (can be a hex value)            |
| type      | false    | String  | 'bar'   | The type of style to use for the loader                 |

##### Available Types
1. bar
2. spinning-dot

#### Styling
Styling is currently limited, but can be expanded in the future.

## License
This project is covered under the MIT License. Feel free to use it wherever you like.
npm package: @pderas/vue2-moola
Description: A vue 2 component for a money mask input
Author: Cody Moorhouse
Latest version: 1.3.4

# Vue Moola
A vue 2 component for a money mask input.

## How to initialize Vue Moola
Vue moola is built as a vue plugin. It can be initialized just as the Vue documentation states.

```javascript
import Moola from "@pderas/vue2-moola";

Vue.use(Moola);
```
## Usage

#### Creation
Vue moola is easily created, and has many properties that can be changed.
```HTML
<moola value="0"></moola>
```

## Properties
| Property  | Required | Type                 | Default                 | Description                                   |
|-----------|----------|----------------------|-------------------------|-----------------------------------------------|
| delimiter | false    | String               | ','                     | A character to separate the numbers thousands by. (e.i. '1,000') |
| max       | false    | Number               | Number.MAX_SAFE_INTEGER | The max value for the input                   |
| min       | false    | Number               | Number.MIN_SAFE_INTEGER | The min value for the input                   |
| nullable | false | Boolean | false | Sets the default empty value to either 0 or null |
| precision | false    | Number               | 2                       | Amount of decimals to allow                   |
| prefix    | false    | String               | '$'                     | A prefix for the input (can be set to null)   |
| suffix    | false    | String               | null                    | A suffix for the input (e.i. '%')             |
| value     | false    | Number&#124;String   | 0                       | Value for the input, can be used with v-model |



## License
This project is covered under the MIT License. Feel free to use it wherever you like.
npm package: @pderas/vue2-searchbar
Description: A simple search bar that allows delayed searching and integration with vuex store functions.
Author: David Buss
Latest version: 1.1.3

# Vue Searchbar
A vue.js component searchbar. Allows for delayed or on key press search and can be integrated with vuex.

## How to initialize Vue Searchbar
Vue searchbar is built as a vue plugin. It can be initialized just as the Vue documentation states.

```javascript
import Searchbar from '@pderas/vue2-searchbar';

Vue.use(Searchbar);
```
## Usage

#### Creation
A search bar can be created simply by adding the component to a file and passing it a search function. This function will run either on key press or after a delay depending on what props or global options have been set.
```javascript
<searchbar :on-search="searchFunc" />

export default {
    methods: {
        searchFunc(search) {
            alert('You have tried to search for: ' + search);
        }
    }
}
```
### Options
| Option      | Default   | Description                                                     |
|-------------|-----------|-----------------------------------------------------------------|
| iconSide    | 'left'    | Determines what side the search icon is on.                     |
| searchWhen  | 'onDelay' | If the search should run after defined timeout or on key press. |
| timoutDelay | 1000      | The amount of time before a new search will occur.              |
| value       | null      | optional value field for use with v-model                       |
# License
This project is covered under the MIT License. Feel free to use it wherever you like.
npm package: @pderas/vue2-toggle
Description: A vue 2 component for a toggle input
Author: Cody Moorhouse
Latest version: 1.2.1

# Vue Toggle
A vue.js component for a toggle input.

## How to initialize Vue Toggle
Vue toggle is built as a vue plugin. It can be initialized just as the Vue documentation states.

```javascript
import Toggle from "@pderas/vue2-toggle";

// defaults
Vue.use(Toggle, {
    altColor:   '#ccc',
    color:      '#2196F3',
    labels:     {
        true_label:     'On',
        false_label:    'Off'
    },
    useLabels:  true,
    type:       'round'
});
```
## Usage

#### Creation
A vue toggle is easily created and can be bound to data with v-model.<br>
```HTML
<toggle></toggle>
```

## Properties
| Property   | Required | Type    | Default                                  | Description                                   |
|------------|----------|---------|------------------------------------------|-----------------------------------------------|
| alt-color  | false    | String  | '#ccc'                                   | The color of the toggle when unchecked        |
| color      | false    | String  | '#2196F3'                                | The color of the toggle when checked          |
| labels     | false    | Object  | { true_label: 'on', false_label: 'off' } | The labels to use when use-labels is enabled  |
| type       | false    | String  | 'round'                                  | The type of style to use for the toggle       |
| use-labels | false    | Boolean | true                                     | Use on/off labels on the toggle               |
| value      | false    | Boolean | false                                    | Value for the input, can be used with v-model |

##### Available Types
1. round
2. rectangle

#### Styling
Styling is currently limited, but can be expanded in the future.

## License
This project is covered under the MIT License. Feel free to use it wherever you like.
npm package: @pdestrais/mdtohtml
Description: Stencil Markdown to HTML Component
Author: Philippe Destrais
Latest version: 0.0.1

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Markdown To HTML Component

This stencil markdowntohtml component will render a markdown text to HTML. It is based on [marked](https://marked.js.org/#/README.md).

## Installation
Stencil components can be integrated with many javascript frameworks (angular, react, ...) or with javascript native.. More information on this [here](https://stenciljs.com/docs/overview)

## Usage

Simply include the component into html code like any other HTML tag. Use the 'content' attribute to pass the markdown text to be rendered into HTML.
Example :

```bash
<md-to-html content="# Markdown Component

This stencil markdown component will render a markdown text to HTML. It is based on [marked](https://marked.js.org/#/README.md)."></md-to-html>
```
## Using this component

### Script tag

- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
- Put a script tag similar to this `<script src='https://unpkg.com/markdowntohtml-component@0.0.1/dist/markdowntohtmlcomponent.js'></script>` in the head of your index.html

### Node Modules
- Run `npm install markdown-component --save`
- Put a script tag similar to this `<script src='node_modules/markdowntohtml-component/dist/markdowntohtmlcomponent.js'></script>` in the head of your index.html

### In a stencil-starter app
- Run `npm install markdowntohtml-component --save`
- Add an import to the npm packages `import markdowntohtml-component;`

### Use in template
You can then use the element anywhere in your template, JSX, html etc
Simply include the component into html code like any other HTML tag. Use the 'content' attribute to pass the markdown text to be rendered into HTML.

Example :

```bash
<markdown-component content="# Markdown Component

This stencil markdown component will render a markdown text to HTML. It is based on [marked](https://marked.js.org/#/README.md)."></markdown-component>
```
npm package: @pdevlabs/opennextjs-cloudflare
Description: Cloudflare builder for next apps
Latest version: 1.0.1

# OpenNext for Cloudflare

Deploy Next.js apps to Cloudflare!

[OpenNext for Cloudflare](https://opennext.js.org/cloudflare) is a Cloudflare specific adapter that enables deployment of Next.js applications to Cloudflare.

## Get started

To get started with the adapter visit the [official get started documentation](https://opennext.js.org/cloudflare/get-started).

## Local development

- you can use the regular `next` CLI to start the Next.js dev server:

## Local preview

Run the following commands to preview the production build of your application locally:

- build the app and adapt it for Cloudflare

  ```bash
  npx opennextjs-cloudflare build
  # or
  pnpm opennextjs-cloudflare build
  # or
  yarn opennextjs-cloudflare build
  # or
  bun opennextjs-cloudflare build
  ```

- Preview the app in Wrangler

  ```bash
  npx wrangler dev
  # or
  pnpm wrangler dev
  # or
  yarn wrangler dev
  # or
  bun wrangler dev
  ```

## Deploy your app

Deploy your application to production with the following:

- build the app and adapt it for Cloudflare

  ```bash
  npx opennextjs-cloudflare build && npx opennextjs-cloudflare deploy
  # or
  pnpm opennextjs-cloudflare build && pnpm opennextjs-cloudflare deploy
  # or
  yarn opennextjs-cloudflare build && yarn opennextjs-cloudflare deploy
  # or
  bun opennextjs-cloudflare build && bun opennextjs-cloudflare deploy
  ```
npm package: @pdf-lib/brotli
Description: A port of the Brotli compression algorithm as used in WOFF2
Author: Andrew Dillon
Latest version: 0.0.0

# Brotli.js

Brotli.js is port of the [Brotli](http://tools.ietf.org/html/draft-alakuijala-brotli-01) compression algorithm (as used in the [WOFF2](http://www.w3.org/TR/WOFF2/) font format) to JavaScript. The decompressor is hand ported, and the compressor is ported
with Emscripten.  The original C++ source code can be found [here](http://github.com/google/brotli).

## Installation and usage

Install using npm.

    npm install brotli

If you want to use brotli in the browser, you should use [Browserify](http://browserify.org/) to build it.

In node, or in browserify, you can load brotli in the standard way:

```javascript
var brotli = require('brotli');
```

You can also require just the `decompress` function or just the `compress` function, which is useful for browserify builds.
For example, here's how you'd require just the `decompress` function.

```javascript
var decompress = require('brotli/decompress');
```

## API

### brotli.decompress(buffer, [outSize])

Decompresses the given buffer to produce the original input to the compressor.
The `outSize` parameter is optional, and will be computed by the decompressor
if not provided. Inside a WOFF2 file, this can be computed from the WOFF2 directory.

```javascript
// decode a buffer where the output size is known
brotli.decompress(compressedData, uncompressedLength);

// decode a buffer where the output size is not known
brotli.decompress(fs.readFileSync('compressed.bin'));
```

### brotli.compress(buffer, isText = false)

Compresses the given buffer. Pass optional parameters as the second argument.

```javascript
// encode a buffer of binary data
brotli.compress(fs.readFileSync('myfile.bin'));

// encode some data with options (default options shown)
brotli.compress(fs.readFileSync('myfile.bin'), {
  mode: 0, // 0 = generic, 1 = text, 2 = font (WOFF2)
  quality: 11, // 0 - 11
  lgwin: 22 // window size
});
```

## License

MIT
npm package: @pdf-lib/standard-fonts
Description: Metrics for the Standard 14 PDF fonts and their encodings
Author: Andrew Dillon
Latest version: 1.0.0

<h1>
  standard-fonts

  <br />

  <!-- NPM Version -->
  <a href="https://www.npmjs.com/package/standard-fonts">
    <img
      src="https://img.shields.io/npm/v/@pdf-lib/standard-fonts.svg?style=flat-square"
      alt="NPM Version"
    />
  </a>

  <!-- Prettier Badge -->
  <a href="https://prettier.io/">
    <img
      src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"
      alt="Prettier Badge"
    />
  </a>
</h1>

> Collection of metrics and encodings for the standard 14 PDF fonts

This project is a fork of [`afm`](https://github.com/chbrown/afm) and was created for use in [`pdf-lib`](https://github.com/Hopding/pdf-lib). This forks exists for two primary reasons:

1. The original project did not include mappings from Unicode to WinAnsi/ZapfDingbats/Symbol encodings.
2. The font metrics included in the original project were uncompressed (not ideal for usage in `pdf-lib`).

## Usage
```js
import { Font, FontNames, Encodings } from '@pdf-lib/standard-fonts';

const codePoint = '∑'.charCodeAt(0);

const glyph = Encodings.Symbol.encodeUnicodeCodePoint(codePoint);
glyph // => { code: 229, name: 'summation' }

const font = Font.load(FontNames.Symbol);
const width = font.getWidthOfGlyph(glyph.name);
width // => 713
```

## Installation
### NPM Module
To install the latest stable version:
```bash
# With npm
npm install --save @pdf-lib/standard-fonts

# With yarn
yarn add @pdf-lib/standard-fonts
```
This assumes you're using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en/) as your package manager.

### UMD Module
You can also download `@pdf-lib/standard-fonts` as a UMD module from [unpkg](https://unpkg.com/#/). The UMD builds have been compiled to ES5, so they should work [in any modern browser](https://caniuse.com/#feat=es5). UMD builds are useful if you aren't using a package manager or module bundler. For example, you can use them directly in the `<script>` tag of an HTML page.

The following builds are available:

* https://unpkg.com/@pdf-lib/standard-fonts/dist/standard-fonts.js
* https://unpkg.com/@pdf-lib/standard-fonts/dist/standard-fonts.min.js

When using a UMD build, you will have access to a global `window.StandardFonts` variable. This variable contains the classes and enums exported by `@pdf-lib/standard-fonts`. For example:

```javascript
// NPM module
import { Font, FontNames, Encodings } from '@pdf-lib/standard-fonts';
const font = Font.load(FontNames.HelveticaBold);
const encoding = Encodings.WinAnsi;

// UMD module
var font = StandardFonts.Font.load(StandardFonts.FontNames.HelveticaBold);
var encoding = StandardFonts.Encodings.WinAnsi;
```

## License
[MIT](https://choosealicense.com/licenses/mit/)

## Original Repo's License

Copyright 2015–2018 Christopher Brown.
[MIT Licensed](https://chbrown.github.io/licenses/MIT/#2015-2018).
npm package: @pdf.js/vue
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Latest version: 0.1.2-dev

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
npm package: @pdf2md/core
Description: Convert PDF files to Markdown — client-side and Node.js
Latest version: 0.2.0

# @pdf2md/core

Convert PDF files to Markdown. Runs client-side in the browser or in Node.js.

## Install

```sh
npm install @pdf2md/core
```

## Library Usage

```ts
import { convert } from "@pdf2md/core";
import { readFile } from "node:fs/promises";

const buffer = await readFile("document.pdf");
const result = await convert(buffer.buffer);

console.log(result.markdown);
console.log(result.stats); // { pageCount, wordCount, processingMs }
```

### Options

```ts
const result = await convert(buffer.buffer, {
  maxPages: 10,           // Limit number of pages to convert
  includeMetadata: true,  // Extract title, author, etc.
  signal: controller.signal, // AbortSignal for cancellation
  onProgress: (progress) => {
    console.log(`${progress.stage}: page ${progress.currentPage}/${progress.totalPages}`);
  },
});
```

### Result

```ts
interface ConversionResult {
  status: "success" | "partial" | "failed";
  markdown: string;
  messages: ConversionMessage[];  // Errors and warnings
  stats: { pageCount: number; wordCount: number; processingMs: number };
  metadata?: { title?: string; author?: string; subject?: string; keywords?: string[]; creationDate?: string };
}
```

## CLI Usage

```sh
npx @pdf2md/core document.pdf > output.md
```

Prints Markdown to stdout. Warnings and errors go to stderr.

## Conversion Pipeline

1. Parse PDF via PDF.js
2. Extract text items with position/font metadata
3. Extract link annotations
4. Detect and strip repeated headers/footers
5. Build font size histogram for heading detection (H1-H6)
6. Group text into blocks by vertical proximity
7. Classify blocks: heading, list-item, or paragraph
8. Match link annotations to text by bounding box overlap
9. Apply bold/italic from font name heuristics
10. Assemble Markdown output

## Limits

- 15 MB maximum file size
- No OCR support (scanned/image-based PDFs return an error)
- Password-protected PDFs are not supported

## License

MIT
npm package: @pdf2md/mcp
Description: MCP server for converting PDF files to Markdown — use with Claude, Cursor, Windsurf, and other AI agents
Latest version: 0.1.0

# @pdf2md/mcp

MCP server for converting PDF files to Markdown. Works with Claude Code, Cursor, Windsurf, and any MCP-compatible AI agent.

## Installation

### Claude Code

```bash
claude mcp add pdf2md -- npx -y @pdf2md/mcp
```

### Cursor / Windsurf / Other MCP Clients

Add to your MCP config (`.mcp.json`, `~/.claude.json`, or equivalent):

```json
{
  "mcpServers": {
    "pdf2md": {
      "command": "npx",
      "args": ["-y", "@pdf2md/mcp"]
    }
  }
}
```

## Tool

### convert_pdf

Convert a PDF file to Markdown.

**Parameters:**

| Name | Type | Required | Description |
|------|------|----------|-------------|
| `file_path` | string | Yes | Path to the PDF file |
| `max_pages` | number | No | Maximum pages to convert |
| `include_metadata` | boolean | No | Include PDF metadata (default: true) |
| `yaml_front_matter` | boolean | No | Prepend YAML front matter |

**Returns:** Markdown string with headings, tables, code blocks, links, and lists preserved.

## Features

- Multi-column layout detection
- Table detection and markdown formatting
- Code block detection (monospace fonts + syntax patterns)
- Heading detection (font size, bold, section numbers, ALL CAPS)
- Link extraction from PDF annotations
- Header/footer stripping
- YAML front matter from PDF metadata
- 9.2/10 average quality across 28 real-world PDFs

## Privacy

Files are processed locally. Nothing is uploaded anywhere.

## License

MIT
npm package: @pdfbroker/mcp-server
Description: PdfBroker.io MCP server — generate PDFs from HTML with AI agents
Latest version: 1.0.1

# @pdfbroker/mcp-server

Generate PDFs from HTML using AI agents via [PdfBroker.io](https://www.pdfbroker.io).

This package connects Claude Desktop, Cursor, and other MCP clients to the
PdfBroker.io cloud PDF generation API.

## Setup

1. Sign up at [pdfbroker.io](https://www.pdfbroker.io/signup)
2. Go to **Members → API Credentials** and copy your Client ID and Client Secret
3. Add to your Claude Desktop config (`Settings → Developer → Edit Config`):

```json
{
  "mcpServers": {
    "pdfbroker": {
      "command": "npx",
      "args": ["-y", "@pdfbroker/mcp-server"],
      "env": {
        "PDFBROKER_CLIENT_ID": "pb_cid_your_id_here",
        "PDFBROKER_CLIENT_SECRET": "pb_sec_your_secret_here"
      }
    }
  }
}
```

4. Restart Claude Desktop

## Available Tools

- **html_to_pdf** — Convert HTML/CSS to PDF using WeasyPrint (PDF/A, PDF/UA support)
- **html_to_pdf_wk** — Convert HTML to PDF using wkhtmltopdf (JS support, free tier)

## Example

Ask Claude: *"Create a PDF invoice for Acme Corp with 3 line items"*

Claude will generate HTML, call the `html_to_pdf` tool, and return a download link for the PDF.

## Cursor / VS Code

Add to `.vscode/mcp.json`:

```json
{
  "servers": {
    "pdfbroker": {
      "command": "npx",
      "args": ["-y", "@pdfbroker/mcp-server"],
      "env": {
        "PDFBROKER_CLIENT_ID": "pb_cid_your_id_here",
        "PDFBROKER_CLIENT_SECRET": "pb_sec_your_secret_here"
      }
    }
  }
}
```

## Claude Code

Claude Code supports direct HTTP connections — no wrapper needed:

```bash
claude mcp add-json pdfbroker '{
  "type": "http",
  "url": "https://mcp.pdfbroker.io/",
  "headers": {
    "X-PdfBroker-ClientId": "pb_cid_your_id_here",
    "X-PdfBroker-ClientSecret": "pb_sec_your_secret_here"
  }
}'
```

## Requirements

- Node.js 18+
- PdfBroker.io account with API credentials

## Environment Variables

| Variable | Required | Description |
|----------|----------|-------------|
| `PDFBROKER_CLIENT_ID` | Yes | Your Client ID from pdfbroker.io |
| `PDFBROKER_CLIENT_SECRET` | Yes | Your Client Secret from pdfbroker.io |
| `PDFBROKER_MCP_URL` | No | Override server URL (default: `https://mcp.pdfbroker.io/`) |
npm package: @pdffromlink/cli
Description: Generates a PDF file from a link
Author: Gabriel Rufino
Latest version: 1.0.15

# PDFfromLink - CLI

Generates a PDF file from a link

## Installing

```bash
npm i -g @pdffromlink/cli
```

## Usage

```bash
pdffromlink https://en.wikipedia.org/wiki/Node.js
```
npm package: @pdfme/cli
Description: CLI tool for pdfme - generate PDFs, convert images, validate templates
Author: hand-dot
Latest version: 6.0.6

## @pdfme/cli

This package provides the `pdfme` command-line interface for JSON-first pdfme workflows, including PDF generation, validation, diagnostics, example export, and PDF conversion utilities.

Node.js 20 or later is required.

For the complete pdfme documentation, see [this link](https://pdfme.com/docs/cli).
npm package: @pdfme/common
Description: TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!
Author: hand-dot
Latest version: 6.0.6

## @pdfme/common

This library provides shared types, constants, and utility functions used across the [@pdfme/ui](https://www.npmjs.com/package/@pdfme/ui) and [@pdfme/generator](https://www.npmjs.com/package/@pdfme/generator) packages. The shared types include definitions for templates and other commonly used structures.

For the complete documentation of pdfme, please refer to [this link](https://pdfme.com/docs/getting-started).
npm package: @pdfme/converter
Description: TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!
Author: hand-dot
Latest version: 6.0.6

## @pdfme/converter

This library provides utility functions for converting PDFs to other formats or converting data—such as Markdown—into PDF(WIP).

For the complete pdfme documentation, see [this link](https://pdfme.com/docs/converter).
npm package: @pdfme/generator
Description: TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!
Author: hand-dot
Latest version: 6.0.6

## @pdfme/generator

This library provides the `generate` function for creating PDF files using templates and inputs.

For the complete documentation of pdfme, please refer to [this link](https://pdfme.com/docs/getting-started).
npm package: @pdfme/manipulator
Description: TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!
Author: hand-dot
Latest version: 6.0.6

## @pdfme/manipulator

This library provides utility functions for merging, splitting, and manipulating PDF files.

For the complete documentation of pdfme, please refer to [this link](https://pdfme.com/docs/manipulator).
npm package: @pdfme/schemas
Description: TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!
Author: hand-dot
Latest version: 6.0.6

## @pdfme/schemas

This library provides schemas for pdfme templates.  
The currently supported schemas can be found in [this document](https://pdfme.com/docs/supported-features).

These schemas are used as plugins in [@pdfme/ui](https://www.npmjs.com/package/@pdfme/ui) and [@pdfme/generator](https://www.npmjs.com/package/@pdfme/generator), where they are interpreted by UI components and the PDF generator.

For the complete documentation of pdfme, please refer to [this link](https://pdfme.com/docs/getting-started).
npm package: @pdfme/ui
Description: TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!
Author: hand-dot
Latest version: 6.0.6

## @pdfme/ui

This library provides the following classes, which can be integrated into applications built with any framework:

- `Designer`: A WYSIWYG editor for designing templates.
- `Form`: A form based on templates for collecting input data.
- `Viewer`: A viewer for displaying PDF files generated with [@pdfme/generator](https://www.npmjs.com/package/@pdfme/generator) using templates and input data.

The published `@pdfme/ui` package ships as a standalone bundle, so consumers do not need to install `react` or `react-dom` separately just to use these classes.

For the complete documentation of pdfme, please refer to [this link](https://pdfme.com/docs/getting-started).
npm package: @pdfmergy-embedpdf/core
Description: Core package for CloudPDF.
Latest version: 2.6.4

# @embedpdf/core

Core package for CloudPDF.

## Installation

```bash
npm install @embedpdf/core
```

## Usage

```typescript
import { PDFCore } from '@embedpdf/core';
import { createPdfiumModule, PdfiumEngine } from '@embedpdf/engines';
import { NavigationPlugin } from '@embedpdf/plugin-navigation';

const wasmBinary = await loadWasmBinary();
const wasmModule = await createPdfiumModule({ wasmBinary });
const engine = new PdfiumEngine(wasmModule, new ConsoleLogger());

const core = new PDFCore(engine);

const navigationPlugin = new NavigationPlugin({
  initialPage: 1,
  defaultScrollMode: 'continuous',
});

core.registerPlugin(navigationPlugin);

core.loadDocument('https://cloudpdf.io/example.pdf');

core.on('document:loaded', ({ pageCount }) => {
  console.log(`Document loaded with ${pageCount} pages`);
});

core.on('navigation:pageChanged', ({ pageNumber }) => {
  console.log(`Navigated to page ${pageNumber}`);
});
```
npm package: @pdfmergy-embedpdf/models
Description: Shared type definitions, data models, and utility helpers (geometry, tasks, logging, PDF primitives) that underpin every package in the EmbedPDF ecosystem.
Author: Bob Singor, Ji Chang
Latest version: 2.6.4

<div align="center">
  <a href="https://www.embedpdf.com">
    <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
  </a>
  <h1>EmbedPDF</h1>

<a href="https://www.npmjs.com/package/@embedpdf/models"><img alt="NPM version" src="https://img.shields.io/npm/v/@embedpdf/models.svg?style=for-the-badge&labelColor=000000"></a> <a href="https://github.com/embedpdf/embed-pdf-viewer/blob/main/packages/models/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@embedpdf/models.svg?style=for-the-badge&labelColor=000000"></a> <a href="https://github.com/embedpdf/embed-pdf-viewer/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&labelColor=000000"></a>

</div>

# @embedpdf/models

Centralised **type definitions & helper utilities** shared by every EmbedPDF runtime and UI package. Keep your codebase error‑free with a single source of truth for documents, pages, annotations, geometry, async tasks, permissions, and more.

## Documentation

Full reference & examples live at:

**[Official Documentation](https://www.embedpdf.com/docs)**

## Why `@embedpdf/models`?

- **Single source of truth** – all packages agree on data shapes (e.g. `PdfDocumentObject`, `PdfAnnotationObject`).
- **Strong typing** – exhaustive enums, discriminated unions, generics; a huge boost to DX.
- **Zero runtime cost** – pure type exports & tiny helper functions, fully tree‑shakable.

## Features

- Geometry helpers (`transformRect`, `rotateRect`, `boundingRect`, …)
- Logger with pluggable transports & log‑level filtering
- Promise‑like **Task** abstraction (cancellable / abortable)
- Rich PDF domain model: documents, pages, bookmarks, annotations, form fields, permissions, search
- Utility helpers (`unionFlags`, `PdfTaskHelper`, …)

## Installation

```bash
npm install @embedpdf/models
```

## Basic Usage

```typescript
import { Rect, transformRect, Rotation } from '@embedpdf/models';

const pageSize = { width: 612, height: 792 }; // Letter size
const annotation: Rect = {
  origin: { x: 100, y: 150 },
  size: { width: 200, height: 50 },
};

// Rotate 90° and scale by 1.5×
const transformed = transformRect(pageSize, annotation, Rotation.Degree90, 1.5);
console.log(transformed);
```

## Learn More

Check the docs for deep dives into:

- **Geometry API** – positions, quads, rectangles
- **Task abstraction** – cancellable async workflows
- **Complete Type Reference** – every interface & enum used across the stack

## License

MIT – see the [LICENSE](https://github.com/embedpdf/embed-pdf-viewer/blob/main/packages/models/LICENSE) file.
npm package: @pdfmergy/core
Description: Core package for CloudPDF.
Latest version: 2.6.3
Deprecated: Moved to @pdfmergy-embedpdf/core

# @embedpdf/core

Core package for CloudPDF.

## Installation

```bash
npm install @embedpdf/core
```

## Usage

```typescript
import { PDFCore } from '@embedpdf/core';
import { createPdfiumModule, PdfiumEngine } from '@embedpdf/engines';
import { NavigationPlugin } from '@embedpdf/plugin-navigation';

const wasmBinary = await loadWasmBinary();
const wasmModule = await createPdfiumModule({ wasmBinary });
const engine = new PdfiumEngine(wasmModule, new ConsoleLogger());

const core = new PDFCore(engine);

const navigationPlugin = new NavigationPlugin({
  initialPage: 1,
  defaultScrollMode: 'continuous',
});

core.registerPlugin(navigationPlugin);

core.loadDocument('https://cloudpdf.io/example.pdf');

core.on('document:loaded', ({ pageCount }) => {
  console.log(`Document loaded with ${pageCount} pages`);
});

core.on('navigation:pageChanged', ({ pageNumber }) => {
  console.log(`Navigated to page ${pageNumber}`);
});
```
npm package: @pdfmergy/models
Description: Shared type definitions, data models, and utility helpers (geometry, tasks, logging, PDF primitives) that underpin every package in the EmbedPDF ecosystem.
Author: Bob Singor, Ji Chang
Latest version: 2.6.3
Deprecated: Moved to @pdfmergy-embedpdf/models

<div align="center">
  <a href="https://www.embedpdf.com">
    <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
  </a>
  <h1>EmbedPDF</h1>

<a href="https://www.npmjs.com/package/@embedpdf/models"><img alt="NPM version" src="https://img.shields.io/npm/v/@embedpdf/models.svg?style=for-the-badge&labelColor=000000"></a> <a href="https://github.com/embedpdf/embed-pdf-viewer/blob/main/packages/models/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@embedpdf/models.svg?style=for-the-badge&labelColor=000000"></a> <a href="https://github.com/embedpdf/embed-pdf-viewer/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&labelColor=000000"></a>

</div>

# @embedpdf/models

Centralised **type definitions & helper utilities** shared by every EmbedPDF runtime and UI package. Keep your codebase error‑free with a single source of truth for documents, pages, annotations, geometry, async tasks, permissions, and more.

## Documentation

Full reference & examples live at:

**[Official Documentation](https://www.embedpdf.com/docs)**

## Why `@embedpdf/models`?

- **Single source of truth** – all packages agree on data shapes (e.g. `PdfDocumentObject`, `PdfAnnotationObject`).
- **Strong typing** – exhaustive enums, discriminated unions, generics; a huge boost to DX.
- **Zero runtime cost** – pure type exports & tiny helper functions, fully tree‑shakable.

## Features

- Geometry helpers (`transformRect`, `rotateRect`, `boundingRect`, …)
- Logger with pluggable transports & log‑level filtering
- Promise‑like **Task** abstraction (cancellable / abortable)
- Rich PDF domain model: documents, pages, bookmarks, annotations, form fields, permissions, search
- Utility helpers (`unionFlags`, `PdfTaskHelper`, …)

## Installation

```bash
npm install @embedpdf/models
```

## Basic Usage

```typescript
import { Rect, transformRect, Rotation } from '@embedpdf/models';

const pageSize = { width: 612, height: 792 }; // Letter size
const annotation: Rect = {
  origin: { x: 100, y: 150 },
  size: { width: 200, height: 50 },
};

// Rotate 90° and scale by 1.5×
const transformed = transformRect(pageSize, annotation, Rotation.Degree90, 1.5);
console.log(transformed);
```

## Learn More

Check the docs for deep dives into:

- **Geometry API** – positions, quads, rectangles
- **Task abstraction** – cancellable async workflows
- **Complete Type Reference** – every interface & enum used across the stack

## License

MIT – see the [LICENSE](https://github.com/embedpdf/embed-pdf-viewer/blob/main/packages/models/LICENSE) file.
npm package: @pdfn/core
Description: Core utilities and constants for pdfn packages
Author: gokulsiva
Latest version: 0.2.0

# @pdfn/core

Shared utilities and constants for pdfn packages.

> **Note:** This is an internal package. Most users should use `@pdfn/react` directly.

## Overview

`@pdfn/core` provides shared functionality used across the pdfn ecosystem:

- **Page sizes** — A4, Letter, Legal, and other standard dimensions
- **CSS utilities** — Base styles for PDF rendering
- **Tailwind helpers** — Class extraction and marker detection
- **HTML generation** — Client-side rendering HTML templates

## Installation

```bash
npm install @pdfn/core
```

## Entry Points

### `@pdfn/core` (Browser-safe)

The main entry point contains utilities safe for browser bundling:

```typescript
import {
  // Page sizes
  PAGE_SIZES,
  getPageDimensions,
  getPageSizeCss,

  // CSS utilities
  BASE_STYLES,
  generatePageCss,
  extractPageConfig,

  // Tailwind utilities
  hasTailwindMarker,
  extractPrecompiledCss,
  removeTailwindMarker,

  // HTML generation
  generateClientHtml,
  CLIENT_READY_SCRIPT,
} from '@pdfn/core';
```

### `@pdfn/core/tailwind` (Server-only)

Server-only Tailwind CSS compilation. Uses Node.js built-ins (`fs`, `path`) and `fast-glob`:

```typescript
import { compileTailwind } from '@pdfn/core/tailwind';

const { css, classCount, fileCount } = await compileTailwind({
  templatePatterns: ['./pdfn-templates/**/*.tsx'],
  cssPath: './pdfn-templates/styles.css', // optional
  cwd: process.cwd(),
  debug: true,
});
```

> **Important:** Only import from `@pdfn/core/tailwind` in server-side code (build plugins, CLI tools). It cannot be bundled for browsers.

## Used By

- `@pdfn/react` — Uses page sizes, CSS utilities, and Tailwind markers
- `@pdfn/client` — Uses HTML generation for client-side rendering
- `@pdfn/next` — Uses Tailwind compilation for build-time CSS
- `@pdfn/vite` — Uses Tailwind compilation for build-time CSS

## License

MIT