open-index/open-npm huggingface dataset:
npm package: @state-tracer/jotai
Description: Visualize and trace state dependencies in jotai with an interactive data flow graph.
Author: apple-yagi
Latest version: 1.1.2

# @state-tracer/jotai

Visualize and trace state dependencies in jotai with an interactive data flow graph.

<p align="center">
  <img alt="Cover image" src="./src/__tests__/jotai-graph.svg" />
</p>

## ✨ Features

- ⚛️ Detects `atom`
- 🔗 Resolves jotai dependency graph across multiple files
- 🖼️ Generates a data flow graph as an SVG via the CLI.
- 🎯 Fast and lightweight thanks to [@hpcc-js/wasm](https://www.npmjs.com/package/@hpcc-js/wasm)
- 🧠 Ideal for debugging or understanding large jotai-based state trees

## 📥 Installation

```console
pnpm add -D @state-tracer/jotai
```

## 🛠 Usage

### 1. Generate a data flow graph as an SVG

```console
pnpm stj ./src
```

### 2. Open the SVG

```console
open jotai-graph.svg
```

## ⚙️ Options

| Option | Alias | Description | Default |
| -------- | ------------- | ------------- | --- |
| --output | -o | Specify the output path for the generated SVG | jotai-graph.svg |
npm package: @state-tracer/recoil
Description: Visualize and trace state dependencies in Recoil with an interactive data flow graph.
Author: apple-yagi
Latest version: 1.0.4

# @state-tracer/recoil

Visualize and trace state dependencies in Recoil with an interactive data flow graph.

<p align="center">
  <img alt="Cover image" src="./src/__tests__/recoil-graph.svg" />
</p>

## ✨ Features

- ⚛️ Detects `atom`, `selector`, `atomFamily`, and `selectorFamily`
- 🔗 Resolves Recoil dependency graph across multiple files
- 🖼️ Generates a data flow graph as an SVG via the CLI.
- 🎯 Fast and lightweight thanks to [@hpcc-js/wasm](https://www.npmjs.com/package/@hpcc-js/wasm)
- 🧠 Ideal for debugging or understanding large Recoil-based state trees

## 📥 Installation

```console
pnpm add -D @state-tracer/recoil
```

## 🛠 Usage

### 1. Generate a data flow graph as an SVG

```console
pnpm str ./src
```

### 2. Open the SVG

```console
open recoil-graph.svg
```

## ⚙️ Options

| Option | Alias | Description | Default |
| -------- | ------------- | ------------- | --- |
| --output | -o | Specify the output path for the generated SVG | recoil-graph.svg |
npm package: @state-ui/core
Description: Simple lightweight DOM tools
Author: Stian Myklebostad
Latest version: 1.1.4

# State-UI Core

A simple lightweight set of tools to work with DOM elements,
create styles, and states to make it all dynamic.

## Current state

This package and its companion `@state-ui/extra` are still in active development
and you should expect breaking changes to the API.

## **Security**

These tools where made to be simple, as such there is no inbuilt
sanitation. Anything given to the `html` template tag **will** be
interpreted as html **as is**, including script tags and their content.

## Motivation

When you're working on a small, maybe even medium project,
it may be overkill to pull in something like React or Vue.
Why add 2.99MB to a simple project that only utilizes 5%
of Reacts features.

Of course there are others who made stuff like this before,
for example [Grecha.js](https://github.com/tsoding/grecha.js).
But I'd prefer to sacrifice just a little bit of that performance
for convenience.

## Documentation

> Coming soon

## Plugins/Addons

At this time there is only one,
[`@state-ui/extra`](https://www.npmjs.com/package/@state-ui/extra).  
But if that starts to get big, it'll be split into smaller packages.
npm package: @state-ui/extra
Description: Extra utilities for @state-ui/core
Author: Stian Myklebostad
Latest version: 1.2.4

# State-UI Extras

This is a set of useful extras for
[`@state-ui/core`](https://www.npmjs.com/package/@state-ui/core).  
This is 100% optional and only build on what you get with `@state-ui/core`.

## Current state

This package and its parent `@state-ui/core` are still in active development
and you should expect breaking changes to the API.

## Documentation

> Coming soon
npm package: @statebacked/machine
Description: Useful types and utilities for defining StateBacked.dev machine definitions for the State Backed XState backend as a service
Author: Adam Berger
Latest version: 0.6.4

# @statebacked/machine - State Backed machine definition types and runtime utilities
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/statebacked/machine/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@statebacked/machine.svg?style=flat)](https://www.npmjs.com/package/@statebacked/machine) [![CI](https://github.com/statebacked/machine/actions/workflows/ci.yaml/badge.svg)](https://github.com/statebacked/machine/actions/workflows/ci.yaml) [![Docs](https://img.shields.io/badge/docs-machine-blue)](https://statebacked.github.io/machine/)

The types and utilities exported by this package are useful in defining [State Backed](https://statebacked.dev) machine definitions.

# Installation

NPM
```
npm install --save @statebacked/machine
```

Yarn
```
yarn add @statebacked/machine
```

Deno
```
import type { AllowRead, AllowWrite } from "https://deno.land/x/statebacked_machine/mod.ts";
```

# Overview

A State Backed machine definition consists of a javascript file that exports the following:
- Default export an [XState](https://xstate.js.org/docs/) state machine (e.g. `export default createMachine(...)`)
- Export an `allowRead` function that accepts an object containing `{ machineInstanceName, state, context, authContext }` and returns a boolean indicating whether an entity with the provided `authContext` should be allowed to read an instance of the machine having the provided name, state, and context.
- Export an `allowWrite` function that accepts an object containing `{ machineInstanceName, state, context, event, authContext }` and returns a boolean indicating whether an entity with the provided `authContext` should be allowed to write `event` to an instance of the machine having the provided name, state, and context.

This module provides types and utilities for these functions.

# State Backed

[State Backed](https://statebacked.dev) allows you to spin up a backend by writing only an XState state machine.

Check out our [docs](https://docs.statebacked.dev) and get started with the [smply CLI](https://github.com/statebacked/smply). You can have a state machine backend running in 5 minutes.

# License

@statebacked/machine is [MIT licensed](https://github.com/statebacked/machine/blob/main/LICENSE).
npm package: @statebacked/machine-def
Description: Useful types and utilities for defining StateBacked.dev machine definitions for the State Backed XState backend as a service
Author: Adam Berger
Latest version: 0.4.1

# @statebacked/machine-def - State Backed machine definition types and utilities
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/statebacked/machine-def/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@statebacked/machine-def.svg?style=flat)](https://www.npmjs.com/package/@statebacked/machine-def) [![CI](https://github.com/statebacked/machine-def/actions/workflows/ci.yaml/badge.svg)](https://github.com/statebacked/machine-def/actions/workflows/ci.yaml) [![Docs](https://img.shields.io/badge/docs-machine_def-blue)](https://statebacked.github.io/machine-def/)

The types and utilities exported by this package are useful in defining [State Backed](https://statebacked.dev) machine definitions.

# Installation

NPM
```
npm install --save @statebacked/machine-def
```

Yarn
```
yarn add @statebacked/machine-def
```

Deno
```
import type { AllowRead, AllowWrite } from "https://deno.land/x/statebacked_machine_def/mod.ts";
```

# Overview

A State Backed machine definition consists of a javascript file that exports the following:
- Default export an [XState](https://xstate.js.org/docs/) state machine (e.g. `export default createMachine(...)`)
- Export an `allowRead` function that accepts an object containing `{ machineInstanceName, state, context, authContext }` and returns a boolean indicating whether an entity with the provided `authContext` should be allowed to read an instance of the machine having the provided name, state, and context.
- Export an `allowWrite` function that accepts an object containing `{ machineInstanceName, state, context, event, authContext }` and returns a boolean indicating whether an entity with the provided `authContext` should be allowed to write `event` to an instance of the machine having the provided name, state, and context.

This module provides types and utilities for these functions.

# State Backed

[State Backed](https://statebacked.dev) allows you to spin up a backend by writing only an XState state machine.

Check out our [docs](https://docs.statebacked.dev) and get started with the [smply CLI](https://github.com/statebacked/smply). You can have a state machine backend running in 5 minutes.

# License

@statebacked/machine-def is [MIT licensed](https://github.com/statebacked/machine-def/blob/main/LICENSE).
npm package: @statebacked/react
Description: React hooks for interacting with the StateBacked.dev backend as a service
Author: Adam Berger
Latest version: 0.1.3

# React hooks to interact with StateBacked.dev machine instances

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/statebacked/react/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@statebacked/client.svg?style=flat)](https://www.npmjs.com/package/@statebacked/client) [![CI](https://github.com/statebacked/react/actions/workflows/ci.yaml/badge.svg)](https://github.com/statebacked/react/actions/workflows/ci.yaml) [![Docs](https://img.shields.io/badge/docs-statebacked-blue)](https://docs.statebacked.dev/)

[StateBacked.dev](https://statebacked.dev) runs state machines as your secure, scalable, serverless backend.

Check out the full State Backed [docs](https://docs.statebacked.dev) for more detailed information and to
launch your own state machine backend in just a few minutes.

You can use these React hooks to easily connect your UI to any of your real-time,
persistent machine intances running in the State Backed cloud.

# Installation

```bash
npm install --save @statebacked/react @statebacked/client
```

# Example

```js
import { StateBackedClient } from "@statebacked/client";
import { useStateBackedMachine } from "@statebacked/react";
import { useActor } from "@xstate/react";

const client = new StateBackedClient({
  anonymous: {
    orgId: "org-YOUR_ORG_ID",
  }
});

function MyReactComponent() {
  const { actor } = useStateBackedMachine(
    client,
    {
      // name of a machine you created via the smply CLI or StateBacked.dev
      machineName: "your-machine-name",
      // name of a machine instance to connect to or create
      // you can create as many instances of each machine as you'd like
      instanceName: "your-instance",
      // function to provide the initial context if we have to create the machine instance
      getInitialContext() {
        return {
          any: "initialContextForYourMachine"
        }
      }
    }
  );

  const [state, send] = useActor(actor);

  // now you can interact with your persistent, real-time, multi-player
  // State Backed machine instance just like it was a local state machine

  // send({ type: "any-event", extra: "data" })

  // render your UI based on the current machine state
}

```
npm package: @statechange/mentor
Description: CLI for State Change Mentor — search knowledge, chat, and explore mental models from your terminal
Author: State Change
Latest version: 0.1.0

# @statechange/mentor

State Change's 25 years of building experience, right in your terminal. Search the knowledge base, explore mental models, and browse resources — without leaving your flow.

## Install

```bash
npm install -g @statechange/mentor
```

Or run directly without installing:

```bash
npx @statechange/mentor search "how to price my SaaS"
```

## Getting Started

### Log in

```bash
mentor login
```

This opens your browser to authenticate via State Change. Once you approve, you're all set.

If you prefer, you can paste an API key manually:

```bash
mentor login --token <your-api-key>
```

Your credentials are stored in `~/.statechange/auth.json` (shared with other State Change CLI tools).

### Log out

```bash
mentor logout
```

## Usage

### Search the knowledge base

```bash
mentor search "when should I raise prices"
mentor search "build vs buy"
```

Returns relevant resources and mental models. Add `--json` for machine-readable output.

### Look up mental models

List all available models:

```bash
mentor model
```

View a specific model by ID or number:

```bash
mentor model mm-70
mentor model 70
```

### Browse resources

List resources:

```bash
mentor resources
```

View a specific resource:

```bash
mentor resource essay-132
```

### JSON output

All commands support `--json` for piping to other tools:

```bash
mentor search "pricing" --json | jq '.resources[0]'
mentor model 70 --json
mentor resources --json
```

## Environment Variables

| Variable | Description |
|---|---|
| `STATECHANGE_API_KEY` | API key (overrides stored auth) |
| `NO_COLOR` | Disable colored output |
npm package: @statechange/scripttag
Description: Easily connect weweb to scripttag
Author: Ray Deck
Latest version: 1.0.5

# Weweb ScriptTag Embedder

## Adding To Weweb

1. Open Weweb
2. Click on the puzzle piece icon
3. Click "Plugins"
4. Click "NPM"
5. Search for `scripttag`
6. Click Plus - you're done! 
   
## Adding any Embed to your site
1. Create any element
2. Give it a class of "scripttag"
3. Go to custom attributes and give it a "scripttag-src" of your target URL
4. Watch it appear on your page!

## Useful Scripts

1. `yarn build` will build using typescript pre-configured to node-compatible defaults
2. `yarn docs` will auto-generate a README.md that starts with TOP.md, then adds CLI documentation (via [commanderdoc](https://npmjs.com/package/commanderdoc)) for any tool you have set up, and then library documentation after that.
3. `yarn test` is pre-configured to test for typescript errors
4. `yarn watch` will watch the codebase for changes and rebuild (using [livelink](https://npmjs.com/package/@raydeck/livelink))

## Git code protections

1. `git commit` will be blocked on the `main` branch unless you set the environment variable `ALLOWMAIN=1` Branch commits and PRs are thus encouraged
2. `git commit` also tests messages for meeting the commitline standard conventions.
3. `git commit` blocks pushes that do not pass `yarn test` (as a base case, they must pass typescript compilation)
4. `npm publish` will always rebuild the code, the documentation, and push those changes back to the repository.
5. `npm publish` will only publish the lib and src directories - any others are no

## A note on "main"

I made a deliberate choice to change the primary branch from `master` to `main` for reasons that are obvious to some. This repository endeavors to make that just automatic.

PRs and feedback welcome via GitHub issues.


<a name="__climd"></a>

# Usage
```bash
npx template [options]
```

<a name="_librarymd"></a>

template - v1.0.0

# template - v1.0.0