Add boilerplate files and licenses

src/components/DeviceProvider.tsx

@@ -0,0 +1,40 @@
+import { useAtom } from 'jotai';
+import { useEffect, useState } from 'preact/hooks';
+import { deviceSkuAtom } from '~/atoms/deviceSku';
+import { SKU_EP133 } from '~/lib/constants';
+import { initDevice } from '../lib/midi';
+import { TEDevice } from '../lib/midi/types';
+import DeviceContext from './DeviceContext';
+
+function DeviceProvider({ children }: { children: preact.ComponentChildren }) {
+  const [device, setDevice] = useState<TEDevice | null>(null);
+  const [deviceError, setDeviceError] = useState<Error | null>(null);
+  const [, setDeviceSku] = useAtom(deviceSkuAtom);
+
+  useEffect(() => {
+    initDevice({
+      onDeviceFound: (deviceInfo) => {
+        console.log('Device found:', deviceInfo);
+        setDevice(deviceInfo);
+        setDeviceSku(deviceInfo.sku);
+      },
+      onDeviceLost: () => {
+        console.log('Device lost');
+        setDevice(null);
+        setDeviceSku(SKU_EP133);
+      },
+      onNoMidiAccess: (error) => {
+        console.error('No MIDI access:', error);
+        setDeviceError(error);
+      },
+    });
+  }, []);
+
+  return (
+    <DeviceContext.Provider value={{ device, error: deviceError }}>
+      {children}
+    </DeviceContext.Provider>
+  );
+}
+
+export default DeviceProvider;