@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/stores/demo.store.ts

@@ -0,0 +1,284 @@
+import { defineStore, storeToRefs } from 'pinia';
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { mockDemoViewerStlDecimator } from '@/components/demo/mockDemoViewerStlDecimator';
+import { LoadSessionState } from '@3cr/types-ts/types/LoadSessionState';
+import { DEMO_BUCKET_URL } from '@/constants';
+import { useUploadStore } from '@/stores/upload.store';
+import { DemoType, SaveState, Upload, ViewerOptions, ViewerPayload } from '@3cr/viewer-types-ts';
+import totalSegmentator from '@/assets/images/totalSegmentator.png';
+import { v4 } from 'uuid';
+import avatar from '@/assets/images/courtney.png';
+
+const now = new Date();
+
+function createUpload(file: File): Upload {
+  return {
+    id: v4(),
+    title: file.name,
+    subtitle: 'Uploading...',
+    status: 'uploading' as const,
+    progress: 0
+  };
+}
+
+function fakeUpload(upload: Upload) {
+  upload.progress = 0;
+  upload.status = 'uploading';
+  const interval = setInterval(() => {
+    if (upload.progress! < 1) {
+      if (Math.random() >= 0.5) {
+        upload.progress = upload.progress! + 0.01;
+      }
+    } else {
+      upload.status = 'completed';
+      upload.subtitle = 'Upload Complete';
+      clearInterval(interval);
+    }
+  }, 100);
+}
+
+export const useDemoStore = defineStore('demo', () => {
+  const { t, tm } = useI18n();
+  const viewer3cr = useViewer3cr();
+  const { uploads } = storeToRefs(useUploadStore());
+
+  const isDemo = ref<boolean>(false);
+  const demoTitle = ref<string>('');
+  const demoSubtitles = ref<string[]>([]);
+  const m_demoInfo = ref<boolean>(false);
+  const m_demoEnableCloudStorage = ref<boolean>(false);
+  const m_demoPurchaseCredits = ref<boolean>(false);
+  const m_demoUpgradePlan = ref<boolean>(false);
+  const profileDropdown = reactive({ modal: false, x: 0, y: 0 });
+  const notificationDropdown = reactive({ modal: false, x: 0, y: 0 });
+  const recentDropdown = reactive({ modal: false, x: 0, y: 0 });
+
+  const demoLicenceOptions = computed<ViewerOptions>(() => ({
+    fileName: `${now.getUTCFullYear()}-${now.getUTCMonth() + 1}-${now.getUTCDate()} CT Chest-Scan DICOM Series`,
+    user: { name: t('data.profiles[0].name'), avatarUrl: avatar },
+    getAIModels: () => [
+      {
+        key: 'TotalSegmentator',
+        image: totalSegmentator,
+        title: 'Auto Annotate',
+        subtitle: 'Supports CT/MRI/XR formats',
+        description: 'Run auto Ai... ',
+        url: 'http://Google.com',
+        tooltip: 'Total Segmentator',
+        cost: 5,
+        estimatedTimeSeconds: 1200
+      }
+    ],
+    onRunAIModel: async (_keys: string[]) => {
+      mockDemoViewerStlDecimator();
+      const message: LoadSessionState = {
+        Version: '0.0.0',
+        Url: `${DEMO_BUCKET_URL}/state/TotalSegmentator_1722837421466.3crms`
+      };
+      await viewer3cr.loadMcadObjects({ message });
+    },
+    onCloudStorage: () => {
+      m_demoEnableCloudStorage.value = true;
+    },
+    onPurchaseCredits: () => {
+      m_demoPurchaseCredits.value = true;
+    },
+    onDownloadMcad: () => {
+      demoTitle.value = t('texts.demo.licence.downloadMcad.title');
+      demoSubtitles.value = tm('texts.demo.licence.downloadMcad.subtitles');
+      m_demoInfo.value = true;
+    },
+    onMCADUpload: (files: Array<File>) => {
+      const items = files.map((file) => createUpload(file));
+      uploads.value.push(...items);
+      uploads.value.forEach((upload) => fakeUpload(upload));
+    },
+    onDownloadScan: () => {
+      demoTitle.value = t('texts.demo.licence.downloadScan.title');
+      demoSubtitles.value = tm('texts.demo.licence.downloadScan.subtitles');
+      m_demoInfo.value = true;
+    },
+    onExit: () => {
+      demoTitle.value = t('texts.demo.licence.exit.title');
+      demoSubtitles.value = tm('texts.demo.licence.exit.subtitles');
+      m_demoInfo.value = true;
+    },
+    onLoadScan: () => {
+      demoTitle.value = t('texts.demo.licence.loadScan.title');
+      demoSubtitles.value = tm('texts.demo.licence.loadScan.subtitles');
+      m_demoInfo.value = true;
+    },
+    onLoadSession: () => {
+      demoTitle.value = t('texts.demo.licence.loadSession.title');
+      demoSubtitles.value = tm('texts.demo.licence.loadSession.subtitles');
+      m_demoInfo.value = true;
+    },
+    onProfileDropdown: (x, y) => {
+      profileDropdown.x = x;
+      profileDropdown.y = y;
+      profileDropdown.modal = true;
+    },
+    onNotificationDropdown: (x: number, y: number) => {
+      notificationDropdown.x = x;
+      notificationDropdown.y = y;
+      notificationDropdown.modal = true;
+    },
+    onRecentDropdown: (x: number, y: number) => {
+      recentDropdown.x = x;
+      recentDropdown.y = y;
+      recentDropdown.modal = true;
+    },
+    onSaveSession: (scan, dataOverlay, mcad, changeStateCb: (updatedState: SaveState) => void) => {
+      changeStateCb(SaveState.SAVING);
+      setTimeout(() => {
+        changeStateCb(SaveState.SAVED_TEMPORARY);
+        setTimeout(() => {
+          demoTitle.value = t('texts.demo.licence.saveSession.title');
+          demoSubtitles.value = tm('texts.demo.licence.saveSession.subtitles');
+          m_demoInfo.value = true;
+        }, 500);
+      }, 1000);
+    },
+    onShareScan: () => {},
+    onUpgrade: () => {
+      m_demoUpgradePlan.value = true;
+    }
+  }));
+
+  const demoPatientOptions = computed<ViewerOptions>(() => ({
+    fileName: `${now.getUTCFullYear()}-${now.getUTCMonth() + 1}-${now.getUTCDate()} CT Chest-Scan DICOM Series`,
+    user: { name: t('data.profiles[0].name'), avatarUrl: avatar },
+    getAIModels: () => [
+      {
+        key: 'TotalSegmentator',
+        image: totalSegmentator,
+        title: 'Auto Annotate',
+        subtitle: 'Supports CT/MRI/XR formats',
+        description: 'Run auto Ai... ',
+        url: 'http://Google.com',
+        tooltip: 'Total Segmentator',
+        cost: 5,
+        estimatedTimeSeconds: 1200
+      }
+    ],
+    onRunAIModel: async (_keys: string[]) => {
+      mockDemoViewerStlDecimator();
+      const message: LoadSessionState = {
+        Version: '0.0.0',
+        Url: `${DEMO_BUCKET_URL}/state/TotalSegmentator_1722837421466.3crms`
+      };
+      await viewer3cr.loadMcadObjects({ message });
+    },
+    onCloudStorage: () => {
+      m_demoEnableCloudStorage.value = true;
+    },
+    onPurchaseCredits: () => {
+      m_demoPurchaseCredits.value = true;
+    },
+    onDownloadMcad: () => {
+      demoTitle.value = t('texts.demo.patient.downloadMcad.title');
+      demoSubtitles.value = tm('texts.demo.patient.downloadMcad.subtitles');
+      m_demoInfo.value = true;
+    },
+    onDownloadScan: () => {
+      demoTitle.value = t('texts.demo.patient.downloadScan.title');
+      demoSubtitles.value = tm('texts.demo.patient.downloadScan.subtitles');
+      m_demoInfo.value = true;
+    },
+    onMCADUpload: (files: Array<File>) => {
+      const items = files.map((file) => createUpload(file));
+      uploads.value.push(...items);
+      uploads.value.forEach((upload) => fakeUpload(upload));
+    },
+    onExit: () => {
+      demoTitle.value = t('texts.demo.patient.exit.title');
+      demoSubtitles.value = tm('texts.demo.patient.exit.subtitles');
+      m_demoInfo.value = true;
+    },
+    onLoadScan: () => {
+      demoTitle.value = t('texts.demo.patient.loadScan.title');
+      demoSubtitles.value = tm('texts.demo.patient.loadScan.subtitles');
+      m_demoInfo.value = true;
+    },
+    onLoadSession: () => {
+      demoTitle.value = t('texts.demo.patient.loadSession.title');
+      demoSubtitles.value = tm('texts.demo.patient.loadSession.subtitles');
+      m_demoInfo.value = true;
+    },
+    onProfileDropdown: (x, y) => {
+      profileDropdown.x = x;
+      profileDropdown.y = y;
+      profileDropdown.modal = true;
+    },
+    onNotificationDropdown: (x: number, y: number) => {
+      notificationDropdown.x = x;
+      notificationDropdown.y = y;
+      notificationDropdown.modal = true;
+    },
+    onRecentDropdown: (x: number, y: number) => {
+      recentDropdown.x = x;
+      recentDropdown.y = y;
+      recentDropdown.modal = true;
+    },
+    onSaveSession: (scan, dataOverlay, mcad, changeStateCb) => {
+      changeStateCb(SaveState.SAVING);
+      setTimeout(() => {
+        changeStateCb(SaveState.SAVED_TEMPORARY);
+        setTimeout(() => {
+          demoTitle.value = t('texts.demo.patient.saveSession.title');
+          demoSubtitles.value = tm('texts.demo.patient.saveSession.subtitles');
+          m_demoInfo.value = true;
+        }, 500);
+      }, 1000);
+    },
+    onShareScan: () => {},
+    onUpgrade: () => {
+      m_demoUpgradePlan.value = true;
+    }
+  }));
+
+  const demoType = computed(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const demoType = urlParams.get('demoType')?.toLowerCase();
+    switch (demoType) {
+      case 'licence':
+        return DemoType.Licence;
+      case 'patient':
+      default:
+        return DemoType.Patient;
+    }
+  });
+
+  const demoOptions = computed<ViewerOptions>(() => {
+    switch (demoType.value) {
+      case DemoType.Licence:
+        return demoLicenceOptions.value;
+      case DemoType.Patient:
+        return demoPatientOptions.value;
+    }
+  });
+
+  function setIsDemo(payload: ViewerPayload) {
+    isDemo.value = payload.Url.startsWith('https://webgl-3dr.singular.health/demo');
+  }
+
+  return {
+    isDemo,
+    demoTitle,
+    demoSubtitles,
+    m_demoInfo,
+    m_demoEnableCloudStorage,
+    m_demoUpgradePlan,
+    m_demoPurchaseCredits,
+    profileDropdown,
+    notificationDropdown,
+    recentDropdown,
+    demoLicenceOptions,
+    demoPatientOptions,
+    demoType,
+    demoOptions,
+    setIsDemo
+  };
+});

