open-index/open-npm huggingface dataset:
npm package: @jacobsdigitalfactory/react-image-hotspots
Description: React component for rendering images with hotspots
Author: Filipe Corrêa
Latest version: 1.7.2

# react-image-hotspots

React component for rendering images with zoom controls and hotspots.

[Live demo](https://filipecorrea.github.io/react-image-hotspots/)

## Install

Install from _npm_ and include it in your project build process:

```
npm install react-image-hotspots --save
```

Or install from _Yarn_ running:

```
yarn add react-image-hotspots
```

## Usage

```jsx
import ImageHotspots from 'react-image-hotspots'

<ImageHotspots
  src='https://raw.githubusercontent.com/filipecorrea/react-image-hotspots/master/src/landscape.jpg'
  alt='Sample image'
  hotspots={
    [
      { x: 10, y: 30, content: <span>Hotspot 1</span> },
      { x: 40, y: 70, content: <span>Hotspot 2</span> },
      { x: 80, y: 30, content: <span>Hotspot 2</span> }
    ]
  }
/>
```

### Component properties

| Props                   | Type                         | Default | Description                |
|-------------------------|------------------------------|---------|----------------------------|
| `src`                   | String, _required_           |         | Image source               |
| `alt`                   | String, _optional_           |         | Image alternative info     |
| `hideFullscreenControl` | Boolean, _optional_          | `false` | Hide fullscreen control    |
| `hideZoomControls`      | Boolean, _optional_          | `false` | Hide zoom controls         |
| `hideMinimap`           | Boolean, _optional_          | `false` | Hide minimap               |
| `hotspots`              | Array of objects, _optional_ | `[]`    | Hotspots                   |
| `background`            | String, _optional_           |         | Container background color |

If image size is smaller than the container size, zoom controls and minimap will be hidden.

### Hotspot properties

| Props     | Type                              | Default | Description                    |
|-----------|-----------------------------------|---------|--------------------------------|
| `x`       | Number, _required_                |         | Percentage vertical position   |
| `y`       | Number, _required_                |         | Percentage horizontal position |
| `content` | React or HTML element, _required_ |         | Hotspot content                |

## Development

### Prerequisites

- [Node.js 10](https://nodejs.org/dist/latest-v10.x/)

Test project running:

```
npm test
```

Run project running:

```
npm start
```

Build project running:

```
npm run build
```
npm package: @jacobtipp/bloc-concurrency
Description: ## Installation
Latest version: 4.0.3

# @jacobtipp/bloc-concurrency

## Installation

```
npm install @jacobtipp/bloc-concurrency
```

## Event Transformers

`bloc_concurrency` provides an opinionated set of event transformers:

- `concurrent` - process events concurrently
- `sequential` - process events sequentially
- `restartable` - process only the latest event and cancel previous event handlers


## Usage 

```typescript
import { Bloc } from "@jacobtipp/bloc";
import { sequential } from "@jacobtipp/bloc-concurrency"

 abstract class CounterEvent {
  protected _!: void
 }

 class CounterIncrementEvent extends CounterEvent {}

export class CounterBloc extends Bloc<CounterEvent, number> {
  constructor() {
    super(0);

    this.on(
      CounterIncrementEvent,
      (event, emit) => {
        emit(this.state + 1);
      },
      /// Specify a custon event transformer from @jacobtipp/bloc-concurrency
      /// in this case events will be processed sequentially 
      sequential()
    );
  }
}
```
npm package: @jacobtipp/bloc-devtools
Description: ## Installation
Latest version: 2.0.3

# @jacobtipp/bloc-devtools

## Installation

```
npm install @jacobtipp/bloc-devtools
```

## Usage 

```typescript
// main.tsx
import { DevtoolsObserver  } from "@jacobtipp/bloc-devtools";

BlocObserver.observer = new DevtoolsObserver()
 
```
npm package: @jacobtipp/state
Description: ## Introduction
Latest version: 1.1.2

# @jacobtipp/state

## Introduction

`@jacobtipp/state` is a Typescript library for creating immutable classes using immer

## Installation

```
npm install @jacobtipp/state
```

## BaseState
Imagine we have a todo application, where a todo item may be fetched from the server,
we can define our state for a todo item by extending the `BaseState` class like so:
```typescript
import { BaseState } from '@jacobtipp/state';

type TodoItemStatus = "initial" | "loading" | "ready" | "failed"

class TodoItemState extends BaseState {
  constructor(
    public id: number, 
    public message: string, 
    public status: TodoItemStatus) {
    super()
  }
}

const todoState = new TodoItemState(0, "", "initial")

// our todoState is initialized but has an empty message, we can set the status to loading while we fetch data from the server
const loadingState = todoState.copyWith((state) => {
  state.status = "loading"
})

loadingState !== todoState // true
loadingState.status === "loading" // true

// after the todo item has been fetched we can now update our state with the message
const readyState = loadingState.copyWith((state) => {
  state.status = "ready"
  state.message = "some message"
})
```

## State

Defining finite status types is a common practice when dealing with async data, by extending
the `State<Data>` class, we get utility methods and a constructor that makes this easier

Here we will extend `State` using the todo item example above:

```typescript
import { BaseState } from '@jacobtipp/state';

type TodoItem = {
  id: number
  message: string
}

class TodoItemState extends State<TodoItem> {}

const todoState = new TodoItemState({ id: 0, message: ""})

// the State class automatically provides us with a status property that may have the following values: "initial" | "loading" | "ready" | "failed" 

// newly instantiated state objects have an "initial" state by default
todoState.status === "initial" // true

// data is accessed by the "data" property, in this case our TodoItem data
todoState.data.id === 0 // true
todoState.data.message === "" // true

// transitioning between different statuses, we can use the following factory methods: "loading()" | "ready(data: Data)" | "failed(error?: Error)" 
const loadingState = todoState.loading()

loadingState.status === "loading" // true

const readyState = loadingState.ready((todoItem) => {
  todoItem.message = "some message"
})

readyState.status === "ready" // true

// you can also use the copyWith method, as State inherits from BaseState
const failedState = readyState.copyWith((state) => {
  state.status = "failed"
  state.error = new TodoItemError()
})
```
npm package: @jacobtread/astro-shield
Description: Astro integration to enhance your website's security with SubResource Integrity hashes, Content-Security-Policy headers, and other techniques.
Latest version: 1.0.0

<!--
SPDX-FileCopyrightText: 2024 KindSpells Labs S.L.

SPDX-License-Identifier: CC-BY-4.0
-->
# Astro-Shield

[![NPM Version](https://img.shields.io/npm/v/%40kindspells%2Fastro-shield)](https://www.npmjs.com/package/@kindspells/astro-shield)
![NPM Downloads](https://img.shields.io/npm/dw/%40kindspells%2Fastro-shield)
![GitHub commit activity](https://img.shields.io/github/commit-activity/w/kindspells/astro-shield)
![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/kindspells/astro-shield/tests.yml)
[![Socket Badge](https://socket.dev/api/badge/npm/package/@kindspells/astro-shield)](https://socket.dev/npm/package/@kindspells/astro-shield)

## Introduction

Astro-Shield helps you to enhance the security of your Astro site.

## How to install

```bash
# With NPM
npm install --save-dev @kindspells/astro-shield

# With Yarn
yarn add --dev @kindspells/astro-shield

# With PNPM
pnpm add --save-dev @kindspells/astro-shield
```

## How to use

In your `astro.config.mjs` file:

```javascript
import { defineConfig } from 'astro/config'
import { shield } from '@kindspells/astro-shield'

export default defineConfig({
  integrations: [
    shield({})
  ]
})
```

## Learn more

- [Astro-Shield Documentation](https://astro-shield.kindspells.dev)

## Other Relevant Guidelines

- [Code of Conduct](https://github.com/KindSpells/astro-shield?tab=coc-ov-file)
- [Contributing Guidelines](https://github.com/KindSpells/astro-shield/blob/main/CONTRIBUTING.md)
- [Security Policy](https://github.com/KindSpells/astro-shield/security/policy)

## Main Contributors

This library has been created and is being maintained by
[KindSpells Labs](https://kindspells.dev/?utm_source=github&utm_medium=astro_sri_scp&utm_campaign=floss).

## License

This library is released under [MIT License](https://github.com/KindSpells/astro-shield?tab=MIT-1-ov-file).
npm package: @jacobtread/chemic
Description: Microphone testing tool
Author: Jacobtread
Latest version: 0.4.0

# 🎤 CheMic

> `Check-Microphone` Microphone checking tool

![License](https://img.shields.io/github/license/jacobtread/chemic?style=for-the-badge)
![Cargo Version](https://img.shields.io/crates/v/chemic?style=for-the-badge)
![Cargo Downloads](https://img.shields.io/crates/d/chemic?style=for-the-badge)

This is a tool for checking your microphone using the command line. 


## 🌟 Installation

### 💾 Downloads

You can download the latest pre-built release for Windows from [Here](https://github.com/jacobtread/chemic/releases/latest)

### 📦 Cargo Bin-Install

If you have [cargo binstall](https://github.com/cargo-bins/cargo-binstall) installed, you can install a pre-built CheMic binary with the following command:

```shell
cargo binstall chemic
```

### 📦 Cargo Install

If you have Cargo installed you can install it using the following command:

```shell
cargo install chemic
```

## 🚀 Usage

Simply open your terminal and type `chemic` to start the program. You can also provide the `-d` or `--default` flag to use the default input and output device rather than being prompted to select

## 📷 Screenshots

Below are some screenshots of what the program looks like in-use

|                   |                   |
| ----------------- | ----------------- |
| ![](images/1.png) | ![](images/2.png) |
| ![](images/3.png) | ![](images/4.png) |
npm package: @jacobwisniewski/openstack
Description: Simple profile management for OpenCode configurations
Author: Jacob Wisniewski
Latest version: 0.2.0

# openstack

Simple profile management for OpenCode configurations.

## Quick Start

```bash
npm install -g @jacobwisniewski/openstack

# Initialize openstack (backs up your current config)
openstack init

# Install a profile from git
openstack install https://github.com/user/opencode-config

# Switch to the profile
openstack use user

# List installed profiles
openstack list
```

## What is openstack?

openstack lets you easily switch between different OpenCode configurations. Each profile contains:

- `AGENTS.md` - Your coding rules and preferences
- `skills/` - Per-profile skills directory (isolated per profile)
- `opencode.json` - Optional configuration (modes, MCP servers, etc.)

## Why?

- **Clean separation** - Each profile is self-contained
- **Easy to try** - Install someone's config, try it, switch back
- **Easy to remove** - Just `openstack use default` to go back
- **Simple** - No magic, just symlink management

## Documentation

- [Development Plan](docs/plan.md) - Architecture and implementation details
- [Creating Profiles](docs/creating-profiles.md) - How to make your own profile
- [CLI Reference](docs/cli.md) - Command documentation

## License

MIT