open-index/open-npm huggingface dataset:
npm package: @longlonga/mysql-mcp-server
Description: MCP server for MySQL database interaction
Latest version: 1.0.1

# @longlonga/mysql-mcp-server

A [Model Context Protocol (MCP)](https://modelcontextprotocol.io) server for interacting with MySQL databases. Provides tools for querying, inspecting, and modifying MySQL databases directly from Claude.

## Installation

### Via Claude Code (recommended)

```bash
claude mcp add --scope user mysql \
  -e MYSQL_HOST=your-host \
  -e MYSQL_PORT=3306 \
  -e MYSQL_USER=your-user \
  -e MYSQL_PASSWORD=your-password \
  -e MYSQL_DATABASE=your-database \
  -- npx -y @longlonga/mysql-mcp-server
```

### Via claude_desktop_config.json

```json
{
  "mcpServers": {
    "mysql": {
      "command": "npx",
      "args": ["-y", "@longlonga/mysql-mcp-server"],
      "env": {
        "MYSQL_HOST": "your-host",
        "MYSQL_PORT": "3306",
        "MYSQL_USER": "your-user",
        "MYSQL_PASSWORD": "your-password",
        "MYSQL_DATABASE": "your-database"
      }
    }
  }
}
```

## Configuration

| Environment Variable | Required | Default | Description |
|---|---|---|---|
| `MYSQL_HOST` | Yes | — | MySQL server hostname or IP |
| `MYSQL_PORT` | No | `3306` | MySQL server port |
| `MYSQL_USER` | Yes | — | MySQL username |
| `MYSQL_PASSWORD` | Yes | — | MySQL password |
| `MYSQL_DATABASE` | No | — | Default database (can be overridden per tool call) |

## Tools

| Tool | Description |
|---|---|
| `mysql_list_databases` | List all databases the user has access to |
| `mysql_list_tables` | List all tables in a database |
| `mysql_describe_table` | Get column definitions for a table |
| `mysql_show_create_table` | Get the full CREATE TABLE DDL statement |
| `mysql_query` | Execute a read-only SELECT/SHOW/EXPLAIN query |
| `mysql_execute` | Execute a write SQL statement (INSERT/UPDATE/DELETE/DDL) |
| `mysql_table_stats` | Get row count and size statistics for tables |

## Usage Examples

Once connected, you can ask Claude things like:

- "List all tables in my database"
- "Describe the structure of the users table"
- "Query the last 10 orders"
- "How many rows are in each table?"

## License

MIT
npm package: @longlongago2/rm_calendar
Description: react mobile calendar
Author: longlongago2
Latest version: 1.0.1

# rm-calendar

> react mobile calendar

![gif](./screenshot/GIF.gif)

## NPM

#### install

`npm install rm-calendar --save`

#### usage

```
import RMCalendar from 'rm-calendar';

class App extends React.Component {
  render() {
    return (
      <RMCalendar
          defaultDate={new Date()}
          type="month"
          touch
          width="100%"
          locale="zh-cn"
          firstDayOfWeek={0}
          schedule={schedule}
          toolbar
          onCellClick={this.handleCellClick}
          onPageChange={this.handlePageChange}
        />
    );
  }
}
```

## CDN

#### download

[rm-calendar.zip (click to download)](https://github.com/longlongago2/rm-calendar/archive/master.zip)

#### usage

```
// css
<link rel="stylesheet" href="[path]/dist/rm-calendar.css">

// js
<script src="[path]/dist/rm-calendar.js"></script>

// html
<RMCalendar.default
    defaultDate={new Date()}
    type="month"
    touch
    width="100%"
    locale="zh-cn"
    firstDayOfWeek={0}
    schedule={schedule}
    toolbar
    onCellClick={this.handleCellClick}
    onPageChange={this.handlePageChange}
  />
```
npm package: @longlost/afs-custom-exifreader
Description: A custom build of the exifreader library. This build is intended for use by app-file-system.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.0

# afs-custom-exifreader
A custom build of the exifreader library. This build is intended for use by `app-file-system`.
npm package: @longlost/app-account
Description: prebuilt overlay to handle user account editing and updating
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.3

# \<app-account\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-auth
Description: wrapper for firebase and firebaseui authentication
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.3

# \<app-auth\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-camera
Description: controls accessing and displaying the camera capture feed. Adds ui controls for taking photo captures and adjusting camera settings
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.20.4

# \<app-camera\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-carousel
Description: configurable carousel with autoplay, swipe, optional nav and av buttons
Author: Longlost Dev longlostdev@gmail.com
Latest version: 3.0.4

# \<app-carousel\>

This element takes slotted elements and controls how they scroll horizontally.

## Example Usage

```
<app-carousel auto-play 
        dots
        flip-time="3500"
        nav 
        position="start">
  <my-carousel-item></my-carousel-item>
  <my-carousel-item></my-carousel-item>
  <my-carousel-item></my-carousel-item>
</app-carousel>
```

## Styling


Since the scroller element is **'display: flex'**, 
you may have to set a **'min-width'**
on your elements to get the desired layout.


### Both default to 8px.


--carousel-dot-size

--carousel-dot-spacing



### Nav butons and Dots, plus Play/Stop icons.

--carousel-ui-color

--carousel-ui-background-color

--carousel-ui-ink-color


## Public Api

### Properties:

**auto-play**
 Boolean false,   Starts player immediately.

**dots**
 Boolean false,   Section index ui dots.
 
**flip-time**
 Number  3000,    Milliseconds to wait between each flip.

**nav**
 Boolean false,   Include nav ui.

**position**
 String 'center', How carousel positions elements relative to self.



### Methods:
    
 **animateToSection(index)**
  Animate to a given section by index number.
 
 **moveToSection(index)**
  Instant move to a given section by index number.
 
 **nextItem(direction, recycle)**
  Animate to next slide, pass in direction and if it should wrap from last slide to begining slide.
 
 **play()**
  Start carousel flips.
 
 **stop()**
  Stop carousel flips.



### Events:

 **'app-carousel-centered-item-changed'**, {value: item}
  Fired each time a new element becomes centered in the carousel.
  
 **'app-carousel-section-index-changed'**, {value: index}
  Fired each time the section index changes.
  
 **'app-carousel-sections-changed'**,      {value: sections}
  Fired each time items in the carousel change, thus triggering new section items creation.

---

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-carousels
Description: A collection of easy to use carousel UI elements.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 4.1.5

# app-carousels
A collection of easy to use carousel UI elements.


# \<app-carousel\>

This element takes slotted elements and controls how they scroll horizontally.

## Example Usage

```
<app-carousel auto-play 
              dots
              flip-time="3500"
              nav 
              position="start">
  <my-carousel-item></my-carousel-item>
  <my-carousel-item></my-carousel-item>
  <my-carousel-item></my-carousel-item>
</app-carousel>
```

## Styling


Since the scroller element is **'display: flex'**, 
you may have to set a **'flex-basis'**, **'min-width'**, etc.
on your elements to get the desired layout.


### Both default to 8px.


--carousel-dot-size

--carousel-dot-spacing



### Nav butons and Dots, plus Play/Stop icons.

--carousel-ui-color

--carousel-ui-background-color

--carousel-ui-ink-color


## Public Api

### Properties:

**auto-play**
 Boolean false,   Starts player immediately.

**dots**
 Boolean false,   Section index ui dots.
 
**flip-time**
 Number  3000,    Milliseconds to wait between each flip.

**nav**
 Boolean false,   Include nav ui.

**position**
 String 'center', How carousel positions elements relative to self.



### Methods:
    
 **animateToSection(index)**
  Animate to a given section by index number.
 
 **moveToSection(index)**
  Instant move to a given section by index number.
 
 **nextItem(direction, recycle)**
  Animate to next slide, pass in direction and if it should wrap from last slide to begining slide.
 
 **play()**
  Start carousel flips.
 
 **stop()**
  Stop carousel flips.



### Events:

 **'app-carousel-centered-item-changed'**, {value: item}
  Fired each time a new element becomes centered in the carousel.
  
 **'app-carousel-section-index-changed'**, {value: index}
  Fired each time the section index changes.
  
 **'app-carousel-sections-changed'**,      {value: sections}
  Fired each time items in the carousel change, thus triggering new section items creation.

---

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-cart
Description: cart animations, buttons and layout
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.11

# \<app-cart\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-checkout
Description: A collection of elements that walk the user through the checkout experience including handling shipping and payment
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.8

# \<app-checkout\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-file-system
Description: This custom element handles all aspects of handling files for an app. Processing, uploading, viewing and editing.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.10.0

# \<app-file-system\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-header-overlay
Description: configurable overlay with a header
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.9

# \<app-header-overlay\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-inputs
Description: A collection of commonly used input elements.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.2.2

# \<app-inputs\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-main-mixin
Description: This mixin abstracts several common functions used at the top level of most apps.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.2

# \<app-main-mixin\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-media
Description: port of polymer app-media elements, used to interact with media devices
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.1.2

# \<app-media\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-modal
Description: configurable full-screen modal element
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.1

# \<app-modal\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-overlay
Description: configurable full-screen overlay custom element that implements overlay-mixin
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.0

# \<app-overlay\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-settings
Description: common app settings ui
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.1

# \<app-settings\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-shared-styles
Description: shared common app css styles
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.0.15

# \<app-shared-styles\>


### To use these across web components, `import` this file in js and use the 'include' keyword in the html `<script>` tag
	

my-element.js

```	
import '@longlost/app-shared-styles/app-shared-styles.js';
```	
	
my-element.html

```	
<style include="app-shared-styles">
	
	... element specific css
	
</style>
```
---

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-shell
Description: This element bundles core functionalities that are essential to any app.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 6.10.6

# \<app-shell\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/app-spinner
Description: spinner which includes a cancel button that is displayed after a waitTime and options to set to full-screen
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.2.2

# \<app-spinner\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/badged-icon-button
Description: An icon-button with an upper and lower set of notification badges.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.4

# \<badged-icon-button\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/braintree-badge
Description: a simple element that takes a braintree merchantId from app.config and lazy-loads a badge which links to a verified merchant web page
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.3

# \<braintree-badge\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/capture-image
Description: Handles changing between images with varying url and/or orientation from a on-device photo capture
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.0

# \<capture-image\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/cart-icon
Description: cart icon button with badges to be used along with app-cart
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.1

# \<cart-icon\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/checkout-items-sync
Description: subscribes to changes in checkout items in order to notify user of price/availability changes
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.1

# \<checkout-items-sync\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/checkout-pay
Description: custom element that interfaces with braintree dropin-ui and firebase callable functions to process payments
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.0

# \<checkout-pay\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/cms-carousels
Description: carousel content editor for cms
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.0

# \<cms-carousels\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/cms-events
Description: cms event editing page
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.0.1

# \<cms-events\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/cms-icons
Description: common icons specifically used by cms apps
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.2

# \<cms-icons\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/cms-images
Description: ui to easily target and update multiple client image and carousel elements
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.0.0

# \<cms-images\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/create-project
Description: Start a new Client or CMS project easily with this cli utilitiy.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.3.0


# create-project

start a new App or CMS project easily with this cli utilitiy


### Install globally with npm:

npm install -g @longlost/create-project@latest


### Create new repo without at .gitignore but with a license


### Clone repo and cd into it

git clone <repo url>


### Use the cli utility to pull in the project boilerplate

npm init project
npm package: @longlost/db-image
Description: lazyload database image
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.0.3

# \<db-image\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/drag-drop-files
Description: drag and drop zone for uploading files, port of github michael-silva/yo-file-uploader
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.6

# \<drag-drop-files\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/drag-drop-list
Description: drag and drop list items, a port of github sharedlabs/sortable-list
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.0.5

# \<drag-drop-list\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/edit-input
Description: custom element that handles changing state of two icons depending on the input's value
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.1

# \<edit-input\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/example-view
Description: reference view element for app-main/app-shell examples
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.2

# \<example-view\>

Reference view element for app-main/app-shell examples
---

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/fancy-header-example
Description: reference implementation of app-header-overlay and app-carousel in action
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.2

# \<fancy-header-example\>


Reference implementation of app-header-overlay and app-carousel in action.


## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/file-uploader
Description: Accepts files from user and handles uploading/optimization/deleting/previewing/rearranging
Author: Longlost Dev longlostdev@gmail.com
Latest version: 3.0.4

# \<file-uploader\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/icon-to-spinner
Description: small custom element that accepts a md style icon and animates it out in leu of a paper-spinner
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.0.1

# \<icon-to-spinner\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/image-editor
Description: Handles adding/removing image files to a project
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.3

# \<image-editor\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/lazy-carousel
Description: Self lazy-loading images carousel
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.1.11

# \<lazy-carousel\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/lazy-image
Description: A simple wrapper for Polymer's iron-image that uses IntersectionObserver to self lazy load.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.4

# \<lazy-image\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/lazy-video
Description: html5 video tag wrapper that auto lazy-loads based on viewport visibility
Author: Longlost Dev longlostdev@gmail.com
Latest version: 2.5.3

# \<lazy-video\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/leaflet-map
Description: Custom element wrapper for leaflet map api.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.1

# \<leaflet-map\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/lottie-svg
Description: lottie-web custom element wrapper
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.1

# \<lottie-svg\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/magic-bulk-data-tool
Description: node.js script that saves card thumbnails to separate 'set' folders for use with node-tfjs-retrain module
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.0

# magic-bulk-data-tool
node.js script that saves card thumbnails to separate 'set' folders for use with node-tfjs-retrain module


## Example Usages

-   Save Magic card images for use in retraining an ml classifier:  
    `node index.js --bulk_data_dir="C:/scryfall/bulk_data" --images_dir="C:/scryfall/images"`
npm package: @longlost/magic-preprocess
Description: augment magic card images for use with node-tfjs-retrain
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.1

# magic-preprocess
augment magic card images for use with node-tfjs-retrain


## Example Usage

-   Clip card corners and create random noise background:  
    `node index.js --images_dir="C:/Magic_Project/Images" --output_dir="C:/Magic_Project/Preprocessed"`
npm package: @longlost/node-tfjs-retrain
Description: Tensorflow.js mobilenet transfer learning cli tool
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.3

# node-tfjs-retrain

Retraining image classification model using TensorFlow.js in Node.

Based on the following js.tensorflow.org tutorials:

-   [Webcam Transfer learning](https://js.tensorflow.org/tutorials/webcam-transfer-learning.html)
-   [Training MNIST with Node.js](https://github.com/tensorflow/tfjs-examples/tree/master/mnist-node)

Excellent article from James Thomas that helped (_skip the stuff about downloading the model shards manually; there's a much simpler way described in the comments_):  
[Machine Learning in Node.js with TensorFlow.js](http://jamesthom.as/blog/2018/08/07/machine-learning-in-node-dot-js-with-tensorflow-dot-js/)

## Example Usages

-   Retrain and test model:  
    `node app.js --images_dir="C:/Retraining_Project/Images" --model_dir="C:/Retraining_Project/Model"`
-   Skip retraining; just test model:  
    `node app.js --images_dir="C:/Retraining_Project/Images" --model_dir="C:/Retraining_Project/Model" --skip_training=true`
-   Create sample images:  
    `node create_images.js C:/Retraining_Project/Images`


_ 	Full example with tensorboard:

		cli commands to start tensorboard (localhost:6006)

		start virtual environment -

    	source ./venv/bin/activate

 		start tensorboard on localhost:6006 -

    	(venv) $ tensorboard --logdir /tmp/tf_fit_logs

 		node-tfjs-retrain cli -
 
    	node app.js --images_dir="/Users/claymation296/dev/magic/synthetic" --model_dir="/Users/claymation296/dev/nathanML/ml-lock/src/model" --sizing="contain" --epochs="500"

 		shutdown virtual environment

    	(venv) $ deactivate



- 	app.js args:

		--batch_size_fraction -> Number default 0.2
		--dense_units 				-> Number default 100
		--epochs 							-> Number default 50
		--learning_rate 			-> Number default 0.0001
		--sizing 							-> String default 'cover'
		--logdir 							-> String default '/tmp/tf_fit_logs', tensorboard --logdir /tmp/tf_fit_logs


- 	augment_images.js args:

		--flip_images 					-> Boolean default false
		--adjust_brightness 		-> Boolean default false
		--ignore_subdirectories -> Boolean default false
		--labels_to_skip 				-> String default ''




## Help

I'm quite new to Node and TF, so there's a lot of room for cleanup and code improvements. My initial goal was to get something working and worry about minor improvements later. Feel free to submit a PR :)

# Initial TODOs:

-   [x] Create a script to automatically build a training data set to enable users to immediately get started
-   [x] Save trained model in the project directory
-   [x] Replace ui_mock.js with a TrainingParams class
npm package: @longlost/paper-gauge
Description: A simple svg powered ui gauge, or radial progress, custom element.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.3

# \<paper-gauge\>

A simple svg powered ui gauge, or radial progress, Web Component.


These values are available for dynamic changes:

`radius`, `start`, `end`, `min`, `max` and `value`. 

However, `value` is the only animatable property.


## Example Usage

```
npm install --save @longlost/paper-gauge

or

yarn add @longlost/paper-gauge


// app.html

<style>
	
  paper-gauge {
    --dial-width:   8px;
    --label-color:  white;
    --label-weight: normal;
    --value-color:  orange;
    --value-width:  8px;
  }	

</style>


<paper-gauge label value="75"></paper-gauge>




// app.js

import '@longlost/paper-gauge/paper-gauge.js';


const gauge = document.querySelector('paper-gauge');

gauge.max   = 50;
gauge.value = 20;


```


## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/pencil-to-check-icon
Description: icon element that animates between pencil and check states
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.4

# \<pencil-to-check-icon\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @longlost/pinch-to-zoom
Description: A simple wrapper for GoogleChromeLabs/pinch-zoom element which plays nicely within other custom element shadow DOM.
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.1.3

# pinch-to-zoom
A simple wrapper for GoogleChromeLabs/pinch-zoom element which plays nicely within other custom element shadow DOM.
npm package: @longlost/responsive-image
Description: image element which works with webpack responsive-loader and auto lazy loads based on viewport visibility
Author: Longlost Dev longlostdev@gmail.com
Latest version: 1.0.5

# \<responsive-image\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.