package/src/stores/drawer.store.ts

@@ -0,0 +1,23 @@
+import { computed, ref } from 'vue';
+import { defineStore } from 'pinia';
+
+const DEFAULT_NAV_ITEM = 'home';
+
+export const useDrawerStore = defineStore('drawer', () => {
+  const _activeDrawer = ref<string>(DEFAULT_NAV_ITEM);
+
+  const activeDrawer = computed<string>({
+    get(): string {
+      return _activeDrawer.value;
+    },
+    set(value: string): void {
+      _activeDrawer.value = value || DEFAULT_NAV_ITEM;
+    }
+  });
+
+  const isOpen = computed(() => {
+    return !!activeDrawer.value && activeDrawer.value !== DEFAULT_NAV_ITEM;
+  });
+
+  return { activeDrawer, isOpen };
+});

package/src/stores/intro.store.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
+
+const DONT_SHOW_AGAIN_KEY = 'dontShowAgain';
+
+export const useIntroStore = defineStore('intro', () => {
+  // Backing ref is required for reactivity to work with localStorage
+  const _dontShowAgain = ref<boolean>(false);
+
+  const dontShowAgain = computed({
+    get(): boolean {
+      return _dontShowAgain.value;
+    },
+    set(value: boolean): void {
+      _dontShowAgain.value = value;
+      localStorage.setItem(DONT_SHOW_AGAIN_KEY, JSON.stringify(value));
+    }
+  });
+
+  onMounted(() => {
+    const value = localStorage.getItem(DONT_SHOW_AGAIN_KEY);
+    if (value !== null && value !== undefined) {
+      try {
+        _dontShowAgain.value = JSON.parse(value) as boolean;
+      } catch (error) {
+        console.error('Error parsing stored value:', error);
+        _dontShowAgain.value = false;
+      }
+    } else {
+      _dontShowAgain.value = false;
+    }
+  });
+
+  return { dontShowAgain };
+});

