rename claviature package to widgets

packages/claviature/index.mjs

@@ -1,20 +0,0 @@
-export * from './Claviature.jsx';
-import { Pattern } from '@strudel/core';
-import { registerWidget } from '@strudel/transpiler';
-
-registerWidget('claviature', 'strudel-claviature');
-
-Pattern.prototype.claviature = function (id, options = {}) {
-  return this.onFrame((haps) => {
-    const keys = haps.map((h) => h.value.note);
-    let el = document.getElementById(id);
-    el?.setAttribute(
-      'options',
-      JSON.stringify({
-        ...options,
-        range: options.range || ['A2', 'C6'],
-        colorize: [{ keys: keys, color: options.color || 'steelblue' }],
-      }),
-    );
-  });
-};

packages/widgets/Claviature.jsx

@@ -2,6 +2,8 @@ import { For } from 'solid-js';
 import { customElement } from 'solid-element';
 import { getClaviature } from 'claviature';
 import { Dynamic } from 'solid-js/web';
+import { Pattern } from '@strudel/core';
+import { registerWidget } from '@strudel/transpiler';
 
 let defaultOptions = {
   range: ['A1', 'C6'],
@@ -30,3 +32,20 @@ customElement('strudel-claviature', { options: JSON.stringify(defaultOptions) },
     </div>
   );
 });
+
+registerWidget('claviature', 'strudel-claviature');
+
+Pattern.prototype.claviature = function (id, options = {}) {
+  return this.onFrame((haps) => {
+    const keys = haps.map((h) => h.value.note);
+    let el = document.getElementById(id);
+    el?.setAttribute(
+      'options',
+      JSON.stringify({
+        ...options,
+        range: options.range || ['A2', 'C6'],
+        colorize: [{ keys: keys, color: options.color || 'steelblue' }],
+      }),
+    );
+  });
+};

packages/widgets/README.md

@@ -1,6 +1,10 @@
-# @strudel/claviature
+# @strudel/widgets
 
-adds a `Patter.claviature` method that renders a [claviature](https://www.npmjs.com/package/claviature).
+adds UI widgets to codemirror
+
+## claviature
+
+`Patter.claviature` renders a [claviature](https://www.npmjs.com/package/claviature).
 
 example usage:
 

packages/widgets/index.mjs

@@ -0,0 +1 @@
+export * from './Claviature.jsx';

packages/widgets/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@strudel/claviature",
+  "name": "@strudel/widgets",
   "version": "1.0.1",
-  "description": "Claviature component for Strudel",
+  "description": "Widget web components for Strudel",
   "main": "dist/index.mjs",
   "type": "module",
   "scripts": {