open-index/open-npm huggingface dataset:
npm package: @lordoftheflies/plutonium-styles
Description: Material design styles for Plutonium Framework
Author: László Hegedűs
Latest version: 0.0.4

# \<plutonium-paper-styles>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i plutonium-paper-styles
```

## Usage
```html
<script type="module">
  import 'plutonium-paper-styles/plutonium-paper-styles.js';
</script>

<plutonium-paper-styles></plutonium-paper-styles>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run

```bash
npm run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```

To build a production version of Storybook, run
```bash
npm run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @lordono/learnstorybook-design-system
Description: Storybook design systems tutorial
Author: Seow Jun Liang
Latest version: 0.1.0

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @lordskippy/vue-pinch-scroll-zoom
Description: Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
Author: Rodion Shlomo Solomonyk
Latest version: 3.3.4

# vue-pinch-scroll-zoom
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

#### example:
https://vue-pinch-scroll-zoom.coddicat.com/

<img src="https://github.com/coddicat/vue-pinch-scroll-zoom/blob/main/example/example.gif" width="250"/>

## Installation
```
npm i @lordskippy/vue-pinch-scroll-zoom
```

## Usage
template:
```html
<PinchScrollZoom
  ref="zoomer"
  :width="300"
  :height="400"
  :scale="scale"
  @scaling="scalingHandler"
  style="border: 1px solid black"
>
  <img src="https://picsum.photos/600/1000" width="300" height="400" />
</PinchScrollZoom>
```

type script:
```ts
import { Component, Vue } from "vue-property-decorator";
import PinchScrollZoom, { PinchScrollZoomEmitData } from "@lordskippy/vue-pinch-scroll-zoom";

@Component({
  name: "PinchScrollZoomExample",
  components: {
    PinchScrollZoom
  }
})
export default class PinchScrollZoomExample extends Vue {
  private scale = 2;
  public scalingHandler(e: PinchScrollZoomEmitData): void {
    console.log(e);
  },
  public reset() {
    (this.$refs.zoomer as PinchScrollZoom).setData({
      scale: 1,
      originX: 0,
      originY: 0,
      translateX: 0,
      translateY: 0        
    });
  }
}
```

## Props
the following properties don't support the ".async" modifier

|name|required|description|default|
|----|--------|-----------|-------|
|width|yes|visible area width||
|height|yes|visible area height||
|contentWidth|no|should be defined when content width larger than container width||
|contentHeight|no|should be defined when content height larger than container height||
|minScale|no|minimum allowable scaling|0.3|
|maxScale|no|maximum allowable scaling|5|
|within|no|limit scrolling of content to its borders|true|
|wheelVelocity|no|zoom velocity when mouse wheel|0.001|
|scale|no|scale of the content|1|
|origin-x|no|transform-origin-x|width/2|
|origin-y|no|transform-origin-y|height/2|
|translate-x|no|transform: translateX|0|
|translate-y|no|transform: translateY|0|
|throttleDelay|no|rendering delay (milliseconds)|25|
|draggable|no|draggable of/off|true|

## Events
the following events are emitted with the argument:
```ts
export interface PinchScrollZoomEmitData {
  x: number;
  y: number;
  scale: number;
  originX: number;
  originY: number;
  translateX: number;
  translateY: number;  
}
```
- startDrag
- stopDrag
- dragging
- scaling

## Methods
```ts
.SetData(data: PinchScrollZoomSetData);

export interface PinchScrollZoomSetData {
    scale: number;
    originX: number;
    originY: number;
    translateX: number;
    translateY: number;
}

```
npm package: @lordsoffallen/chatkit-cli
Description: Chatkit source installer for chat UI and artifact blocks.
Latest version: 0.1.6

# @lordsoffallen/chatkit-cli

Source installer for Chatkit UI blocks.

## Install

Use directly with `npx`:

```bash
npx @lordsoffallen/chatkit-cli add chat
npx @lordsoffallen/chatkit-cli add chat header input messages
npx @lordsoffallen/chatkit-cli add artifact document
```

## Current Commands

```bash
npx @lordsoffallen/chatkit-cli add chat
npx @lordsoffallen/chatkit-cli add chat header
npx @lordsoffallen/chatkit-cli add chat input
npx @lordsoffallen/chatkit-cli add chat messages
npx @lordsoffallen/chatkit-cli add chat sidebar
npx @lordsoffallen/chatkit-cli add chat header input messages
npx @lordsoffallen/chatkit-cli add artifact document
```

This installs source files into:

```text
components/chatkit/
```

And merges the required dependencies into the target app's `package.json`.

## Current Scope

Implemented now:
- `add chat`
- `add chat header`
- `add chat input`
- `add chat messages`
- `add chat sidebar`
- `add artifact document`
npm package: @lordvlad/asn1.js
Description: ASN.1 encoder and decoder
Author: Fedor Indutny
Latest version: 5.1.1

# ASN1.js

ASN.1 DER Encoder/Decoder and DSL.

## Example

Define model:

```javascript
var asn = require('asn1.js');

