@supermousejs/states

A Logic Controller that enables/disables other plugins based on hover attributes. Useful for creating complex interaction modes (e.g. "View" mode vs "Edit" mode).

Installation

pnpm add @supermousejs/states

Usage

import { Supermouse } from '@supermousejs/core';
import { States } from '@supermousejs/states';

const app = new Supermouse();

// Define your plugins normally (names are required)
app.use(Dot({ name: 'dot' }));
app.use(Ring({ name: 'ring' }));
app.use(Text({ name: 'text' }));

// Configure states
app.use(States({
  default: ['dot'], // Plugins active by default
  states: {
    'hover': ['dot', 'ring'],
    'info': ['text']
  }
}));

HTML:

<div data-supermouse-state="hover">Hover me</div>
<div data-supermouse-state="info" data-supermouse-text="Hello">Info</div>

Documentation

Full documentation and interactive playground available at supermouse or check out the repo.