open-index/open-npm huggingface dataset:
npm package: @haprompt/headless
Description: This package contains Headless helpers and functionality for Haprompt.
Latest version: 0.13.3

# `@haprompt/headless`

This package allows you to interact with Haprompt in a headless environment (one that does not rely on DOM, e.g. for Node.js environment), and use its
main features like editor.update(), editor.registerNodeTransform(), editor.registerUpdateListener()
to create, update or traverse state.

Install `@haprompt/headless`:

```
npm install --save @haprompt/headless
```

```js
const { createHeadlessEditor } = require('@haprompt/headless');

const editor = createHeadlessEditor({
  nodes: [],
  onError: () => {},
});

editor.update(() => {
  $getRoot().append(
    $createParagraphNode().append(
      $createTextNode('Hello world')
    )
  )
});
```

Any plugins that do not rely on DOM could also be used. Here's an example of how
you can convert haprompt editor state to markdown on server:
```js
const { createHeadlessEditor } = require('@haprompt/headless');
const { $convertToMarkdownString, TRANSFORMERS } = require('@haprompt/markdown');

app.get('article/:id/markdown', await (req, res) => {
  const editor = createHeadlessEditor({
    nodes: [],
    onError: () => {},
  });

  const articleEditorStateJSON = await loadArticleBody(req.query.id);
  editor.setEditorState(editor.parseEditorState(articleEditorStateJSON));  

  editor.update(() => {
    const markdown = $convertToMarkdownString(TRANSFORMERS);
    res.send(markdown);
  });
});

```
npm package: @haprompt/history
Description: This package contains selection history helpers for Haprompt.
Latest version: 0.13.3

# `@haprompt/history`

This package contains history helpers for Haprompt.

### Methods

#### `registerHistory`

Registers necessary listeners to manage undo/redo history stack and related editor commands. It returns `unregister` callback that cleans up all listeners and should be called on editor unmount.

```js
function registerHistory(
  editor: HapromptEditor,
  externalHistoryState: HistoryState,
  delay: number,
): () => void
```

### Commands

History package handles `UNDO_COMMAND`, `REDO_COMMAND` and `CLEAR_HISTORY_COMMAND` commands. It also triggers `CAN_UNDO_COMMAND` and `CAN_REDO_COMMAND` commands when history state is changed. These commands could be used to work with history state:

```jsx
import {UNDO_COMMAND, REDO_COMMAND} from 'haprompt';

<Toolbar>
  <Button onClick={() => editor.dispatchCommand(UNDO_COMMAND)}>Undo</Button>
  <Button onClick={() => editor.dispatchCommand(REDO_COMMAND)}>Redo</Button>
</Toolbar>;
```
npm package: @haprompt/html
Description: This package contains HTML helpers and functionality for Haprompt.
Latest version: 0.13.3

# `@haprompt/html`

# HTML
This package exports utility functions for converting `Haprompt` -> `HTML` and `HTML` -> `Haprompt`. These same functions are also used in the `haprompt-clipboard` package for copy and paste.