package/src/stores/language.store.ts

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia';
+import OtaClient from '@crowdin/ota-client';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { ISO_LANGUAGES } from '@/models/iso-languages';
+import { CountryNames } from '@3cr/viewer-types-ts';
+
+const otaClient = new OtaClient('b83ba68ca9ef508ae37a3f9gf2f');
+
+export const useLanguageStore = defineStore('language', () => {
+  const i18n = useI18n();
+
+  /**
+   * The preferred language inferred from the browser.
+   */
+  const preference = computed(() => {
+    return localStorage.getItem('lang') || navigator.languages?.[0] || navigator.language || 'en';
+  });
+
+  /**
+   * The currently selected language.
+   */
+  const language = ref<string>(preference.value);
+
+  /**
+   * If an OTA language is being loaded.
+   */
+  const loading = ref<boolean>(false);
+
+  /**
+   * Get all the supported language for this application.
+   */
+  async function getLanguages(): Promise<CountryNames[]> {
+    console.log(otaClient.listLanguages);
+    const supportedLanguages = await otaClient.listLanguages();
+    return supportedLanguages.map((code) => ({ ...ISO_LANGUAGES[code], code }));
+  }
+
+  watch(
+    language,
+    async (locale: string) => {
+      if (i18n.locale.value !== locale && !i18n.availableLocales.includes(locale)) {
+        loading.value = true;
+        const messages = await otaClient.getStringsByLocale(locale);
+        i18n.setLocaleMessage(locale, messages);
+        loading.value = false;
+      }
+
+      i18n.locale.value = locale;
+      axios.defaults.headers.common['Accept-Language'] = locale;
+      localStorage.setItem('lang', locale);
+      document.querySelector('html')?.setAttribute('lang', locale);
+    },
+    { immediate: true }
+  );
+
+  return { preference, language, loading, getLanguages };
+});

