rename claviature package to widgets

packages/widgets/Claviature.jsx

@@ -0,0 +1,51 @@
+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'],
+};
+
+customElement('strudel-claviature', { options: JSON.stringify(defaultOptions) }, (props, { element }) => {
+  let svg = () => {
+    let c = getClaviature({
+      options: JSON.parse(props.options),
+    });
+    return c;
+  };
+  return (
+    <div>
+      <svg {...svg().attributes}>
+        <For each={svg().children}>
+          {(el) => {
+            return (
+              <Dynamic component={el.name} {...el.attributes}>
+                {el.value}
+              </Dynamic>
+            );
+          }}
+        </For>
+      </svg>
+    </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

@@ -0,0 +1,33 @@
+# @strudel/widgets
+
+adds UI widgets to codemirror
+
+## claviature
+
+`Patter.claviature` renders a [claviature](https://www.npmjs.com/package/claviature).
+
+example usage:
+
+```js
+chord("<Em9 A7 D^7@2>").voicing().piano()
+  .claviature()
+```
+
+All [claviature options](https://www.npmjs.com/package/claviature#options) will work.
+
+Here is an example that uses all available options:
+
+```js
+chord("<Em9 A7 D^7@2>").voicing().piano()
+.claviature({
+  range: ['C1', 'C6'], // rendered note range
+  color: 'yellow', // highlighting color
+  palette: ['cyan', 'magenta'],
+  stroke: 'black',
+  scaleX: 1, scaleY: 1,
+  upperHeight: 80, 
+  lowerHeight: 50
+})
+```
+
+Note: The `Pattern.claviature` method uses the `colorization` option internally, so don't override that and use the `color` option for changing the highlighting color.

packages/widgets/index.mjs

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

packages/widgets/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@strudel/widgets",
+  "version": "1.0.1",
+  "description": "Widget web components for Strudel",
+  "main": "dist/index.mjs",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "titdalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {
+    "@strudel/core": "workspace:*",
+    "@strudel/transpiler": "workspace:*",
+    "claviature": "^0.1.0",
+    "solid-element": "^1.8.0",
+    "solid-js": "^1.8.15",
+    "vite-plugin-solid": "^2.10.1"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10"
+  }
+}

packages/widgets/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { dependencies } from './package.json';
+import { resolve } from 'path';
+import solid from 'vite-plugin-solid';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [solid()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'index.mjs'),
+      formats: ['es'],
+      fileName: (ext) => ({ es: 'index.mjs' })[ext],
+    },
+    rollupOptions: {
+      external: [...Object.keys(dependencies)],
+    },
+    target: 'esnext',
+  },
+});