@supermousejs/states 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @supermousejs/states
 
+## 2.0.2
+
+### Patch Changes
+
+- ae219a0: Update READMEs with correct link to documentation
+- Updated dependencies [ae219a0]
+  - @supermousejs/utils@2.0.2
+  - @supermousejs/core@2.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+- Add minimal README.md files to packages
+- Updated dependencies
+  - @supermousejs/utils@2.0.1
+  - @supermousejs/core@2.0.1
+
 ## 2.0.0
 
 ### Major Changes

package/README.md

@@ -0,0 +1,44 @@
+
+# @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
+
+```bash
+pnpm add @supermousejs/states
+```
+
+## Usage
+
+```ts
+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:**
+```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](https://supermouse.vercel.app) or [check out the repo](https://github.com/Whitestar14/supermouse-js).

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@supermousejs/states",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@supermousejs/core": "2.0.0",
-    "@supermousejs/utils": "2.0.0"
+    "@supermousejs/core": "2.0.2",
+    "@supermousejs/utils": "2.0.2"
   },
   "devDependencies": {},
   "peerDependencies": {},

package/src/index.ts

@@ -1,97 +1,97 @@
-import { definePlugin } from '@supermousejs/utils';
-
-export interface StatesOptions {
-  name?: string;
-  isEnabled?: boolean;
-  /** The default state (active when nothing else is hovered). */
-  default: string[];
-  /** Map of state names to lists of plugin names to enable. */
-  states: Record<string, string[]>;
-  /** CSS selector attribute to trigger state change. Default 'data-supermouse-state'. */
-  attribute?: string;
-}
-
-export const States = (options: StatesOptions) => {
-  const attr = options.attribute || 'data-supermouse-state';
-  
-  // Cache the relationships for fast lookups
-  const allManagedPlugins = new Set<string>(); // All plugins mentioned in 'states'
-  const defaultPlugins = new Set(options.default);
-  
-  // Populate the set of managed plugins (excluding defaults for now)
-  Object.values(options.states).forEach(list => {
-    list.forEach(p => allManagedPlugins.add(p));
-  });
-
-  let currentState = 'default';
-  let hasInitialized = false;
-
-  return definePlugin({
-    name: 'states',
-    // High priority: Run BEFORE visual plugins so they know if they are enabled/disabled this frame
-    priority: -999, 
-    
-    install(app) {
-      // Register the trigger attribute
-      app.registerHoverTarget(`[${attr}]`);
-    },
-
-    update(app) {
-      // --- INITIALIZATION STEP ---
-      // We do this in the first update tick to ensure all other plugins 
-      // have been registered via .use(), regardless of order.
-      if (!hasInitialized) {
-        // 1. Disable all "Special State" plugins initially
-        allManagedPlugins.forEach(name => {
-          if (!defaultPlugins.has(name)) {
-            app.disablePlugin(name);
-          }
-        });
-
-        // 2. Ensure default plugins are enabled
-        defaultPlugins.forEach(name => {
-          app.enablePlugin(name);
-        });
-
-        hasInitialized = true;
-      }
-
-      // --- STANDARD LOGIC ---
-      const target = app.state.hoverTarget;
-      let nextState = 'default';
-
-      // 1. Determine Desired State
-      if (target && target.hasAttribute(attr)) {
-        const val = target.getAttribute(attr);
-        if (val && options.states[val]) {
-          nextState = val;
-        }
-      }
-
-      // 2. Switch State (Only if changed)
-      if (nextState !== currentState) {
-        
-        // A. Determine which plugins should be active
-        const activePlugins = nextState === 'default' 
-          ? options.default 
-          : options.states[nextState];
-
-        // B. Apply changes
-        // Note: We combine default + managed to ensure we cover everyone involved
-        const involved = new Set([...defaultPlugins, ...allManagedPlugins]);
-        
-        involved.forEach(pluginName => {
-          const shouldBeActive = activePlugins.includes(pluginName);
-          
-          if (shouldBeActive) {
-            app.enablePlugin(pluginName);
-          } else {
-            app.disablePlugin(pluginName);
-          }
-        });
-
-        currentState = nextState;
-      }
-    }
-  }, options);
+import { definePlugin } from '@supermousejs/utils';
+
+export interface StatesOptions {
+  name?: string;
+  isEnabled?: boolean;
+  /** The default state (active when nothing else is hovered). */
+  default: string[];
+  /** Map of state names to lists of plugin names to enable. */
+  states: Record<string, string[]>;
+  /** CSS selector attribute to trigger state change. Default 'data-supermouse-state'. */
+  attribute?: string;
+}
+
+export const States = (options: StatesOptions) => {
+  const attr = options.attribute || 'data-supermouse-state';
+  
+  // Cache the relationships for fast lookups
+  const allManagedPlugins = new Set<string>(); // All plugins mentioned in 'states'
+  const defaultPlugins = new Set(options.default);
+  
+  // Populate the set of managed plugins (excluding defaults for now)
+  Object.values(options.states).forEach(list => {
+    list.forEach(p => allManagedPlugins.add(p));
+  });
+
+  let currentState = 'default';
+  let hasInitialized = false;
+
+  return definePlugin({
+    name: 'states',
+    // High priority: Run BEFORE visual plugins so they know if they are enabled/disabled this frame
+    priority: -999, 
+    
+    install(app) {
+      // Register the trigger attribute
+      app.registerHoverTarget(`[${attr}]`);
+    },
+
+    update(app) {
+      // --- INITIALIZATION STEP ---
+      // We do this in the first update tick to ensure all other plugins 
+      // have been registered via .use(), regardless of order.
+      if (!hasInitialized) {
+        // 1. Disable all "Special State" plugins initially
+        allManagedPlugins.forEach(name => {
+          if (!defaultPlugins.has(name)) {
+            app.disablePlugin(name);
+          }
+        });
+
+        // 2. Ensure default plugins are enabled
+        defaultPlugins.forEach(name => {
+          app.enablePlugin(name);
+        });
+
+        hasInitialized = true;
+      }
+
+      // --- STANDARD LOGIC ---
+      const target = app.state.hoverTarget;
+      let nextState = 'default';
+
+      // 1. Determine Desired State
+      if (target && target.hasAttribute(attr)) {
+        const val = target.getAttribute(attr);
+        if (val && options.states[val]) {
+          nextState = val;
+        }
+      }
+
+      // 2. Switch State (Only if changed)
+      if (nextState !== currentState) {
+        
+        // A. Determine which plugins should be active
+        const activePlugins = nextState === 'default' 
+          ? options.default 
+          : options.states[nextState];
+
+        // B. Apply changes
+        // Note: We combine default + managed to ensure we cover everyone involved
+        const involved = new Set([...defaultPlugins, ...allManagedPlugins]);
+        
+        involved.forEach(pluginName => {
+          const shouldBeActive = activePlugins.includes(pluginName);
+          
+          if (shouldBeActive) {
+            app.enablePlugin(pluginName);
+          } else {
+            app.disablePlugin(pluginName);
+          }
+        });
+
+        currentState = nextState;
+      }
+    }
+  }, options);
 };

package/tsconfig.json

@@ -1,18 +1,18 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": [
-    "src"
-  ],
-  "compilerOptions": {
-    "outDir": "dist",
-    "baseUrl": ".",
-    "paths": {
-      "@supermousejs/core": [
-        "../core/src/index.ts"
-      ],
-      "@supermousejs/utils": [
-        "../utils/src/index.ts"
-      ]
-    }
-  }
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "src"
+  ],
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@supermousejs/core": [
+        "../core/src/index.ts"
+      ],
+      "@supermousejs/utils": [
+        "../utils/src/index.ts"
+      ]
+    }
+  }
 }

package/vite.config.ts

@@ -1,22 +1,22 @@
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import path from 'path';
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      name: 'SupermouseStates',
-      fileName: (format) => format === 'es' ? 'index.mjs' : 'index.umd.js',
-    },
-    rollupOptions: {
-      external: ['@supermousejs/core', '@supermousejs/utils'],
-      output: {
-        globals: {
-          '@supermousejs/core': 'SupermouseCore'
-        , '@supermousejs/utils': 'SupermouseUtils'}
-      }
-    }
-  },
-  plugins: [dts({ rollupTypes: true })]
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import path from 'path';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'SupermouseStates',
+      fileName: (format) => format === 'es' ? 'index.mjs' : 'index.umd.js',
+    },
+    rollupOptions: {
+      external: ['@supermousejs/core', '@supermousejs/utils'],
+      output: {
+        globals: {
+          '@supermousejs/core': 'SupermouseCore'
+        , '@supermousejs/utils': 'SupermouseUtils'}
+      }
+    }
+  },
+  plugins: [dts({ rollupTypes: true })]
 });