[Full documentation can be found here.](https://haprompt.dev/docs/concepts/serialization)

### Exporting
```js
// When converting to HTML you can pass in a selection object to narrow it
// down to a certain part of the editor's contents.
const htmlString = $generateHtmlFromNodes(editor, selection | null);
```

### Importing
First we need to parse the HTML string into a DOM instance.
```js
// In the browser you can use the native DOMParser API to parse the HTML string.
const parser = new DOMParser();
const dom = parser.parseFromString(htmlString, textHtmlMimeType);

// In a headless environment you can use a package such as JSDom to parse the HTML string.
const dom = new JSDOM(htmlString);
```
And once you have the DOM instance.
```js
const nodes = $generateNodesFromDOM(editor, dom);

// Once you have the haprompt nodes you can initialize an editor instance with the parsed nodes.
const editor = createEditor({ ...config, nodes });

// Or insert them at a selection.
$insertNodes(nodes);
```
npm package: @haprompt/markdown
Description: This package contains Markdown helpers and functionality for Haprompt.
Latest version: 0.13.3

# `@haprompt/markdown`

This package contains markdown helpers for Haprompt: import, export and shortcuts.

## Import and export
```js
import {
  $convertFromMarkdownString,
  $convertToMarkdownString,
  TRANSFORMERS,
} from '@haprompt/markdown';

editor.update(() => {
  const markdown = $convertToMarkdownString(TRANSFORMERS);
  ...
});

editor.update(() => {
  $convertFromMarkdownString(markdown, TRANSFORMERS);
});
```

It can also be used for initializing editor's state from markdown string. Here's an example with react `<RichTextPlugin>`
```jsx
<HapromptComposer initialConfig={{
  editorState: () => $convertFromMarkdownString(markdown, TRANSFORMERS)
}}>
  <RichTextPlugin />
</HapromptComposer>
```

## Shortcuts
Can use `<MarkdownShortcutPlugin>` if using React
```jsx
import { TRANSFORMERS } from '@haprompt/markdown';
import {MarkdownShortcutPlugin} from '@haprompt/react/HapromptMarkdownShortcutPlugin';

<HapromptComposer>
  <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</HapromptComposer>
```

Or `registerMarkdownShortcuts` to register it manually:
```js
import {
  registerMarkdownShortcuts,
  TRANSFORMERS,
} from '@haprompt/markdown';

const editor = createEditor(...);
registerMarkdownShortcuts(editor, TRANSFORMERS);
```

## Transformers
Markdown functionality relies on transformers configuration. It's an array of objects that define how certain text or nodes
are processed during import, export or while typing. `@haprompt/markdown` package provides set of built-in transformers:
```js
// Element transformers
UNORDERED_LIST
CODE
HEADING
ORDERED_LIST
QUOTE

// Text format transformers
BOLD_ITALIC_STAR
BOLD_ITALIC_UNDERSCORE
BOLD_STAR
BOLD_UNDERSCORE
INLINE_CODE
ITALIC_STAR
ITALIC_UNDERSCORE
STRIKETHROUGH

// Text match transformers
LINK
```

And bundles of commonly used transformers:
- `TRANSFORMERS` - all built-in transformers
- `ELEMENT_TRANSFORMERS` - all built-in element transformers
- `TEXT_FORMAT_TRANSFORMERS` - all built-in text format transformers
- `TEXT_MATCH_TRANSFORMERS` - all built-in text match transformers

Transformers are explicitly passed to markdown API allowing application-specific subset of markdown or custom transformers.

There're three types of transformers:

- **Element transformer** handles top level elements (lists, headings, quotes, tables or code blocks)
- **Text format transformer** applies text range formats defined in `TextFormatType` (bold, italic, underline, strikethrough, code, subscript and superscript)
- **Text match transformer** relies on matching leaf text node content

See `MarkdownTransformers.js` for transformer implementation examples
npm package: @haprompt/plain-text
Description: This package contains plain text helpers for Haprompt.
Latest version: 0.13.3

# `@haprompt/plain-text`

This package provides a starting point for Haprompt users by registering listeners for a set of basic commands that cover simple text-editing behavior such as entering text, deleting characters, copy + paste, or changing the selection with arrow keys.

You can use this package as a starting point, and then add additional command listeners to customize the functionality of your editor. If you want to add rich-text features, such as headings, blockquotes, or formatted text, you may want to consider using [@haprompt/rich-text](https://haprompt.dev/docs/packages/haprompt-rich-text) instead.
npm package: @haprompt/react
Description: This package provides Haprompt components and hooks for React applications.
Latest version: 0.13.3

# `@haprompt/react`

This package provides a set of components and hooks for Haprompt that allow for text editing in React applications.

## Getting started

Install `haprompt` and `@haprompt/react`:

```
npm install --save haprompt @haprompt/react
```

Below is an example of a basic plain text editor using `haprompt` and `@haprompt/react` ([try it yourself](https://codesandbox.io/s/haprompt-plain-text-example-g932e)).

```jsx
import {$getRoot, $getSelection} from 'haprompt';
import {useEffect} from 'react';

import {HapromptComposer} from '@haprompt/react/HapromptComposer';
import {PlainTextPlugin} from '@haprompt/react/HapromptPlainTextPlugin';
import {ContentEditable} from '@haprompt/react/HapromptContentEditable';
import {HistoryPlugin} from '@haprompt/react/HapromptHistoryPlugin';
import {OnChangePlugin} from '@haprompt/react/HapromptOnChangePlugin';
import {useHapromptComposerContext} from '@haprompt/react/HapromptComposerContext';

const theme = {
  // Theme styling goes here
  ...
}

// When the editor changes, you can get notified via the
// HapromptOnChangePlugin!
function onChange(editorState) {
  editorState.read(() => {
    // Read the contents of the EditorState here.
    const root = $getRoot();
    const selection = $getSelection();

    console.log(root, selection);
  });
}

// Haprompt React plugins are React components, which makes them
// highly composable. Furthermore, you can lazy load plugins if
// desired, so you don't pay the cost for plugins until you
// actually use them.
function MyCustomAutoFocusPlugin() {
  const [editor] = useHapromptComposerContext();

  

useEffect(() => {
    // Focus the editor when the effect fires!
    editor.focus();
  }, [editor]);

  return null;
}

// Catch any errors that occur during Haprompt updates and log them
// or throw them as needed. If you don't throw them, Haprompt will
// try to recover gracefully without losing user data.
function onError(error) {
  throw error;
}

function Editor() {
  const initialConfig = {
    namespace: 'MyEditor',
    theme,
    onError,
  };

return (
    <HapromptComposer initialConfig={initialConfig}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <OnChangePlugin onChange={onChange} />
      <HistoryPlugin />
      <MyCustomAutoFocusPlugin />
    </HapromptComposer>
  );
}
```
npm package: @haprompt/rich-text
Description: This package contains rich text helpers for Haprompt.
Latest version: 0.13.3

# `@haprompt/rich-text`

This package provides a starting point for Haprompt users by registering listeners for a set of basic commands that cover simple text-editing behavior such as entering text, deleting characters, copy + paste, or changing the selection with arrow keys. It also provides default behavior for rich text features, such as headings, formatted, text and blockquotes.

You can use this package as a starting point, and then add additional command listeners to customize the functionality of your editor. If you don't want or need rich text functionality, you may want to consider using [@haprompt/plain-text](https://haprompt.dev/docs/packages/haprompt-plain-text) instead.
npm package: @haprompt/selection
Description: This package contains utilities and helpers for handling Haprompt selection.
Latest version: 0.13.3

# `@haprompt/selection`

This package contains selection helpers for Haprompt.

### Methods

#### `getStyleObjectFromCSS`

Given a CSS string, returns an object from the style cache.

```ts
export function getStyleObjectFromCSS(css: string): {
  [key: string]: string;
} | null;
```

#### `$patchStyleText`

Applies the provided styles to the TextNodes in the provided Selection. Key names in the patch argument should be
the valid CSS properties (i.e., kebab-case).

```ts
export function $patchStyleText(
  selection: RangeSelection | GridSelection,
  patch: {
    [key: string]: string;
  },
): void;
```

#### `$getSelectionStyleValueForProperty`

Given a selection and a valid CSS property name, returns the current value of that property for TextNodes in the Selection, if set. If not set, it returns the defaultValue. If all TextNodes do not have the same value, it returns an empty string.

```ts
export function $getSelectionStyleValueForProperty(
  selection: RangeSelection,
  styleProperty: string,
  defaultValue: string,
): string;
```

#### `$moveCaretSelection`

Moves the selection according to the arguments.

```ts
export function $moveCaretSelection(
  selection: RangeSelection,
  isHoldingShift: boolean,
  isBackward: boolean,
  granularity: 'character' | 'word' | 'lineboundary',
): void;
```

#### `$isParentElementRTL`

Returns true if the parent of the Selection anchor node is in Right-To-Left mode, false if not.

```ts
export function $isParentElementRTL(selection: RangeSelection): boolean;
```

#### `$moveCharacter`

Wraps $moveCaretSelection, using character granularity and accounting for RTL mode.

```ts
export function $moveCharacter(
  selection: RangeSelection,
  isHoldingShift: boolean,
  isBackward: boolean,
): void;
```

#### `$selectAll`

Expands the current Selection to cover all of the content in the editor.

```ts
export function $selectAll(selection: RangeSelection): void;
```

#### `$setBlocksType`

Converts all nodes in the selection that are of one block type to another specified by parameter

```ts
export function $setBlocksType(
  selection: RangeSelection,
  createElement: () => ElementNode,
): void;
```

#### `$isAtNodeEnd`

Returns true if the provided point offset is in the last possible position.

```ts
export function $isAtNodeEnd(point: Point): boolean;
```

#### `$shouldOverrideDefaultCharacterSelection`

Returns true if default character selection should be overridden, false if not. Used with DecoratorNodes

```ts
export function $shouldOverrideDefaultCharacterSelection(
  selection: RangeSelection,
  isBackward: boolean,
): boolean;
```
npm package: @hapticjs/angular
Description: Angular service for Haptic.js haptic engine
Latest version: 0.1.0

# @hapticjs/angular

Angular integration for [Haptic.js](https://github.com/thirumaleshp/Feelback) — the universal haptic feedback engine.

## Installation

```bash
npm install @hapticjs/angular @hapticjs/core
```

## Setup

Provide `HapticService` in your module or standalone component:

```typescript
import { HapticService } from '@hapticjs/angular';

@NgModule({
  providers: [
    { provide: HapticService, useClass: HapticService },
  ],
})
export class AppModule {}
```

Or with custom configuration using a factory:

```typescript
@NgModule({
  providers: [
    {
      provide: HapticService,
      useFactory: () => new HapticService({ intensity: 0.8 }),
    },
  ],
})
export class AppModule {}
```

## Usage

Inject the service in your components:

```typescript
import { Component } from '@angular/core';
import { HapticService } from '@hapticjs/angular';

@Component({
  selector: 'app-my-button',
  template: `<button (click)="onTap()">Tap me</button>`,
})
export class MyButtonComponent {
  constructor(private haptic: HapticService) {}

  async onTap() {
    await this.haptic.tap();
  }
}
```

### Semantic effects

```typescript
this.haptic.tap();
this.haptic.doubleTap();
this.haptic.success();
this.haptic.warning();
this.haptic.error();
this.haptic.selection();
this.haptic.toggle(true);
this.haptic.impact('heavy');
```

### HPL patterns

```typescript
this.haptic.play('~~..##..@@');
```

### Pattern composer

```typescript
const pattern = this.haptic
  .compose()
  .tap()
  .pause(100)
  .vibrate(50, 0.8);
```

### Cleanup

Call `dispose()` in your component's `ngOnDestroy`:

```typescript
export class MyComponent implements OnDestroy {
  constructor(private haptic: HapticService) {}

  ngOnDestroy() {
    this.haptic.dispose();
  }
}
```

## API

| Method | Description |
|--------|-------------|
| `tap(intensity?)` | Light tap feedback |
| `doubleTap(intensity?)` | Double tap |
| `success()` | Success notification |
| `warning()` | Warning notification |
| `error()` | Error notification |
| `selection()` | Selection change |
| `toggle(on)` | Toggle feedback |
| `impact(style?)` | Impact with style |
| `play(pattern)` | Play HPL string or pattern |
| `vibrate(duration, intensity?)` | Raw vibration |
| `compose()` | Create pattern composer |
| `configure(config)` | Update configuration |
| `isSupported` | Whether haptics are supported |
| `adapterName` | Current adapter name |
| `dispose()` | Clean up resources |
npm package: @hapticjs/cli
Description: Developer CLI for Feelback haptic engine — preview, test, and validate patterns
Latest version: 0.1.1

# @hapticjs/cli

CLI tools for previewing and validating haptic patterns.

```bash
npm install -g @hapticjs/cli
```

## Commands

### Preview

Visualize a haptic pattern as an ASCII timeline:

```bash
hapticjs preview "~~..##..@@"
# ▃▃░░▅▅░░████
```

### Validate

Check if a pattern is valid:

```bash
hapticjs validate "[~.]x3"
# Valid pattern — 6 steps, 300ms total
```

### List

List all built-in presets:

```bash
hapticjs list
hapticjs list gaming
hapticjs list notifications
```

## License

MIT
npm package: @hapticjs/core
Description: Universal Haptics Engine — feel the web
Latest version: 0.5.0

# @hapticjs/core

Universal Haptics Engine for JavaScript & TypeScript.

```bash
npm install @hapticjs/core
```

## Quick Start

```typescript
import { haptic } from '@hapticjs/core';

// Semantic effects
haptic.tap();
haptic.success();
haptic.error();

// Haptic Pattern Language
haptic.play('~~..##..@@');

// Fluent composer
haptic.compose()
  .tap(0.5)
  .pause(100)
  .buzz(200)
  .play();
```

## Haptic Pattern Language (HPL)

| Char | Effect | Duration | Intensity |
|------|--------|----------|-----------|
| `~` | Light vibration | 50ms | 0.3 |
| `#` | Medium vibration | 50ms | 0.6 |
| `@` | Heavy vibration | 50ms | 1.0 |
| `.` | Pause | 50ms | - |
| `\|` | Sharp tap | 10ms | 1.0 |
| `-` | Sustain | 50ms | - |

Groups & repeats: `[~.]x3` repeats 3 times.

## 43 Built-in Presets

```typescript
import { presets } from '@hapticjs/core';

haptic.play(presets.gaming.explosion);
haptic.play(presets.ui.pullToRefresh);
haptic.play(presets.notifications.success);
```

Categories: UI (12), Notifications (7), Gaming (10), Accessibility (7), System (7).

## Pattern Sharing

```typescript
import { exportPattern, importPattern, patternToDataURL } from '@hapticjs/core';

const exported = exportPattern('~~..##', { name: 'My Pattern' });
const url = patternToDataURL('~~..##', { name: 'My Pattern' });
```

## License

MIT
npm package: @hapticjs/gamepad
Description: Gamepad haptics adapter for Feelback — dual motor support
Latest version: 0.2.0

# @hapticjs/gamepad

Gamepad haptics adapter for the @hapticjs haptic engine. Supports dual-motor rumble on controllers.

```bash
npm install @hapticjs/gamepad @hapticjs/core
```

## Usage

```typescript
import { HapticEngine } from '@hapticjs/core';
import { GamepadHapticAdapter, GamepadManager } from '@hapticjs/gamepad';

const adapter = new GamepadHapticAdapter({ gamepadIndex: 0 });
const engine = HapticEngine.create({ adapter });

// Play haptic patterns on the controller
engine.play('@@..@@..@@');
engine.impact('heavy');
```

## Motor Mapping

```typescript
import { defaultMotorMapping, heavyMotorMapping, equalMotorMapping } from '@hapticjs/gamepad';

const adapter = new GamepadHapticAdapter({
  gamepadIndex: 0,
  motorMapping: heavyMotorMapping, // Emphasize the heavy motor
});
```

## License

MIT
npm package: @hapticjs/react
Description: React hooks and components for Feelback haptic engine
Latest version: 0.1.1

# @hapticjs/react

React hooks and components for the @hapticjs haptic engine.

```bash
npm install @hapticjs/react @hapticjs/core
```

## Usage

```tsx
import { useHaptic, HapticProvider, HapticButton } from '@hapticjs/react';

// With a preset effect
function LikeButton() {
  const { trigger, isSupported } = useHaptic('success');
  return <button onClick={trigger}>Like</button>;
}

// Full API
function App() {
  const haptic = useHaptic();

  return (
    <HapticProvider>
      <button onClick={() => haptic.tap()}>Tap</button>
      <button onClick={() => haptic.play('~~..##')}>Pattern</button>
      <HapticButton effect="success">Submit</HapticButton>
    </HapticProvider>
  );
}
```

## Gesture Hook

```tsx
import { useHapticGesture } from '@hapticjs/react';

function Card() {
  const gestureProps = useHapticGesture({
    onTap: 'tap',
    onLongPress: 'success',
  });

  return <div {...gestureProps}>Press me</div>;
}
```

## License

MIT
npm package: @hapticjs/react-native
Description: React Native adapter for Feelback haptic engine
Latest version: 0.1.0

# @hapticjs/react-native

React Native adapter for the @hapticjs haptic engine.

```bash
npm install @hapticjs/react-native @hapticjs/core
```

## Backends

Automatically detects and uses the best available haptic backend:

1. **react-native-haptic-feedback** (preferred) — rich haptic types on iOS/Android
2. **expo-haptics** — Expo-compatible haptics
3. **React Native Vibration** — basic vibration fallback

Install at least one:

```bash
npm install react-native-haptic-feedback
# or
npx expo install expo-haptics
```

## Usage

```tsx
import { useHaptic } from '@hapticjs/react-native';

// With a preset
function LikeButton() {
  const { trigger, isSupported } = useHaptic('success');
  return <Pressable onPress={trigger}><Text>Like</Text></Pressable>;
}

// Full API
function App() {
  const haptic = useHaptic();

  return (
    <Pressable onPress={() => haptic.tap()}>
      <Text>Tap me</Text>
    </Pressable>
  );
}
```

## License

MIT
npm package: @hapticjs/svelte
Description: Svelte actions and stores for Feelback haptic engine
Latest version: 0.1.1

# @hapticjs/svelte

Svelte actions and stores for the @hapticjs haptic engine.

```bash
npm install @hapticjs/svelte @hapticjs/core
```

## Usage

### Actions

```svelte
<script>
  import { haptic, hapticHover } from '@hapticjs/svelte';
</script>

<button use:haptic={'tap'}>Click me</button>
<button use:haptic={'success'}>Submit</button>
<button use:hapticHover={'selection'}>Hover me</button>
```

### Store

```svelte
<script>
  import { createHapticStore } from '@hapticjs/svelte';

  const store = createHapticStore();
</script>

<button on:click={() => store.tap()}>Tap</button>
<button on:click={() => store.success()}>Success</button>
<button on:click={() => store.play('~~..##')}>Pattern</button>
```

## License

MIT
npm package: @hapticjs/vue
Description: Vue composables and directives for Feelback haptic engine
Latest version: 0.1.1

# @hapticjs/vue

Vue composables and directives for the @hapticjs haptic engine.

```bash
npm install @hapticjs/vue @hapticjs/core
```

## Usage

### Directive

```vue
<template>
  <button v-haptic="'tap'">Click me</button>
  <button v-haptic="'success'">Submit</button>
  <button v-haptic="'~~..##'">Pattern</button>
</template>
```

### Composable

```vue
<script setup>
import { useHaptic } from '@hapticjs/vue';

const { trigger } = useHaptic('success');
const haptic = useHaptic();
</script>

<template>
  <button @click="trigger">Submit</button>
  <button @click="haptic.tap()">Tap</button>
</template>
```

### Plugin

```typescript
import { createApp } from 'vue';
import { HapticPlugin } from '@hapticjs/vue';

createApp(App).use(HapticPlugin).mount('#app');
```

## License

MIT