open-index/open-npm huggingface dataset:
npm package: @lydio/bubbles
Description: Recursive node transformations for Lydio.
Author: Alex Stevovich
Latest version: 1.0.1

# @lydio/bubbles

**Canonical URL:**
[https://alexstevovich.com/r/lydio-bubbles-nodejs](https://alexstevovich.com/r/lydio-bubbles-nodejs)

Recursive node transformation for [Lydio](https://alexstevovich.com/r/lydio-nodejs)

Lydio Bubbles provide a powerful mechanism for automated transformations across an entire hierarchy of Lydio nodes. This package includes the most commonly used bubbles, with more being added as foundational patterns emerge.

## Installation

```sh

npm  install @lydio/bubbles

```

## What is a Lydio Bubble?

A **Bubble** recursively applies transformations across a hierarchy of Lydio nodes. Bubbles allow you to modify, classify, or audit elements in a structured way without manually iterating through them.

This package provides a collection of the most useful bubbles, including:

- **BEM Bubble** – Applies Block-Element-Modifier naming conventions.

- **Prefix Class Bubble** – Adds a prefix to all class names in a hierarchy.

- **Semantic Class Bubble** – Assigns a class based on the element’s semantic tag.

## BEM Bubble

Applies Block-Element-Modifier (BEM) naming conventions to all elements in a hierarchy.

```js
import { bemBubble } from '@lydio/bubbles';
lydioNode.bubble(bemBubble('my-component'));
```

**example output:**

```html
<div class="component my-component__component">
    <p class="fancy-text my-component__fancy-text"></p>
</div>
```

## Prefix Class Bubble

Prefixes all class names in a hierarchy with a **prefix class identifier**.

```js
import { prefixClassBubble } from '@lydio/bubbles';

lydioNode.bubble(prefixClassBubble('主'));
```

**example output:**

```html
<div class="component 主component">
    <p class="fancy-text 主fancy-text"></p>
</div>
```

## Semantic Class Bubble

```js
import { semanticClassBubble } from '@lydio/bubbles';
lydioNode.bubble(semanticClassBubble());
```

**example output:**

```html
<div class="component">
    <p class="fancy-class p"></p>
</div>
```

## License

Licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).

## Trademark

“Lydio” and related marks are trademarks of Alex Stevovich.

See [TRADEMARK.md](./TRADEMARK.md) for details.
npm package: @lydio/dom
Description: Document object scaffold for Lydio
Author: Alex Stevovich
Latest version: 3.0.1

# @lydio/dom

**Canonical URL:**  
[https://alexstevovich.com/a/lydio-dom-nodejs](https://alexstevovich.com/a/lydio-dom-nodejs)

**Software URL:**  
[https://midnightcitylights.com/software/lydio-dom-nodejs](https://midnightcitylights.com/software/lydio-dom-nodejs)

**Document scaffold node for [Lydio](https://alexstevovich.com/a/lydio-nodejs).**

`@lydio/dom` provides a complete document structure for Lydio, including  
a `<!DOCTYPE html>` declaration and the standard `<html>`, `<head>`, and `<body>` elements.  
It’s a minimal base for any programmatically generated HTML document.

---

## Installation

```sh
npm install @lydio/dom
```

## Example

```js
import Dom from '@lydio/dom';

const dom = new Dom();
dom.html.head.addTag('title').withText('Example Page');
dom.html.body.addTag('p').withText('Hello, world!');

console.log(dom.toHtml());
/*
<!DOCTYPE html><html><head><title>Example Page</title></head><body><p>Hello, world!</p></body></html>
*/
```

## Features

- Adds a valid !DOCTYPE html declaration automatically.
- Includes html, head, and body structure out of the box.
- Lightweight foundation for building full semantic documents.

## License

Licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).

## Trademark

“Lydio” and related marks are trademarks of [Alex Stevovich](https://alexstevovich.com).

See [TRADEMARK.md](./TRADEMARK.md) for details.
npm package: @lydio/google-tag
Description: Google Analytics gtag integration node for Lydio
Author: Alex Stevovich
Latest version: 3.0.2

# @lydio/google-tag

**Canonical URL:**  
[https://alexstevovich.com/a/lydio-google-tag-nodejs](https://alexstevovich.com/a/lydio-google-tag-nodejs)

**Software URL:**  
[https://midnightcitylights.com/software/lydio-google-tag-nodejs](https://midnightcitylights.com/software/lydio-google-tag-nodejs)

**Google Analytics gtag node for [Lydio](https://alexstevovich.com/a/lydio-nodejs).**

`@lydio/google-tag` provides a ready-to-use Google Analytics integration node.  
It generates both the external **gtag.js** loader and inline configuration script,  
ready to embed into any Lydio-generated HTML document.

---

## Installation

```sh
npm install @lydio/google-tag
```

## Example

```js
import GoogleTag from '@lydio/google-tag';

const analytics = new GoogleTag('G-XXXXXXXXXX');

console.log(analytics.toHtml());
/*
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');</script>
*/
```

## Nonce Example

```js
const analytics = new GoogleTag('G-XXXXXXXXXX', { nonce: 'secure123' });
```

## Features

- Generates both required script tags in one fragment.
- Automatically includes async for the loader.
- Supports optional nonce for strict CSP.

## License

Licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).

## Trademark

“Lydio” and related marks are trademarks of [Alex Stevovich](https://alexstevovich.com).

See [TRADEMARK.md](./TRADEMARK.md) for details.
npm package: @lydio/html
Description: Direct HTML element classes for Lydio
Author: Alex Stevovich
Latest version: 3.0.2

# @lydio/html

**Canonical URL:**
[https://alexstevovich.com/a/lydio-html-nodejs](https://alexstevovich.com/a/lydio-html-nodejs)

**Software URL:**
[https://midnightcitylights.com/software/lydio-html-nodejs](https://midnightcitylights.com/software/lydio-html-nodejs)

**Direct HTML element classes for [Lydio](https://alexstevovich.com/a/lydio-nodejs).**

`@lydio/html` provides a direct, class-based interface for working with standard HTML tags in [Lydio](https://alexstevovich.com/a/lydio-nodejs).  
It includes pre-defined node types for common elements — from `<html>` and `<body>` to `<a>`, `<img>`, `<meta>`, and more — allowing clean, programmatic HTML generation.

## Installation

```sh
npm install @lydio/html
```

## Example

```js
import { Dom, Html, A, Img, Ul } from '@lydio/html';

const dom = new Dom();
const html = dom.html;

html.head.addLeaf('meta').withAttribute('charset', 'utf-8');

const list = new Ul();
list.addItem().withText('First');
list.addItem().withText('Second');

html.body
    .addNode(new A().withHref('https://example.com').withText('Visit Site'))
    .addNode(new Img().withSrc('logo.png').withAlt('Logo'))
    .addNode(list);

console.log(dom.toHtml());
/*
<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"></head><body><a href="https://example.com">Visit Site</a><img src="logo.png" alt="Logo"><ul><li>First</li><li>Second</li></ul></body></html>
*/
```

## Available Classes

- **Html** — Root `<html>` element with `lang` support.
- **Dom** — Includes `<!DOCTYPE html>` and a prebuilt `Html` instance.
- **Link** — Creates a `<link>` tag for stylesheets or canonical references.
- **Script** — Adds a `<script>` element with helpers for `src`, `type`, and `loading`.
- **Meta** — Base `<meta>` tag.
- **MetaName** — `<meta name="..." content="...">` convenience class.
- **MetaProperty** — `<meta property="..." content="...">` convenience class.
- **A** — Anchor element with helpers for `href`, `aria-label`, and external links.
- **Img** — Image element with `src` and `alt` attributes.
- **Ul / Ol** — List elements with an `.addItem()` method for adding `<li>` entries.

## License

Licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).

## Trademark

“Lydio” and related marks are trademarks of [Alex Stevovich](https://alexstevovich.com).

See [TRADEMARK.md](./TRADEMARK.md) for details.
npm package: @lydio/login-form
Description: Reusable login form node for Lydio
Author: Alex Stevovich
Latest version: 3.0.0

# @lydio/login-form

**Canonical URL:**  
[https://alexstevovich.com/a/lydio-login-form-nodejs](https://alexstevovich.com/a/lydio-login-form-nodejs)

**Software URL:**  
[https://midnightcitylights.com/software/lydio-login-form-nodejs](https://midnightcitylights.com/software/lydio-login-form-nodejs)

**Reusable login form node for [Lydio](https://alexstevovich.com/a/lydio-nodejs).**

`@lydio/login-form` provides a clean, ready-to-use HTML login form with  
semantic `<label>` and `<input>` elements, pre-configured for `POST` submission.  
It’s ideal for quickly embedding authentication fields within programmatically  
generated HTML layouts built with Lydio.

---

## Installation

```sh
npm install @lydio/login-form
```

## Example

```js
import LoginForm from '@lydio/login-form';

const form = new LoginForm('/api/login');

console.log(form.toHtml());
/*
<form method="POST" action="/api/login">
  <label for="username">Username</label>
  <input id="username" type="text" name="username" placeholder="Username" autocomplete="username" required>
  <label for="password">Password</label>
  <input id="password" type="password" name="password" placeholder="Password" autocomplete="current-password" required>
  <button type="submit">Login</button>
</form>
*/
```

## Options

| Option          | Default      | Description                        |
| --------------- | ------------ | ---------------------------------- |
| `usernameLabel` | `"Username"` | Label text for the username field. |
| `passwordLabel` | `"Password"` | Label text for the password field. |
| `submitLabel`   | `"Login"`    | Text for the submit button.        |
| `classes`       | `[]`         | Optional list of CSS class names.  |

## Features

- Semantic <form> markup with <label> and <input> pairs.
- Preconfigured for POST authentication endpoints.
- Clean defaults, fully overridable through constructor options.

## License

Licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).

## Trademark

“Lydio” and related marks are trademarks of [Alex Stevovich](https://alexstevovich.com).

See [TRADEMARK.md](./TRADEMARK.md) for details.