fix(app): avoid pre-init theme warnings

- Add a nullable active editor store accessor for optional app-bound updates
- Skip canvas theme repainting until an editor store exists
- Guard FontPicker focus handling against non-element component refs

packages/vue/src/primitives/FontPicker/FontPickerRoot.vue

@@ -14,28 +14,19 @@ import {
   type AcceptableValue
 } from 'reka-ui'
 
-import {
-  useFontPicker,
-  type FontAccessController
-} from '#vue/primitives/FontPicker/useFontPicker'
+import { useFontPicker, type FontAccessController } from '#vue/primitives/FontPicker/useFontPicker'
 
 import type { FontPickerUi } from '#vue/primitives/FontPicker/types'
 
-const {
-  listFamilies,
-  localFontAccess,
-  ui,
-  emptySearchText,
-  emptyFontsText,
-  emptyFontsHint
-} = defineProps<{
-  listFamilies: () => Promise<string[]>
-  localFontAccess?: FontAccessController
-  ui?: FontPickerUi
-  emptySearchText?: string
-  emptyFontsText?: string
-  emptyFontsHint?: string
-}>()
+const { listFamilies, localFontAccess, ui, emptySearchText, emptyFontsText, emptyFontsHint } =
+  defineProps<{
+    listFamilies: () => Promise<string[]>
+    localFontAccess?: FontAccessController
+    ui?: FontPickerUi
+    emptySearchText?: string
+    emptyFontsText?: string
+    emptyFontsHint?: string
+  }>()
 
 const modelValue = defineModel<string>({ required: true })
 const emit = defineEmits<{ select: [family: string] }>()
@@ -43,18 +34,14 @@ const emit = defineEmits<{ select: [family: string] }>()
 const contentRef = templateRef<HTMLElement>('contentRef')
 
 function focusSearchInput() {
-  nextTick(() => unrefElement(contentRef)?.querySelector('input')?.focus())
+  nextTick(() => {
+    const content = unrefElement(contentRef)
+    if (!(content instanceof HTMLElement)) return
+    content.querySelector<HTMLInputElement>('input')?.focus()
+  })
 }
 
-const {
-  searchTerm,
-  open,
-  filtered,
-  loading,
-  accessState,
-  requestAccess,
-  select
-} = useFontPicker({
+const { searchTerm, open, filtered, loading, accessState, requestAccess, select } = useFontPicker({
   modelValue,
   listFamilies,
   localFontAccess,

src/app/editor/active-store/index.ts

@@ -16,6 +16,10 @@ export function getActiveEditorStore(): EditorStore {
   return storeRef.value
 }
 
+export function getActiveEditorStoreOrNull(): EditorStore | null {
+  return storeRef.value ?? null
+}
+
 const storeProxy = new Proxy({} as EditorStore, {
   get(_, prop) {
     return Reflect.get(getActiveEditorStore(), prop)

src/app/shell/theme.ts

@@ -1,7 +1,7 @@
 import { useLocalStorage, usePreferredDark } from '@vueuse/core'
 import { computed, watch } from 'vue'
 
-import { getActiveEditorStore } from '@/app/editor/active-store'
+import { getActiveEditorStoreOrNull } from '@/app/editor/active-store'
 import { IS_BROWSER } from '@open-pencil/core/constants'
 
 import type { RulerTheme } from '@open-pencil/core/canvas'
@@ -42,14 +42,10 @@ function readRulerTheme(): RulerTheme | null {
 
 function updateCanvasTheme(): void {
   if (!IS_BROWSER) return
-  try {
-    const store = getActiveEditorStore()
-    store.state.rulerTheme = readRulerTheme() ?? undefined
-    store.requestRepaint()
-  } catch (error) {
-    if (import.meta.env.DEV)
-      console.debug('Canvas theme update skipped before editor initialization', error)
-  }
+  const store = getActiveEditorStoreOrNull()
+  if (!store) return
+  store.state.rulerTheme = readRulerTheme() ?? undefined
+  store.requestRepaint()
 }
 
 function applyTheme(value: 'dark' | 'light', setting: AppTheme): void {