var Human = asn.define('Human', function() {
  this.seq().obj(
    this.key('firstName').octstr(),
    this.key('lastName').octstr(),
    this.key('age').int(),
    this.key('gender').enum({ 0: 'male', 1: 'female' }),
    this.key('bio').seqof(Bio)
  );
});

var Bio = asn.define('Bio', function() {
  this.seq().obj(
    this.key('time').gentime(),
    this.key('description').octstr()
  );
});
```

Encode data:

```javascript
var output = Human.encode({
  firstName: 'Thomas',
  lastName: 'Anderson',
  age: 28,
  gender: 'male',
  bio: [
    {
      time: +new Date('31 March 1999'),
      description: 'freedom of mind'
    }
  ]
}, 'der');
```

Decode data:

```javascript
var human = Human.decode(output, 'der');
console.log(human);
/*
{ firstName: <Buffer 54 68 6f 6d 61 73>,
  lastName: <Buffer 41 6e 64 65 72 73 6f 6e>,
  age: 28,
  gender: 'male',
  bio:
   [ { time: 922820400000,
       description: <Buffer 66 72 65 65 64 6f 6d 20 6f 66 20 6d 69 6e 64> } ] }
*/
```

### Partial decode

Its possible to parse data without stopping on first error. In order to do it,
you should call:

```javascript
var human = Human.decode(output, 'der', { partial: true });
console.log(human);
/*
{ result: { ... },
  errors: [ ... ] }
*/
```

#### LICENSE

This software is licensed under the MIT License.

Copyright Fedor Indutny, 2017.

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the
following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @lordweasel/rn-styler
Description: non-strict react native simple style library
Author: ChiwonPark
Latest version: 0.2.0

# @lordwasel/rn-styler

non-strict react native simple style library

## Installation

```sh
npm install @lordwasel/rn-styler
```

## Usage

```js
import { multiply } from '@lordwasel/rn-styler';

// ...

const result = await multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @lordxdd/yt-dl
Description: YouTube-dl
Author: LoRDx
Latest version: 2.1.5

# yt-dl

