open-index/open-npm huggingface dataset:
npm package: @pulse-js/tools
Description: The official visual debugging suite for the Pulse ecosystem. Inspect, monitor, and debug your reactive graph in real-time with a premium, developer-focused UI.
Latest version: 0.3.1

# @pulse-js/tools

The official visual debugging suite for the Pulse ecosystem. Inspect, monitor, and debug your reactive graph in real-time with a premium, developer-focused UI.

<div align="center">
  <img width="383" height="575" alt="image" src="https://github.com/user-attachments/assets/9b557924-3a2d-4558-843f-f8f2793cc2f1" />
</div>

## Features

- **Tabbed Interface**: Switch between the standard "Inspector" list and the new "Pulse Tree" dependency graph.
- **Pulse Tree Visualization**: See your component hierarchy and dependency flow in a collapsible tree view.
- **Editable Sources**: Click on any Source value to edit it on the fly. Auto-parses JSON and primitives.
- **Explain API Integration**: Full support for the `guard.explain()` method, showing semantic failure reasons and dependencies.
- **Draggable & Resizable**: A floating widget that lives anywhere on your screen with intelligent positioning.
- **Framework-Agnostic**: Built as a standard Web Component, usable in any environment.

## Installation

```bash
npm install @pulse-js/tools
```

## Usage

### React Integration (Recommended)

The easiest way to use Pulse Tools in React is via the `@pulse-js/react` package, which handles auto-injection.

```tsx
// main.tsx
import "@pulse-js/react/devtools";
```

### Vanilla / Other Frameworks

You can use the `<pulse-inspector>` Web Component directly.

```html
<script type="module" src="node_modules/@pulse-js/tools/dist/index.js"></script>

<pulse-inspector shortcut="Ctrl+D"></pulse-inspector>
```

Or in JavaScript:

```javascript
import "@pulse-js/tools";

const inspector = document.createElement("pulse-inspector");
document.body.appendChild(inspector);
```

### Configuration Props

| Prop       | Type     | Default    | Description                                              |
| ---------- | -------- | ---------- | -------------------------------------------------------- |
| `shortcut` | `string` | `'Ctrl+D'` | Keyboard shortcut to toggle the visibility of the panel. |

## Tips

- **Naming Matters**: Ensure you provide string names to your Sources and Guards (e.g., `source(val, { name: 'my-source' })`). The DevTools rely on these names to provide meaningful debugging information. Unnamed units will not appear.
- **Status Indicators**:
  - 🟢 **Green**: OK / Active
  - 🔴 **Red**: Fails
  - 🟡 **Yellow**: Pending (Async operations in flight)

## Architecture

The DevTools communicate with the core library via the global `PulseRegistry`. This means it works seamlessly even if your application code is split across multiple modules or bundles, as long as they share the same Pulse instance.
npm package: @pulse-js/vue
Description: The standard Vue 3 integration for Pulse.
Latest version: 0.3.1

# @pulse-js/vue

The standard Vue 3 integration for Pulse.

[![npm version](https://img.shields.io/npm/v/@pulse-js/vue.svg)](https://www.npmjs.com/package/@pulse-js/vue)

## Features

- **Composable API**: `usePulse` returns standard Vue `Ref` or `ComputedRef` objects.
- **Reactive Unwrapping**: Use `.value` or unwrapping in templates just like native Vue signals.
- **Type Safety**: Full TypeScript support.

## Installation

```bash
npm install @pulse-js/core @pulse-js/vue
```

## Usage

### Using Sources

Map Pulse sources to Vue definitions.

```vue
<script setup lang="ts">
import { source } from "@pulse-js/core";
import { usePulse } from "@pulse-js/vue";

const count = source(0);
// Returns a Ref<number>
const countRef = usePulse(count);

function increment() {
  count.set(count.value + 1);
}
</script>

<template>
  <button @click="increment">Count is {{ countRef }}</button>
</template>
```

### Using Guards

Guards are mapped to DeepReadonly Refs containing the full state.

```vue
<script setup lang="ts">
import { guard } from "@pulse-js/core";
import { usePulse } from "@pulse-js/vue";

const isAdult = guard(() => age.value >= 18);
const state = usePulse(isAdult);
// state is Ref<GuardState<boolean>>
</script>

<template>
  <div v-if="state.status === 'ok'">Allowed: {{ state.value }}</div>
  <div v-else-if="state.status === 'fail'">Blocked: {{ state.reason }}</div>
</template>
```
npm package: @pulse-protocol/consent
Description: Consent record persistence interface and helpers for the Pulse Protocol.
Latest version: 0.1.0

# @pulse-protocol/consent

Consent record persistence interface and helpers for the Pulse Protocol.

## Installation

```sh
pnpm add @pulse-protocol/consent @pulse-protocol/types
```

## API

### `ConsentStore`

Interface for a consent/revoke record persistence backend. Implement this to plug in any storage layer (IPFS, Solid Pod, database, etc.).

```ts
import type { ConsentStore } from '@pulse-protocol/consent'

interface ConsentStore {
  putConsent(cid: string, data: Uint8Array): Promise<void>
  getConsent(cid: string): Promise<Uint8Array | null>
  putRevoke(cid: string, data: Uint8Array): Promise<void>
  getRevoke(cid: string): Promise<Uint8Array | null>
}
```

### Example — in-memory implementation

```ts
import type { ConsentStore } from '@pulse-protocol/consent'

class MemoryStore implements ConsentStore {
  private consents = new Map<string, Uint8Array>()
  private revokes  = new Map<string, Uint8Array>()

  async putConsent(cid: string, data: Uint8Array) { this.consents.set(cid, data) }
  async getConsent(cid: string) { return this.consents.get(cid) ?? null }
  async putRevoke(cid: string, data: Uint8Array)  { this.revokes.set(cid, data) }
  async getRevoke(cid: string) { return this.revokes.get(cid) ?? null }
}
```