package/src/stores/mcad-floating.store.ts

@@ -0,0 +1,141 @@
+import { defineStore } from 'pinia';
+import { computed, nextTick, ref, watch } from 'vue';
+
+const resetSmoothAnimation = 300;
+const edgePx = 12;
+
+export enum FloatingState {
+  REGULAR = 'regular',
+  VERTICAL_SQUASH = 'vertical_squash',
+  HORIZONTAL_SQUASH = 'horizontal_squash'
+}
+
+export const useMcadFloatingStore = defineStore('mcad-floating', () => {
+  const x = ref(16);
+  const y = ref(16);
+
+  const state = ref<FloatingState>(FloatingState.REGULAR);
+  const smooth = ref<boolean>(false);
+  const isDragging = ref<boolean>(false);
+
+  addEventListener('resize', (event) => {
+    smoothXY(16, 16);
+  });
+
+  function smoothXY(newX: number, newY: number) {
+    smooth.value = true;
+    x.value = newX;
+    y.value = newY;
+    setTimeout(() => {
+      smooth.value = false;
+    }, resetSmoothAnimation);
+  }
+
+  function smoothDeltaX(newX: number) {
+    smooth.value = true;
+    x.value += newX;
+    setTimeout(() => {
+      smooth.value = false;
+    }, resetSmoothAnimation);
+  }
+
+  function smoothDeltaY(newY: number) {
+    smooth.value = true;
+    y.value += newY;
+    setTimeout(() => {
+      smooth.value = false;
+    }, resetSmoothAnimation);
+  }
+
+  const style = computed(() => {
+    return {
+      transform: 'translate(' + x.value + 'px, ' + y.value + 'px)',
+      transition: smooth.value ? `all ${resetSmoothAnimation}ms ease-in-out` : ''
+    };
+  });
+
+  function getDimensions() {
+    const self = document.getElementById('drag-set');
+    const parent = self?.parentElement;
+    const currentHeight = self?.clientHeight || 0;
+    const parentY = (parent?.clientHeight || 0) - currentHeight;
+
+    const currentWidth = self?.clientWidth || 0;
+    const parentX = (parent?.clientWidth || 0) - currentWidth;
+    return {
+      parentX,
+      parentY,
+      currentWidth,
+      currentHeight
+    };
+  }
+
+  // Update the edge state if sticky
+  function setEdge() {
+    const { parentX, parentY } = getDimensions();
+    console.log(x.value, edgePx, parentX, x.value <= edgePx, x.value >= parentX - edgePx);
+    if (x.value <= edgePx || x.value >= parentX - edgePx) {
+      state.value = FloatingState.VERTICAL_SQUASH;
+    } else if (y.value <= edgePx || y.value >= parentY - edgePx) {
+      state.value = FloatingState.HORIZONTAL_SQUASH;
+    } else {
+      state.value = FloatingState.REGULAR;
+    }
+  }
+
+  // Update the edge state if sticky
+  async function open() {
+    const { parentX, parentY } = getDimensions();
+
+    if (y.value >= parentY - edgePx) {
+      await nextTick();
+      smoothDeltaY(-(160 + 20));
+    }
+    if (x.value >= parentX - edgePx) {
+      await nextTick();
+      smoothDeltaX(-266);
+    }
+    if (y.value <= edgePx) {
+      await nextTick();
+      smoothDeltaY(20);
+    }
+    if (x.value <= edgePx) {
+      await nextTick();
+      smoothDeltaX(20);
+    }
+    setEdge();
+    await reposition();
+    setEdge();
+    const { currentHeight } = getDimensions();
+    if (y.value >= parentY - edgePx) {
+      await nextTick();
+      smoothDeltaY(-currentHeight);
+    }
+  }
+
+  // If changing the edge state moves the container out of edge, reposition
+  async function reposition() {
+    const { parentX, parentY, currentWidth, currentHeight } = getDimensions();
+    if (y.value >= parentY - edgePx) {
+      await nextTick();
+      const { currentHeight: latestHeight } = getDimensions();
+      smoothDeltaY(currentHeight - latestHeight);
+    }
+
+    if (x.value >= parentX - edgePx) {
+      await nextTick();
+      const { currentWidth: latestWidth } = getDimensions();
+      smoothDeltaX(currentWidth - latestWidth);
+    }
+  }
+
+  watch(isDragging, async (dragging) => {
+    if (!dragging) {
+      setEdge();
+      await reposition();
+      setEdge();
+    }
+  });
+
+  return { style, state, x, y, isDragging, open, setEdge };
+});

