open-index/open-npm huggingface dataset:
npm package: @lucamonfredo/johnnymnemonic
Description: Ultra easy and lightweight autocomplete input for React
Author: Luca Monfredo
Latest version: 0.3.3

# \<JohnnyMnemonic />
Ultra easy and lightweight autocomplete input for React.

# Installation
```
npm i @lucamonfredo/johnnymnemonic
```

# Usage
```
<JohnnyMnemonic
  onChange={...} // onChange callback, required
  suggestionFunction={...} // a Promise that returns a string[], required
  suggestionFuncTimeout={...} // number of msec to debounce suggestionFunc, optional
  ... // all other input props, optional
/>
```
npm package: @lucapimenta/copy-chief-dashboard
Description: Copy Chief BLACK — Dashboard (Next.js)
Author: Luca Pimenta
Latest version: 1.0.3

<p align="center">
  <h1 align="center">Copy Chief Dashboard</h1>
  <p align="center">
    <strong>Dashboard visual em tempo real para o Copy Chief BLACK</strong>
  </p>
  <p align="center">
    <img src="https://img.shields.io/badge/Next.js-15-black" alt="Next.js">
    <img src="https://img.shields.io/badge/React-19-blue" alt="React">
    <img src="https://img.shields.io/badge/license-MIT-green" alt="License">
  </p>
</p>

---

## O que e

Dashboard Next.js que observa e visualiza o pipeline do Copy Chief BLACK em tempo real. **Nunca controla, apenas observa.** O framework funciona 100% sem o dashboard.

### Instalacao

```bash
npx @lucapimenta/copy-chief-dashboard install
```

## Funcionalidades

- **Pipeline View** — Visualiza o estado do pipeline (Research → Briefing → Production → Delivery)
- **Kanban Board** — Drag-and-drop de tarefas por fase
- **HELIX Viewer** — Visualiza as 10 fases do briefing HELIX
- **War Room** — Monitoramento em tempo real de agents ativos
- **Agent Activity** — Timeline de atividade dos 12 agentes
- **Quality Gates** — Status dos gates MCP
- **Offer Overview** — Dashboard por oferta
- **Squad Panel** — Visao geral da Copy Squad

## Paginas

| Pagina | Rota | Descricao |
|--------|------|-----------|
| Dashboard | `/` | Overview geral |
| Pipeline | `/pipeline` | Pipeline por oferta |
| Kanban | `/kanban` | Board de tarefas |
| HELIX | `/helix` | Briefing viewer |
| War Room | `/warroom` | Agents em tempo real |
| Agents | `/agents` | Lista de agentes |
| Gates | `/gates` | Quality gates |
| Offers | `/offers` | Lista de ofertas |
| Settings | `/settings` | Configuracoes |
| Logs | `/logs` | Session logs |
| Timeline | `/timeline` | Activity timeline |

## Arquitetura

```
~/.claude/dashboard-v2/
  src/
    app/                    11 paginas (Next.js App Router)
    components/             40+ componentes React
    stores/                 10 Zustand stores
    lib/                    Utilitarios
  public/
  next.config.js
  tailwind.config.js
  package.json
```

## Stack

- **Framework:** Next.js 15 (App Router)
- **UI:** React 19 + Tailwind CSS 4
- **State:** Zustand
- **Charts:** Recharts
- **Icons:** Lucide React

## Instalacao Manual

```bash
# 1. Clone
git clone https://github.com/lckx777/copy-chief-dashboard.git
cd copy-chief-dashboard

# 2. Instale deps do dashboard
cd dashboard && npm install

# 3. Rode em dev
npm run dev
# -> http://localhost:3000

# 4. Ou build + start
npm run build && npm start
```

## Requisitos

- Copy Chief BLACK instalado (`npx @lucapimenta/copy-chief-black install`)
- Node.js >= 18

## Pacotes Relacionados

| Pacote | Descricao |
|--------|-----------|
| [`@lucapimenta/copy-chief-black`](https://github.com/lckx777/copy-chief-black) | Core framework (obrigatorio) |
| [`@lucapimenta/copywriting-mcp`](https://github.com/lckx777/copywriting-mcp) | MCP server (quality gates) |

## Licenca

MIT — [LICENSE](./LICENSE)
npm package: @lucarestagno/use-deep-effect
Description: React Hook useDeepEffect
Author: Luca Restagno
Latest version: 1.0.7

# use-deep-effect 🕵️‍♂️

React `useEffect` is built to work with primitive values in the dependencies array.

It could happen that in your reach application you need to run side effects based on complex objects (`Object`s, `Array`s, `Set`s, `Map`s).

In all these cases, you can use `useDeepEffect`.

## Installation 

```shell
npm i @lucarestagno/use-deep-effect
```

## Usage

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import useDeepEffect from 'use-deep-effect'

const MyComponent = ({ arrayOfObjects }) => {
  useDeepEffect(() => {
    /* side effect */
  }, 
  [arrayOfObjects])

  return </>
}
```

## Custom comparison function

By default, `useDeepEffect` uses [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) as comparison function, but you can use your custom function by passing it as third argument.

```jsx
useDeepEffect(fn, dependencies, comparisonFunction)
```

## Why `useEffect` only works with primitive values?

`useEffect` uses [`Object.is`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Object/is) to compare the dependencies.

This makes it perfectly working with primitive values (number, string, boolean), bot not with complex types (array, object, set, map).

For instance, this equality check returns false even if the two objects own the same keys and values:

```js
Object.is({ foo: 'foo' }, { foo: 'foo' });
false
```

Or they are the same array

```js
Object.is([1, 2, 3], [1, 2, 3]);
false
```

You can use `useDeepEffect`, but remember that it comes with a performance cost (often negligible).
npm package: @lucarestagno/use-scroll-into-view
Description: React Hook to scroll an element into the view
Author: Luca Restagno
Latest version: 1.0.1

# use-scroll-into-view 📌

`useScrollIntoView` is a React Hook that uses `scrollIntoView` to scroll a DOM Node into the view, when an extenal condition occcurs.

## Installation 

```shell
npm i @lucarestagno/use-scroll-into-view
```

## Usage

```jsx
import React, { useRef } from 'react'
import useScrollIntoView from 'use-scroll-into-view'

const ListItem = ({ isSelected, itemName }) => {
  const itemRef = useRef(null)
  useScrollIntoView(itemRef, isSelected)

  return (
    <li ref={itemRef}>
      {itemName}
    </li>)
}
```

The list item is moved into the view by automatically scrolling the container (the body or another html tag).

This is particularly useful when you have a set of elements in the page that can be outside the view, and you want to automatically move into the visible are.

The scroll works vertically and horizontally.

## Typescript

The package exports the following types

```typescript
type ScrollIntoViewOptions = {
  behavior?: keyof typeof ScrollIntoViewBehavior
  block?: keyof typeof ScrollIntoViewBlock
  inline?: keyof typeof ScrollIntoViewInline
}

enum ScrollIntoViewBehavior {
  auto = "auto",
  smooth = "smooth"
}

enum ScrollIntoViewBlock {
  start = "start",
  center = "center",
  end = "end",
  nearest = "nearest"
}

enum ScrollIntoViewInline {
  start = "start",
  center = "center",
  end = "end",
  nearest = "nearest"
}
```

## Customize the scroll

`scrollIntoView` has an option object, that can be used to define the desired scroll behavior.

You can find the full documentation on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)