init

src/composables/usePlaybackLoop.ts

@@ -0,0 +1,23 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+import { useSceneStore } from '@/stores/scene'
+
+export function usePlaybackLoop() {
+  const store = useSceneStore()
+  let raf = 0
+  let last = 0
+
+  const loop = (now: number) => {
+    const dt = last === 0 ? 0 : (now - last) / 1000
+    last = now
+    if (store.playing) store.tick(dt)
+    raf = requestAnimationFrame(loop)
+  }
+
+  onMounted(() => {
+    raf = requestAnimationFrame(loop)
+  })
+
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(raf)
+  })
+}

src/composables/useTheme.ts

@@ -0,0 +1,35 @@
+import { ref, watch } from 'vue'
+
+export type Theme = 'dark' | 'light'
+
+const STORAGE_KEY = 'animatr.theme'
+
+function readInitial(): Theme {
+  if (typeof localStorage === 'undefined') return 'dark'
+  const v = localStorage.getItem(STORAGE_KEY)
+  return v === 'light' ? 'light' : 'dark'
+}
+
+const theme = ref<Theme>(readInitial())
+
+function apply(t: Theme) {
+  if (typeof document === 'undefined') return
+  document.documentElement.dataset.theme = t
+  try {
+    localStorage.setItem(STORAGE_KEY, t)
+  } catch {
+    /* ignore quota */
+  }
+}
+
+apply(theme.value)
+watch(theme, (t) => apply(t))
+
+export function useTheme() {
+  return {
+    theme,
+    setTheme(t: Theme) {
+      theme.value = t
+    },
+  }
+}