package/src/stores/mcad.store.ts

@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { CurrentMcadState, InitialMcadState } from '@3cr/types-ts';
+import { inflateInitialMcadObjectState } from '@/functions/modelHelper';
+import { parseDataOverlay } from '@/functions/parsers/parseDataOverlay';
+import { parseMcadEvent } from '@/functions/parsers/parseMcadEvent';
+import {
+  DataOverlayMcad,
+  DataOverlayMcadRaw,
+  McadObjectInteraction,
+  McadObjectInteractionRaw
+} from '@3cr/viewer-types-ts';
+
+function toMcad(data: DataOverlayMcadRaw): DataOverlayMcad {
+  return parseDataOverlay(data) as DataOverlayMcad;
+}
+
+function toMcadEvent(data: McadObjectInteractionRaw): McadObjectInteraction {
+  return parseMcadEvent(data);
+}
+
+export const useMcadStore = defineStore('mcad', () => {
+  const state = ref<InitialMcadState>(inflateInitialMcadObjectState());
+  const event = ref<McadObjectInteractionRaw | null>(null);
+  const sortBy = ref<{ key: string; order: 'asc' | 'desc' }[]>([{ key: 'title', order: 'asc' }]);
+
+  const mcads = computed(() => {
+    return state.value.Models.Models.map(toMcad);
+  });
+
+  const childKeys = computed(() => {
+    return mcads.value.map((x) => x.Children).flat();
+  });
+
+  const mcadEvent = computed(() => {
+    const value = event.value;
+    return value ? toMcadEvent(value) : null;
+  });
+
+  function setInitialMcadState(message: string): void {
+    state.value = JSON.parse(message) as InitialMcadState;
+  }
+
+  function setMcadState(message: string): void {
+    state.value = { Version: '1.1.0', Models: JSON.parse(message) as CurrentMcadState };
+  }
+
+  function setMcadEvent(message: string): void {
+    event.value = JSON.parse(message) as McadObjectInteractionRaw;
+  }
+
+  return { state, event, mcads, mcadEvent, setInitialMcadState, setMcadState, setMcadEvent, childKeys, sortBy };
+});

