open-index/open-npm huggingface dataset:
npm package: @manufosela/historical-line
Description: A horizontal timeline visualization web component for displaying historical data, built with Lit
Author: manufosela
Latest version: 2.0.0

# @manufosela/historical-line

A horizontal timeline visualization web component for displaying historical data, built with [Lit](https://lit.dev/).

## Installation

```bash
npm install @manufosela/historical-line
```

## Usage

```javascript
import '@manufosela/historical-line';
```

```html
<historical-line
  title="Work Experience"
  start-year="2015"
  end-year="2024">
</historical-line>

<script>
  document.querySelector('historical-line').data = [
    { start: '3/1/2015', main: 'Company A', desc: 'Developer', bg: '#3b82f6' },
    { start: '6/1/2018', main: 'Company B', desc: 'Senior Dev', bg: '#8b5cf6' },
    { start: '1/1/2022', main: 'Company C', desc: 'Lead', bg: '#22c55e' }
  ];
</script>
```

### Declarative Usage

```html
<historical-line title="Timeline" start-year="2020" end-year="2024">
  <timeline-item
    start="1/1/2020"
    label="Event 1"
    description="Description"
    background="#ef4444">
  </timeline-item>
  <timeline-item
    start="6/1/2022"
    label="Event 2"
    description="Another event"
    background="#22c55e">
  </timeline-item>
</historical-line>
```

## Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `title` | String | `''` | Timeline title |
| `start-year` | Number | Current year | Start year of timeline |
| `end-year` | Number | Current year | End year of timeline |

## Data Format

Each data item should have:

| Property | Type | Description |
|----------|------|-------------|
| `start` | String | Date in M/D/YYYY format |
| `main` | String | Main label text |
| `desc` | String | Description text |
| `bg` | String | Background color (CSS) |
| `color` | String | Text color (CSS) |

## CSS Custom Properties

| Property | Default | Description |
|----------|---------|-------------|
| `--font-size` | `16px` | Base font size |
| `--title-color` | `#1d1d1f` | Title color |
| `--border-color` | `#d2d2d7` | Border color |
| `--desc-font-size` | `0.8rem` | Description font size |

## License

MIT
npm package: @manufosela/lcd-digit
Description: LCD-style digit display web component with Lit
Author: manufosela
Latest version: 2.0.1

# @manufosela/lcd-digit

A 7-segment LCD digit display web component. Built with [Lit](https://lit.dev/).

## Installation

```bash
npm install @manufosela/lcd-digit
```

## Usage

```javascript
import '@manufosela/lcd-digit';
```

```html
<lcd-digit digit="5"></lcd-digit>
```

## Features

- 7-segment LED/LCD display style
- Supports digits 0-9, minus sign, and blank
- Optional colon for clock displays
- Glow effect on active segments
- Increment/decrement methods
- Fully customizable via CSS properties

## Attributes

| Attribute  | Type    | Default | Description                    |
| ---------- | ------- | ------- | ------------------------------ |
| `digit`    | String  | `0`     | Digit to display (0-9, -, space) |
| `colon`    | Boolean | `false` | Show colon after digit         |
| `colon-on` | Boolean | `false` | Whether colon is lit           |

## Methods

| Method        | Description                    |
| ------------- | ------------------------------ |
| `setDigit(d)` | Set the digit (0-9, -, space)  |
| `increment()` | Increase digit (wraps 9→0)     |
| `decrement()` | Decrease digit (wraps 0→9)     |

## Events

| Event          | Detail             | Description            |
| -------------- | ------------------ | ---------------------- |
| `digit-changed`| `{ digit: string }`| Fired when digit changes |

```javascript
lcdDigit.addEventListener('digit-changed', (e) => {
  console.log('New digit:', e.detail.digit);
});
```

## CSS Custom Properties

| Property                  | Default              | Description              |
| ------------------------- | -------------------- | ------------------------ |
| `--lcd-segment-length`    | `30px`               | Segment length           |
| `--lcd-segment-width`     | `6px`                | Segment width            |
| `--lcd-digit-on-color`    | `#22c55e`            | Active segment color     |
| `--lcd-digit-off-color`   | `rgba(0,0,0,0.1)`    | Inactive segment color   |
| `--lcd-digit-glow-color`  | `rgba(34,197,94,0.5)`| Glow effect color        |

## Examples

### Simple Counter
```html
<lcd-digit id="counter" digit="0"></lcd-digit>
<button onclick="document.getElementById('counter').increment()">+</button>
```

### Clock Display
```html
<lcd-digit digit="1"></lcd-digit>
<lcd-digit digit="2" colon colon-on></lcd-digit>
<lcd-digit digit="3"></lcd-digit>
<lcd-digit digit="4"></lcd-digit>
```

### Custom Color
```html
<lcd-digit
  digit="8"
  style="--lcd-digit-on-color: #3b82f6; --lcd-digit-glow-color: rgba(59, 130, 246, 0.5);">
</lcd-digit>
```

### Negative Number
```html
<lcd-digit digit="-"></lcd-digit>
<lcd-digit digit="5"></lcd-digit>
```

## License

MIT
npm package: @manufosela/loading-layer
Description: A customizable loading overlay web component with animated spinner, built with Lit
Author: manufosela
Latest version: 2.0.1

# @manufosela/loading-layer

A customizable loading overlay web component with animated spinner. Built with [Lit](https://lit.dev/).

## Installation

```bash
npm install @manufosela/loading-layer
```

## Usage

```javascript
import '@manufosela/loading-layer';
```

```html
<loading-layer id="loader"></loading-layer>

<script>
  document.getElementById('loader').show();
  // Later...
  document.getElementById('loader').hide();
</script>
```

## Features

- Animated SVG spinner
- Customizable colors and sizes
- Optional message display
- Auto-hide timeout
- Global event support
- Smooth fade transitions

## Attributes

| Attribute      | Type    | Default   | Description                        |
| -------------- | ------- | --------- | ---------------------------------- |
| `visible`      | Boolean | `false`   | Whether the loader is visible      |
| `message`      | String  | `''`      | Message displayed below spinner    |
| `size`         | Number  | `60`      | Spinner size in pixels             |
| `color`        | String  | `#3b82f6` | Spinner color                      |
| `stroke-width` | Number  | `4`       | Spinner stroke width               |
| `timeout`      | Number  | `0`       | Auto-hide timeout in seconds       |

## Methods

| Method     | Description              |
| ---------- | ------------------------ |
| `show()`   | Show the loading layer   |
| `hide()`   | Hide the loading layer   |
| `toggle()` | Toggle visibility        |

## Events

| Event                  | Description           |
| ---------------------- | --------------------- |
| `loading-layer-shown`  | Fired when shown      |
| `loading-layer-hidden` | Fired when hidden     |

## Global Events (Input)

You can show/hide the loading layer using custom events:

```javascript
// Show with message
document.dispatchEvent(new CustomEvent('loading-layer-show', {
  detail: { message: 'Loading...' }
}));

// Hide
document.dispatchEvent(new CustomEvent('loading-layer-hide'));
```

## CSS Custom Properties

| Property                         | Default              | Description          |
| -------------------------------- | -------------------- | -------------------- |
| `--loading-layer-bg`             | `rgba(0,0,0,0.5)`   | Overlay background   |
| `--loading-layer-z-index`        | `9999`              | Z-index              |
| `--loading-layer-transition`     | `0.3s`              | Fade duration        |
| `--loading-layer-spin-duration`  | `1s`                | Spin animation       |
| `--loading-layer-text-color`     | `#fff`              | Message color        |

## License

MIT
npm package: @manufosela/mcpack
Description: Generic MCP response compression proxy. Like RTK but for MCP protocol.
Author: manufosela
Latest version: 1.0.0

# MCPack

**MCP Response Compression Proxy** — Like [RTK](https://github.com/rtk-ai/rtk) but for MCP servers.

Reduces LLM token consumption **60-90%** by compressing MCP tool responses before they reach your AI agent.

## How it works

MCPack sits between your LLM client (Claude Code, Cursor, etc.) and any MCP server as a transparent proxy:

```
LLM Client  ←→  MCPack Proxy  ←→  MCP Server
                    ↓
            Strips verbose fields
            Truncates long arrays
            Compacts JSON output
```

## Install

```bash
npm install -g mcpack
```

## Quick Start

Wrap any MCP server with MCPack:

```bash
# Before (raw MCP responses, high token usage):
planning-game-mcp

# After (compressed responses, 60-90% fewer tokens):
mcpack -- planning-game-mcp
```

## Claude Code Integration

In `~/.claude.json`:

```json
{
  "mcpServers": {
    "planning-game": {
      "command": "mcpack",
      "args": ["--preset", "planning", "--", "planning-game-mcp"],
      "env": {
        "GOOGLE_APPLICATION_CREDENTIALS": "/path/to/key.json"
      }
    }
  }
}
```

## Presets

| Preset | Use case | Compression |
|--------|----------|-------------|
| `minimal` | Any MCP — compact JSON only | ~30-40% |
| `planning` | Project management (tasks, sprints, cards) | ~70-85% |
| `code` | Code tools (diffs, patches, reviews) | ~60-75% |
| `data` | Database/data queries | ~50-65% |
| `aggressive` | Maximum savings for long sessions | ~80-90% |

```bash
mcpack --preset planning -- my-mcp-server
mcpack --preset aggressive -- my-mcp-server
```

## Custom Config

Create `mcpack.json`:

```json
{
  "stripFromListItems": ["description", "body", "content"],
  "stripAlways": ["changelog", "history"],
  "maxArrayItems": 15,
  "maxStringLength": 200,
  "neverTruncateFields": ["id", "url", "email"],
  "compactJson": true,
  "transformers": {}
}
```

```bash
mcpack --config ./mcpack.json -- my-mcp-server
```

## What it compresses

| Strategy | Example | Savings |
|----------|---------|---------|
| **Field stripping** | Remove `description`, `acceptanceCriteria` from list items | 50-70% per item |
| **Array truncation** | 100 items → first 20 + count | 80% |
| **Compact JSON** | No indentation (`{a:1}` vs `{\n  a: 1\n}`) | 30-40% |
| **String truncation** | 2000-char description → 300 chars | 85% |

## Token Savings Example

A typical 30-minute Claude Code session managing 50 tasks:

| Operation | Without MCPack | With MCPack | Savings |
|-----------|----------------|-------------|---------|
| `list_cards` (50 tasks) | ~25,000 tokens | ~4,000 tokens | 84% |
| `update_card` × 30 | ~60,000 tokens | ~9,000 tokens | 85% |
| `get_card` × 10 | ~30,000 tokens | ~12,000 tokens | 60% |
| **Session total** | ~115,000 tokens | ~25,000 tokens | **78%** |

## Development

```bash
git clone https://github.com/manufosela/mcpack
cd mcpack
npm install
npm test
```

## License

MIT
npm package: @manufosela/md-renderer
Description: Lit web component to render Markdown text as HTML
Author: Mánu Fosela
Latest version: 1.0.0

# @manufosela/md-renderer

A Lit web component to render Markdown text as HTML.

## Installation

```bash
npm install @manufosela/md-renderer
```

## Usage

### Import

```javascript
import '@manufosela/md-renderer';
```

### Using slot (recommended)

```html
<md-renderer>
  # Hello World

  This is **bold** and this is *italic*.

  - Item 1
  - Item 2
</md-renderer>
```

### Using content attribute

```html
<md-renderer content="# Hello World"></md-renderer>
```

### With JavaScript

```javascript
const renderer = document.querySelector('md-renderer');
renderer.content = `
# Dynamic Content

This was set via JavaScript.
`;
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `content` | String | `''` | Markdown content (alternative to slot) |
| `gfm` | Boolean | `true` | Enable GitHub Flavored Markdown |
| `breaks` | Boolean | `false` | Convert line breaks to `<br>` |
| `sanitize` | Boolean | `false` | Basic HTML sanitization |

## CSS Custom Properties

| Property | Default | Description |
|----------|---------|-------------|
| `--md-renderer-font-family` | `system-ui, sans-serif` | Font family |
| `--md-renderer-font-size` | `1rem` | Base font size |
| `--md-renderer-line-height` | `1.6` | Line height |
| `--md-renderer-color` | `inherit` | Text color |
| `--md-renderer-link-color` | `#0066cc` | Link color |
| `--md-renderer-code-bg` | `#f5f5f5` | Code background |
| `--md-renderer-code-font-family` | `monospace` | Code font |
| `--md-renderer-blockquote-border-color` | `#ddd` | Blockquote border |
| `--md-renderer-hr-color` | `#ddd` | Horizontal rule color |

## CSS Parts

| Part | Description |
|------|-------------|
| `container` | The wrapper div around rendered content |

## Examples

### Custom styling

```html
<style>
  md-renderer {
    --md-renderer-font-family: 'Georgia', serif;
    --md-renderer-link-color: #ff6600;
    --md-renderer-code-bg: #282c34;
  }
</style>

<md-renderer>
  # Styled Markdown

  Check out [this link](#) and some `inline code`.
</md-renderer>
```

### GFM Tables

```html
<md-renderer gfm>
  | Name | Age |
  |------|-----|
  | John | 30  |
  | Jane | 25  |
</md-renderer>
```

### Task Lists

```html
<md-renderer gfm>
  - [x] Completed task
  - [ ] Pending task
</md-renderer>
```

## Development

```bash
# Install dependencies
npm install

# Start dev server
npm run dev

# Run tests
npm test

# Lint
npm run lint
```

## License

MIT
npm package: @manufosela/mixin-getlightdom
Description: Mixin to get the lightdom of a component and insert properties into it to be rendered.
Author: manufosela
Latest version: 1.1.4

# MIXIN Get Lightdom

Mixin to get the lightdom of a component and insert properties into it to be rendered.

# WHY

If we render in the shadow dom of a component, the content of this is inaccessible for the content indexing robots, since the content of the page is hidden in the shadow dom.
It also facilitates semantics, because in lightdom we can render a list of elements, with their role and aria tags, but then in shadow dom they can be any other html tag that we consider appropriate for the visualization that we want.

This mixin allows to obtain the elements of the lightdom of a component and insert them as properties in it. so that later we can render the way we want.

# USAGE

```javascript
import { LitElement, html, css } from "lit";
import { MixinGetLightDom } from "@manufosela/MixinGetlightdom";

export class KwHeader extends MixinGetLightDom(LitElement) {
  // ...
}
```

It uses the tags 'A', 'IMG', 'LI', 'VIDEO' by default to extract the lightdom. Other tags will be ignored.
If you want to use other tags, you can pass them as a parameter.

```javascript
export class KwHeader extends MixinGetlightdom(LitElement, ["A", "P"]) {
  // ...
}
```

## EXAMPLE

```html
<my-fakecomponent title="${title}">
  <!-- the parentNode id, "miLista", is the reference to recover and draw in shadow dom -->
  <ul id="miLista">
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
    <li>cuatro</li>
  </ul>
</my-fakecomponent>
```

Into my web-component in connectedCallback, I get the lightdom of the component and insert it as a property.

```javascript

  connectedCallback() {
    super.connectedCallback();

    /** this._HTMLChildren();
     *  returns an object with all lightdom childrens that matches the HTML tags in the list HTMLAttributesToExtract
     */
    const childNodes = this._HTMLChildren();

    this.list = childNodes.miLista; // Reference to the UL id "miLista" to get all LI childrens
```