add claviature package

packages/claviature/Claviature.jsx

@@ -0,0 +1,29 @@
+import { createSignal, For } from 'solid-js';
+import { customElement } from 'solid-element';
+import { getClaviature } from 'claviature';
+import { Dynamic } from 'solid-js/web';
+
+customElement('strudel-claviature', { someProp: 'one', otherProp: 'two' }, (props, { element }) => {
+  const svg = getClaviature({
+    options: {
+      range: ['A1', 'C4'],
+      colorize: [{ keys: ['C3', 'E3', 'G3'], color: 'yellow' }],
+    },
+  });
+  const [activeNotes, setActiveNotes] = createSignal([]);
+  return (
+    <div>
+      <svg {...svg.attributes}>
+        <For each={svg.children}>
+          {(el) => {
+            return (
+              <Dynamic component={el.name} {...el.attributes}>
+                {el.value}
+              </Dynamic>
+            );
+          }}
+        </For>
+      </svg>
+    </div>
+  );
+});

packages/claviature/index.mjs

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

packages/claviature/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@strudel/claviature",
+  "version": "1.0.1",
+  "description": "Claviature component for Strudel",
+  "main": "dist/index.mjs",
+  "type": "module",
+  "publishConfig": {
+    "main": "dist/index.mjs"
+  },
+  "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:*",
+    "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/claviature/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',
+  },
+});