fix store import

website/src/components/HeadCommon.astro

@@ -1,12 +1,9 @@
 ---
 import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';
-import { settings } from '../repl/themes.mjs';
 
 const { BASE_URL } = import.meta.env;
 const base = BASE_URL;
-
-const { strudelTheme } = settings;
 ---
 
 <!-- Global Metadata -->
@@ -48,8 +45,9 @@ const { strudelTheme } = settings;
 </style>
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
-<script define:vars={{ settings, strudelTheme }} is:inline type="module">
-  import { watch, get } from './store.mjs';
+<script>
+  import { settings } from '../repl/themes.mjs';
+  import { watch, get } from '../store.mjs';
   const themeStyle = document.createElement('style');
   themeStyle.id = 'strudel-theme';
   document.head.append(themeStyle);

website/src/store.mjs

@@ -0,0 +1,48 @@
+export const storeKey = 'strudel-settings';
+const defaults = {
+  keybindings: 'codemirror',
+  theme: 'strudelTheme',
+  fontSize: 18,
+};
+
+export function get(prop) {
+  let state = {
+    ...defaults,
+    ...JSON.parse(localStorage.getItem(storeKey) || '{}'),
+  };
+  if (!prop) {
+    return state;
+  }
+  return state[prop];
+}
+
+export function set(next) {
+  localStorage.setItem(storeKey, JSON.stringify(next));
+}
+
+export function update(func) {
+  const prev = get();
+  const next = func(prev);
+  set(next);
+  document.dispatchEvent(
+    new CustomEvent(storeKey, {
+      detail: { next, prev },
+    }),
+  );
+}
+
+export function reset() {
+  update(() => defaults);
+}
+
+export function watch(func, prop) {
+  document.addEventListener(storeKey, (e) => {
+    const { prev, next } = e.detail;
+    const hasPropChanged = (p) => next[p] !== prev[p];
+    if (!prop) {
+      func(next);
+    } else if (hasPropChanged(prop)) {
+      func(next[prop]);
+    }
+  });
+}

website/src/useStore.mjs

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 // import { useEvent } from '@strudel.cycles/react';
-import * as Store from '../public/store.mjs';
+import * as Store from './store.mjs';
 import {} from 'react';
 
 function useStore() {