A simple node.js wrapper for [yt-dlp](https://github.com/yt-dlp/yt-dlp).


## Installation

You can install this yt-dl via npm (`npm i @lordxdd/yt-dl`).  
YT-dlp will be automatically downloaded.  


## Usage

```javascript
const { ytadl, ytvdl, yts } = require('@lordxdd/yt-dl');
const fs = require('fs');

(async () => {
  //Audio
  const audioPath = await ytadl(videoId);
  const audioBuffer = fs.readFileSync(audioPath);

  //Video (default: 720p)
  const videoPath = await ytvdl(videoId, quality);
  const videoBuffer = fs.readFileSync(videoPath);
})();

```
npm package: @lore-llc/react
Description: Embeddable LORE session replay components for React
Author: Lore LLC
Latest version: 0.1.2

# @lore/react

Embeddable session replay components for React. Drop a single component into any frontend to replay LORE agent sessions with synced video + action timeline.

## Usage

```tsx
import { LoreSessionReplay } from "@lore/react";
import "@lore/react/styles.css";

<LoreSessionReplay sessionId="s-abc12345-..." />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `sessionId` | `string` | required | LORE session ID |
| `serverUrl` | `string` | `https://lore-agent-memory.onrender.com` | LORE API server URL |
| `autoPlay` | `boolean` | `false` | Auto-play video on load |
| `enableKeyboard` | `boolean` | `true` | Enable keyboard shortcuts |
| `showActions` | `boolean` | `true` | Show actions timeline sidebar |
| `showStats` | `boolean` | `true` | Show stats bar |
| `height` | `string \| number` | `"600px"` | Container height |
| `theme` | `Partial<LoreTheme>` | — | Theme overrides |
| `onTimeUpdate` | `(time, step) => void` | — | Callback on playback time change |
| `onError` | `(error) => void` | — | Callback on error |

## Keyboard shortcuts

| Key | Action |
|-----|--------|
| Space | Play / Pause |
| Left / Right | Seek ±5s |
| Up / Down | Speed up / down |

## Roadmap

- **Progressive video parts** — start playback of part 0 while later parts are still generating (currently all-or-nothing: client polls until all segments are ready)
- **Security** — presigned R2 URLs with configurable expiry, and read-only scoped API keys for partners (currently public but unguessable session_id-based URLs)
npm package: @lore/actions
Description: Blueprints to reduce boilerplate for Redux actions
Latest version: 1.0.0-beta.1

## Installation

Lore-Actions is available as an [npm package](https://www.npmjs.org/package/lore-actions).
```sh
npm install @lore/actions
```
After npm install, you'll find all the .js files in the /src folder and their compiled versions in the /lib folder.

## Usage

This provides an abstraction tier to reduce the boilerplate associated with making ajax calls in client side applications that use [React](https://github.com/facebook/react) and [Redux](https://github.com/rackt/redux).  It works by defining a set of blueprints for standard REST calls for CRUD operations, and then leveraging those blueprints using a configuration file.  Example configuration file:

```js
module.exports = {
  blueprint: 'create',

  model: Todo,

  optimistic: {
    actionType: ActionTypes.ADD_TODO,
    payloadState: PayloadStates.CREATING
  },

  onSuccess: {
    actionType: ActionTypes.UPDATE_TODO,
    payloadState: PayloadStates.RESOLVED
  },

  onError: {
    actionType: ActionTypes.REMOVE_TODO,
    payloadState: PayloadStates.ERROR_CREATING,
    beforeDispatch: function(response, args){
      console.log({
        message: "Todo could not be created",
        response: response
      });
    }
  }
};
```

Configuration options are as follows:

`blueprint` [required]: can be one of `create`, `destroy`, `fetch`, or `update`

`model` [required]: A [Backbone](https://github.com/jashkenas/backbone) Model or Collection, or any function/object that abides by the Backbone interface (has `fetch()` and `save()` methods that return a promise).

`optimistic` [optional]: Action to emit before making an AJAX call to the server.  Must be specified as a pair of strings called `actionType` and `payloadState`.  These values will be picked up by the Redux reducers.  `actionType` should be something like `ADD_TODO` or `REMOVE_TODO` (value is arbitrary but should be unique).  `payloadState` should be something like `FETCHING` or `ERROR_CREATING`.

`onSuccess` [optional]: Action to emit if the AJAX call to the server is successful (returns a 200 level status code).  Arguments are same as `optimistic` option.

`onError` [optional]: Action to emit if the AJAX call to the server fails (returns a non-200 level status code).  Supports an optional `beforeDispatch` callback that allows you to handle the error case by notifying the user (such as through the console or through a toast or snack in the UI).
npm package: @lore/cli
Description: The Command Line Interface (CLI) for Lore
Latest version: 1.0.0-beta.1

# lore-cli

```
*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
*                                                            _.-"\        *
*  ▄█        ▄██████▄     ▄████████    ▄████████         _.-"     \       *
*  ███       ███    ███   ███    ███   ███    ███     ,-"          \      *
*  ███       ███    ███   ███    ███   ███    █▀     ( \            \     *
*  ███       ███    ███  ▄███▄▄▄▄██▀  ▄███▄▄▄         \ \            \    *
*  ███       ███    ███ ▀▀███▀▀▀▀▀   ▀▀███▀▀▀          \ \            \   *
*  ███       ███    ███ ▀███████████   ███    █▄        \ \         _.-;  *
*  ███▌    ▄ ███    ███   ███    ███   ███    ███        \ \    _.-"   :  *
*  █████▄▄██  ▀██████▀    ███    ███   ██████████         \ \,-"    _.-"  *
*  ▀                      ███    ███                       \(   _.-"      *
*                                                           `--"          *
*                   ~ BUILD APPS WORTHY OF LEGEND ~                       *
*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
```

## Installation

**With [node](http://nodejs.org) installed:**

```
# Get the latest stable release of the lore-cli
$ npm install lore-cli -g
```

## Usage

To generate a new Lore project:

```
$ lore new <project name>
```
npm package: @lore/connect
Description: A lore hook that orchestrates behavior between actions and reducers
Latest version: 1.0.0-beta.1

# @lore/connect

### Purpose

Provides a decorator for React components that allows components to specify which data they need
and will automatically fetch that data if it doesn't exist.  The data is either returned from the
store or triggers the action they fetches the data (and notifies the store when it arrives).

### Dependant Hooks

None.

### Example Usage

**Scenario 1**: If the component doesn't need to be subscribed to changes in the store (which
is the typical scenario) just pass in two arguments; the state function and the component:

```js
connect(function(getState, props, context){
  return {
    user: getState('user.current')
  }
}, createReactClass({...}))
```

**Scenario 2**: If the component does need to be subscribed to changs in the store, pass in
three arguments; options, the state function, and the component.

```js
connect({
   subscribe: true
}, function(getState, props, context){
   return {
      user: getState('user.current')
   }
}, createReactClass({...}))
```
npm package: @lore/models
Description: A lore hook that creates models for AJAX communication
Latest version: 1.0.0-beta.1

# @lore/models

### Purpose

Create a Model for every file in `src/models` and expose the resultant Models on `lore.models`.

### Dependant Hooks

None.

### Needed improvements

1. PascalCase the models that get exposed on `lore.models` (i.e. `lore.models.Todo` instead of `lore.models.todo`)

### Override Rules

Models typically need three things in order to be able to fetch a collection of resources

1. The URL of the API server to hit
2. The path to hit on the server (/todos for example)
3. A method to parse the server response (such as to convert timestamps or moment.js objects or something)

For apps that only have a single API server, the endpoint the models should use is the same the app is
configured for by default.  So that can be obtained from `apiRoot` in `config/models.js`. The path that
should be appended to the API Root can be derived from the model name (`todo`) and whether or not `pluraize` has 
been set to true or false in `config/models.js`. 

Then we just need to know how to parse the data, and for apps where the attribute field names in the models mirror
those in the API reponse (which is typical for new applications), even that method might be the same, especially if
you just want to convert globally applied timestamps like `createdAt` and `updatedAt` to an easier to work with format
like a moment.js object (unless you prefer to do the conversion in your components).

So for that scenario, the `parse` method can be pulled from `config/models.js`.

For apps that have been around for a while, and have survived API changes, it's not uncommon to have the parse methods
be a little more specific to that model, such as renaming fields befor the client code uses it to prevent API changes
from rippling through th applications.  For those scenarios, you may find yourself starting to populate files
like `src/models/todo.js`.
 
And if you're application consumes data from more than one API server, you'll also need to update the `urlRoot` in 
the individual `src/models/todo.js` files so they know which server they should talk to.

So given all of that, the `models` hook builds the configuration for each Model it creates using a set of
rules.

1. It first pulls in `config/models.js` to get the `apiRoot` and `pluralize` setting.
2. It then overrides that config with anything it finds in the individual config file located at `src/models/todo.js`, which will also include the 
`parse` method collections should use.
3. Finally, it fills in anything that still hasn't been defined using conventions (such as deriving the `urlRoot`
from the model name and the `pluralize` setting). 

### Example Usage

Given a project where a `todo` model has been created like so:

```sh
src
|-models
  |-todo.js
```

This hook will find it, create a Model from it (using a combination of the data in `config/models.js` and 
`src/models/todos.js`, and expose the Model on `lore.models.todo`.
npm package: @lore/redux
Description: A lore hook that configures Redux and creates the store
Latest version: 1.0.0-beta.1

# @lore/redux

### Purpose

This hooks is responsible for creating the [Redux Store](http://redux.js.org/docs/basics/Store.html) and applying
any desired middleware.

### Dependant Hooks

Needs run after the `reducers` hook, since it needs them to build up the store.

### Needed improvements

1. Should maybe be renamed to `store` since the thing it creates is the Redux store, and the hook exposes it as
`lore.store`.


### Example Usage

Takes whatever middleware is specified in `config/redux.js` and applies it to Redux build steps for the Store. The
default middleware is the `redux-thunk` middleware as it allows for asynchronous actions.  So a `redux.js` config
file that looks like this:

```js
// file: config/redux.js
var thunk = require('redux-thunk');

module.exports = {
  middleware: [
    applyMiddleware(thunk)
  ]
}
```

is equivalent to the standard Redux Store build process that looks like this:

```js
var Redux = require('redux');
var thunk = require('redux-thunk');
var createStore = Redux.createStore;
var combineReducers = Redux.combineReducers;
var compose = Redux.compose;
var applyMiddleware = Redux.applyMiddleware;

var finalCreateStore = compose([
  applyMiddleware(thunk)
])(createStore);

var reducer = combineReducers({
  // your object of reducers
})

var store = finalCreateStore(reducer);

// expose store on Lore instance
lore.store = store;
```