package/src/stores/save.store.ts

@@ -0,0 +1,59 @@
+import { computed, ref, watch } from 'vue';
+import { defineStore } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { SaveState } from '@3cr/viewer-types-ts';
+
+const stateTextTimeoutMs = 5000;
+
+let timeout: number | NodeJS.Timeout | undefined = undefined;
+
+export const useSaveStore = defineStore('saveState', () => {
+  const { t } = useI18n();
+
+  const state = ref<SaveState>(SaveState.SAVED_CLOUD);
+  const showText = ref<boolean>(true);
+
+  watch(
+    state,
+    () => {
+      clearTimeout(timeout);
+      showText.value = true;
+      timeout = setTimeout(() => {
+        showText.value = false;
+      }, stateTextTimeoutMs);
+    },
+    { immediate: true }
+  );
+
+  const text = computed(() => {
+    switch (state.value) {
+      case SaveState.SAVING:
+        return t('enums.saveState.saving');
+      case SaveState.SAVED_CLOUD:
+        return t('enums.saveState.savedCloud');
+      case SaveState.SAVED_TEMPORARY:
+        return t('enums.saveState.savedTemporary');
+      case SaveState.UNSAVED:
+        return t('enums.saveState.unsaved');
+      case SaveState.ERROR:
+        return t('enums.saveState.error');
+    }
+  });
+
+  const icon = computed(() => {
+    switch (state.value) {
+      case SaveState.SAVING:
+        return 'autorenew';
+      case SaveState.SAVED_CLOUD:
+        return 'cloud_done';
+      case SaveState.SAVED_TEMPORARY:
+        return 'sync_saved_locally';
+      case SaveState.UNSAVED:
+        return 'warning';
+      case SaveState.ERROR:
+        return 'error';
+    }
+  });
+
+  return { state, text, icon, showText };
+});

package/src/stores/theme.store.ts

@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia';
+import { readonly, ref, watch } from 'vue';
+import { useTheme } from 'vuetify';
+import { useMedia } from '@/composables/useMedia';
+import { Theme } from '@3cr/viewer-types-ts';
+const THEME_KEY = 'theme';
+export const useThemeStore = defineStore('theme', () => {
+  const themeInstance = useTheme();
+  const prefersLight = readonly(useMedia('(prefers-color-scheme: light)'));
+  const prefersDark = readonly(useMedia('(prefers-color-scheme: dark)'));
+
+  const theme = ref<Theme>(getLocalStorageTheme() ?? 'default');
+
+  /* istanbul ignore next -- @preserve */
+  watch(
+    [theme, prefersLight, prefersDark],
+    ([value]) => {
+      theme.value = value;
+      themeInstance.global.name.value = value !== 'default' ? value : getPreference();
+      localStorage.setItem(THEME_KEY, value);
+    },
+    { immediate: true }
+  );
+
+  /* istanbul ignore next -- @preserve */
+  function getLocalStorageTheme(): Theme | null {
+    const value = localStorage.getItem(THEME_KEY);
+    return value ? (value as Theme) : null;
+  }
+
+  /* v8 ignore start -- @preserve */
+  function getPreference(): Theme {
+    if (prefersLight.value) {
+      return 'light';
+    } else if (prefersDark.value) {
+      return 'dark';
+    } else {
+      // if no preference, default to light
+      return 'light';
+    }
+  }
+  /* v8 ignore stop -- @preserve */
+
+  return { theme, prefersLight, prefersDark };
+});