fix: add https support for local vite dev server

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "K.G.Studio",
-  "version": "0.9.0-build.20260406",
+  "version": "0.10.0-build.20260411",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "K.G.Studio",
-      "version": "0.9.0-build.20260406",
+      "version": "0.10.0-build.20260411",
       "dependencies": {
         "@breezystack/lamejs": "^1.2.7",
         "class-transformer": "^0.5.1",
@@ -46,6 +46,7 @@
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.34.1",
         "vite": "^7.0.0",
+        "vite-plugin-mkcert": "^1.17.12",
         "vitest": "^3.2.4"
       }
     },
@@ -3938,9 +3939,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.1",
+      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -13853,6 +13854,23 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vite-plugin-mkcert": {
+      "version": "1.17.12",
+      "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.12.tgz",
+      "integrity": "sha512-HhLyUZnvkKLuk9o+HBaMlGIa6CqPTfLbVlLFBjrkN4mpZ4saYFRfFx5R12a46UxmzWT9dO8fijmblVvCYvCD3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=v18.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=3"
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.4.6",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",

package.json

@@ -52,6 +52,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.34.1",
     "vite": "^7.0.0",
+    "vite-plugin-mkcert": "^1.17.12",
     "vitest": "^3.2.4"
   }
 }

src/core/io/KGProjectStorage.ts

@@ -51,6 +51,13 @@ export class KGProjectStorage {
   public async initialize(): Promise<void> {
     if (this._initialized) return;
 
+    if (!navigator.storage?.getDirectory) {
+      throw new Error(
+        'OPFS is unavailable. K.G.Studio requires a secure context (HTTPS or localhost). ' +
+        'Access via https:// or use localhost/127.0.0.1 instead of an IP address.',
+      );
+    }
+
     this.rootDirHandle = await navigator.storage.getDirectory();
     this.projectsDirHandle = await this.rootDirHandle.getDirectoryHandle(
       OPFS_CONSTANTS.ROOT_DIR,

src/main.tsx

@@ -9,6 +9,51 @@ import { KGAudioInterface } from './core/audio-interface/KGAudioInterface';
 import { KGMidiInput } from './core/midi-input/KGMidiInput';
 import { KGDebugger } from './core/KGDebugger';
 
+const root = createRoot(document.getElementById('root')!);
+
+// OPFS requires a secure context (HTTPS or localhost). Show a clear error instead of crashing.
+if (!window.isSecureContext) {
+  root.render(
+    <StrictMode>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          gap: '16px',
+          padding: '32px',
+          textAlign: 'center',
+          color: 'rgba(255,255,255,0.87)',
+          background: '#1e1e1e',
+          fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+        }}
+      >
+        <div style={{ fontSize: '48px' }}>🔒</div>
+        <h1 style={{ fontSize: '22px', fontWeight: 600, margin: 0 }}>Secure Context Required</h1>
+        <p style={{ fontSize: '14px', color: 'rgba(255,255,255,0.55)', maxWidth: '480px', lineHeight: 1.6 }}>
+          K.G.Studio uses the browser&apos;s Origin Private File System (OPFS) to store projects,
+          which requires a <strong style={{ color: 'rgba(255,255,255,0.8)' }}>secure context</strong>.
+        </p>
+        <div
+          style={{
+            background: '#2a2a2a',
+            border: '1px solid #444',
+            borderRadius: '8px',
+            padding: '16px 24px',
+            fontSize: '13px',
+            lineHeight: 2,
+            color: 'rgba(255,255,255,0.7)',
+          }}
+        >
+          <div>Use <code style={{ color: '#7cb8ff' }}>https://</code> instead of <code style={{ color: '#f28b82' }}>http://</code></div>
+          <div>or access via <code style={{ color: '#7cb8ff' }}>localhost</code> / <code style={{ color: '#7cb8ff' }}>127.0.0.1</code></div>
+        </div>
+      </div>
+    </StrictMode>,
+  );
+} else {
 // Initialize KGCore instance
 await KGCore.instance().initialize();
 
@@ -87,8 +132,9 @@ window.addEventListener('beforeunload', (event) => {
   // Note: Custom messages are no longer supported in modern browsers for security reasons
 });
 
-createRoot(document.getElementById('root')!).render(
+root.render(
   <StrictMode>
     <App />
   </StrictMode>,
 );
+} // end isSecureContext else

vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import mkcert from 'vite-plugin-mkcert';
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { fileURLToPath, URL } from 'node:url';
@@ -11,12 +12,13 @@ const version = packageJson.version;
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), mkcert()],
   base: '/kgstudio/',
   define: {
     __APP_VERSION__: JSON.stringify(version),
   },
   server: {
+    host: true,
     // IMPORTANT: MAKE SURE TO UPDATE YOUR OS HOSTS FILE TO POINT `testlocal.com` TO YOUR LOCAL IP (e.g. 127.0.0.1).
     allowedHosts: ['testlocal.com', '.testlocal.com', 'localhost', '127.0.0.1'],
   },