@code-coaching/vuetiful 0.23.2 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.23.2",
+  "version": "0.24.0",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/components/atoms/VLightSwitch.test.ts

@@ -1,20 +1,69 @@
 import { mount } from '@vue/test-utils';
-import { expect, test, vi } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
+import { ref } from 'vue';
 import { VLightSwitch } from '.';
-import { useDarkMode } from '@/services';
 
-const { MODE } = useDarkMode();
+const applyMode = vi.fn();
+const chosenMode = ref('dark');
+const MODE = {
+  LIGHT: 'light',
+  DARK: 'dark',
+};
+vi.mock('../../services/dark-mode.service', () => ({
+  useDarkMode: () => ({
+    applyMode,
+    chosenMode,
+    MODE,
+  }),
+}));
 
-const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
+describe('VLightSwitch', () => {
+  test('toggle dark to light', async () => {
+    const wrapper = mount(VLightSwitch);
+    await wrapper.trigger('click');
+    expect(applyMode).toHaveBeenCalledWith(MODE.LIGHT);
+  });
 
-test('VLightSwitch', () => {
-  expect(VLightSwitch).toBeTruthy();
-});
+  test('toggle light to dark', async () => {
+    chosenMode.value = 'light';
+    const wrapper = mount(VLightSwitch);
+    await wrapper.trigger('click');
+    expect(applyMode).toHaveBeenCalledWith(MODE.DARK);
+  });
+
+  test('svg dark/light', async () => {
+    chosenMode.value = MODE.DARK;
+    const wrapper = mount(VLightSwitch);
+    const path = wrapper.find('path');
+    expect(path.attributes().d).toBe(wrapper.vm.svgPath.moon);
+
+    chosenMode.value = MODE.LIGHT;
+    await wrapper.vm.$nextTick();
+    expect(path.attributes().d).toBe(wrapper.vm.svgPath.sun);
+  });
+
+  test('keydown Enter', async () => {
+    const wrapper = mount(VLightSwitch);
+    const preventDefaultSpy = vi.fn();
+    const event = { code: 'Enter', preventDefault: preventDefaultSpy };
+    await wrapper.trigger('keydown', event);
+    expect(applyMode).toHaveBeenCalledWith(MODE.LIGHT);
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
 
-// TODO: add tests
-test('VLightSwitch using slot', () => {
-  window.matchMedia = matchMediaMock(MODE.LIGHT) as any;
-  const wrapper = mount(VLightSwitch);
+  test('keydown Space', async () => {
+    const wrapper = mount(VLightSwitch);
+    const preventDefaultSpy = vi.fn();
+    const event = { code: 'Space', preventDefault: preventDefaultSpy };
+    await wrapper.trigger('keydown', event);
+    expect(applyMode).toHaveBeenCalledWith(MODE.LIGHT);
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
 
-  expect(wrapper).toBeTruthy();
+  test('keydown other', async () => {
+    applyMode.mockClear();
+    const wrapper = mount(VLightSwitch);
+    await wrapper.trigger('keydown', { key: 'a' });
+    expect(applyMode).not.toHaveBeenCalled();
+  });
 });

package/src/components/atoms/VLightSwitch.vue

@@ -3,12 +3,10 @@
     :class="`lightswitch-track ${classesTrack}`"
     @click="onToggleHandler"
     @keydown="onKeyDown"
-    on:keyup
-    on:keypress
     role="switch"
     aria-label="Light Switch"
-    :aria-checked="currentMode"
-    :title="`Toggle ${currentMode === false ? 'Dark' : 'Light'} Mode`"
+    :aria-checked="chosenMode === MODE.LIGHT"
+    :title="`Toggle ${chosenMode === MODE.DARK ? 'Dark' : 'Light'} Mode`"
     tabindex="0"
   >
     <div :class="`lightswitch-thumb ${classesThumb}`">
@@ -17,7 +15,7 @@
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 512 512"
       >
-        <path fill="currentColor" :d="currentMode ? svgPath.sun : svgPath.moon" />
+        <path fill="currentColor" :d="chosenMode === MODE.LIGHT  ? svgPath.sun : svgPath.moon" />
       </svg>
     </div>
   </div>
@@ -25,7 +23,7 @@
 
 <script lang="ts">
 import { CssClasses, useDarkMode } from '@/index';
-import { computed, ComputedRef, defineComponent, onMounted } from 'vue';
+import { ComputedRef, computed, defineComponent } from 'vue';
 
 export default defineComponent({
   props: {
@@ -63,11 +61,7 @@ export default defineComponent({
     },
   },
   setup(props, { attrs }) {
-    const { initializeMode, setModeCurrent, setModeUserPrefers, currentMode, MODE } = useDarkMode();
-
-    onMounted(() => {
-      initializeMode();
-    });
+    const { applyMode, chosenMode, MODE } = useDarkMode();
 
     const cTransition = `transition-all duration-[200ms]`;
     const cTrack = 'cursor-pointer';
@@ -80,9 +74,8 @@ export default defineComponent({
     };
 
     const onToggleHandler = () => {
-      const toggle = !currentMode.value;
-      setModeUserPrefers(toggle);
-      setModeCurrent(toggle);
+      const toggle = chosenMode.value === MODE.LIGHT ? MODE.DARK : MODE.LIGHT;
+      applyMode(toggle);
     };
 
     type OnKeyDownEvent = KeyboardEvent & {
@@ -95,11 +88,11 @@ export default defineComponent({
       }
     };
 
-    const trackBg = computed(() => (currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark));
-    const thumbBg = computed(() => (currentMode.value === MODE.LIGHT ? props.bgDark : props.bgLight));
-    const thumbPosition = computed(() => (currentMode.value === MODE.LIGHT ? 'translate-x-[100%]' : ''));
+    const trackBg = computed(() => (chosenMode.value === MODE.LIGHT ? props.bgLight : props.bgDark));
+    const thumbBg = computed(() => (chosenMode.value === MODE.LIGHT ? props.bgDark : props.bgLight));
+    const thumbPosition = computed(() => (chosenMode.value === MODE.LIGHT ? 'translate-x-[100%]' : ''));
     const iconFill = computed(() => {
-      return currentMode.value === MODE.LIGHT ? props.textLight : props.textDark;
+      return chosenMode.value === MODE.LIGHT ? props.textLight : props.textDark;
     });
 
     const classesTrack: ComputedRef<string> = computed(() => {
@@ -119,8 +112,9 @@ export default defineComponent({
       svgPath,
       onToggleHandler,
       onKeyDown,
-      currentMode,
+      chosenMode,
       iconFill,
+      MODE,
     };
   },
 });

package/src/components/molecules/VTabs/VTab.test.ts

@@ -119,4 +119,25 @@ describe('VTab', () => {
       'py-2',
     ]);
   });
+
+  test('unstyled', async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs>
+            <template v-slot="tabs">
+              <v-tab unstyled data-test="vuetiful">Vuetiful</v-tab>
+            </template>
+          </v-tabs>
+        `,
+      components: {
+        'v-tabs': VTabs,
+        'v-tab': VTab,
+      },
+    });
+
+    const vuetiful = wrapper.find("[data-test='vuetiful']");
+    const slotContainer = vuetiful.find("[data-test='slot-container']");
+    expect(vuetiful.classes()).toEqual(['vuetiful-tab', 'flex', 'flex-col']);
+    expect(slotContainer.classes()).not.toContain('rounded-token');
+  });
 });

package/src/directives/clipboard.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, vi, test } from 'vitest';
 import { DirectiveBinding } from 'vue';
 import { vClipboard } from '.';
 
@@ -13,7 +13,7 @@ describe('clipboard', () => {
     vi.resetAllMocks();
   });
   describe('given the v-clipboard directive is used', () => {
-    it('should copy text to the clipboard on click', () => {
+    test('should copy text to the clipboard on click', () => {
       window.navigator = navigatorMock;
 
       const el = document.createElement('div');

package/src/services/dark-mode.service.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, vi, test } from 'vitest';
 
 const localStorageMock = {
   getItem: vi.fn(),
@@ -10,247 +10,95 @@ describe('useDarkMode', () => {
   afterEach(() => {
     vi.resetModules();
   });
-  describe('getModeUserPrefers', () => {
-    describe('given not in browser', () => {
-      it('should return default modeUserPrefers', async () => {
-        const platform = await import('../utils/platform/platform.service');
-        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-          isBrowser: false,
-        });
 
-        const { useDarkMode } = await import('./dark-mode.service');
-        const { getModeUserPrefers } = useDarkMode();
-        expect(getModeUserPrefers()).toBe(undefined);
-      });
-    });
-
-    describe('given in browser', () => {
-      describe('given no modeUserPrefers in localStorage', () => {
-        it('should return default modeUserPrefers', async () => {
-          const platform = await import('../utils/platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useDarkMode } = await import('./dark-mode.service');
-          const { getModeUserPrefers } = useDarkMode();
-
-          window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce(null);
-
-          expect(getModeUserPrefers()).toBe(undefined);
-        });
-      });
-      describe('given modeUserPrefers in localStorage', () => {
-        it('should return the value', async () => {
-          const platform = await import('../utils/platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useDarkMode } = await import('./dark-mode.service');
-          const { getModeUserPrefers } = useDarkMode();
-
-          window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce('true');
-
-          expect(getModeUserPrefers()).toBe(true);
-        });
-      });
-    });
-  });
-
-  describe('getModeOsPrefers', () => {
-    describe('given not in browser', () => {
-      it('should return default modeOsPrefers', async () => {
-        const platform = await import('../utils/platform/platform.service');
-        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-          isBrowser: false,
-        });
+  describe('applyMode', () => {
+    test('light mode set', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const { applyMode, chosenMode, MODE } = useDarkMode();
 
-        const { useDarkMode } = await import('./dark-mode.service');
-        const { getModeOsPrefers } = useDarkMode();
-        expect(getModeOsPrefers()).toBe(false);
-      });
+      applyMode(MODE.LIGHT);
+      expect(chosenMode.value).toBe(MODE.LIGHT);
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
     });
+    test('dark mode set', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const { applyMode, chosenMode, MODE } = useDarkMode();
 
-    describe('given in browser', () => {
-      describe('given prefers-color-scheme: light', () => {
-        it('should return true', async () => {
-          const platform = await import('../utils/platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-          const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
-
-          const { useDarkMode } = await import('./dark-mode.service');
-          const { getModeOsPrefers, MODE } = useDarkMode();
-
-          window.matchMedia = matchMediaMock(MODE.LIGHT) as any;
-          expect(getModeOsPrefers()).toBe(MODE.LIGHT);
-          expect(localStorageSpy).toHaveBeenCalledWith('modeOsPrefers', 'true');
-        });
-      });
-      describe('given prefers-color-scheme: dark', () => {
-        it('should return false', async () => {
-          const platform = await import('../utils/platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-          const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
-
-          const { useDarkMode } = await import('./dark-mode.service');
-          const { getModeOsPrefers, MODE } = useDarkMode();
-
-          window.matchMedia = matchMediaMock(MODE.DARK) as any;
-          expect(getModeOsPrefers()).toBe(MODE.DARK);
-          expect(localStorageSpy).toHaveBeenCalledWith('modeOsPrefers', 'false');
-        });
-      });
+      applyMode(MODE.DARK);
+      expect(chosenMode.value).toBe(MODE.DARK);
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
     });
   });
 
-  describe('getModeAutoPrefers', () => {
-    describe('given not in browser', () => {
-      it('should return default modeAutoPrefers', async () => {
-        const platform = await import('../utils/platform/platform.service');
-        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-          isBrowser: false,
-        });
-
+  describe('autoModeWatcher', () => {
+    describe('given mode changes', () => {
+      test('should set modeCurrent', async () => {
         const { useDarkMode } = await import('./dark-mode.service');
-        const { getModeAutoPrefers } = useDarkMode();
-        expect(getModeAutoPrefers()).toBe(false);
-      });
-    });
-
-    describe('given in browser', () => {
-      describe('given no modeUserPrefers in localStorage', () => {
-        it('should return default modeAutoPrefers', async () => {
-          const platform = await import('../utils/platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
-
-          const { useDarkMode } = await import('./dark-mode.service');
-          const { getModeAutoPrefers } = useDarkMode();
-
-          window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce(null);
+        const darkMode = useDarkMode();
 
-          expect(getModeAutoPrefers()).toBe(false);
-        });
-      });
-      describe('given modeUserPrefers in localStorage', () => {
-        it('should return the value', async () => {
-          const platform = await import('../utils/platform/platform.service');
-          vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-            isBrowser: true,
-          });
+        const mql = {
+          matches: true,
+          onchange: () => {
+            const mode = mql.matches ? darkMode.MODE.LIGHT : darkMode.MODE.DARK;
+            darkMode.applyMode(mode);
+          },
+        };
+        vi.spyOn(window, 'matchMedia').mockReturnValueOnce(mql as any);
 
-          const { useDarkMode } = await import('./dark-mode.service');
-          const { getModeAutoPrefers } = useDarkMode();
+        darkMode.autoModeWatcher();
 
-          window.localStorage = localStorageMock as any;
-          vi.spyOn(window.localStorage, 'getItem').mockReturnValueOnce('true');
+        mql.matches = false;
+        mql.onchange?.();
+        expect(darkMode.chosenMode.value).toBe('dark');
 
-          expect(getModeAutoPrefers()).toBe(true);
-        });
+        mql.matches = true;
+        mql.onchange?.();
+        expect(darkMode.chosenMode.value).toBe('light');
       });
     });
   });
 
-  describe('setModeUserPrefers', () => {
-    describe('given not in browser', () => {
-      it('should set modeUserPrefers', async () => {
-        const platform = await import('../utils/platform/platform.service');
-        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-          isBrowser: false,
-        });
-        vi.spyOn(window.localStorage, 'setItem');
-
-        const { useDarkMode } = await import('./dark-mode.service');
-        const { setModeUserPrefers, modeUserPrefers } = useDarkMode();
-
-        setModeUserPrefers(true);
-        expect(modeUserPrefers.value).toBe(true);
-        expect(window.localStorage.setItem).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('given in browser', () => {
-      it('should set modeUserPrefers and localStorage', async () => {
-        const platform = await import('../utils/platform/platform.service');
-        vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
-          isBrowser: true,
-        });
-
-        const { useDarkMode } = await import('./dark-mode.service');
-        const { setModeUserPrefers, modeUserPrefers } = useDarkMode();
-
-        const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
+  describe('applyModeSSR', () => {
+    test('should add dark class to html tag', async () => {
+      const { useDarkMode } = await import('./dark-mode.service');
+      const darkMode = useDarkMode();
 
-        setModeUserPrefers(true);
-        expect(modeUserPrefers.value).toBe(true);
-        expect(localStorageSpy).toHaveBeenCalledWith('modeUserPrefers', 'true');
-      });
+      const html = '<html>';
+      const mode = darkMode.MODE.DARK;
+      const result = darkMode.applyModeSSR(html, mode);
+      expect(result).toBe('<html class="dark">');
     });
   });
 
-  describe('setModeCurrent', () => {
-    it('light mode set', async () => {
+  describe('getModeFromCookie', () => {
+    test('should return default mode if cookie is not set', async () => {
       const { useDarkMode } = await import('./dark-mode.service');
-      const { setModeCurrent, currentMode, MODE } = useDarkMode();
+      const darkMode = useDarkMode();
 
-      setModeCurrent(MODE.LIGHT);
-      expect(currentMode.value).toBe(MODE.LIGHT);
-      expect(document.documentElement.classList.contains('dark')).toBe(false);
+      const cookies = '';
+      const result = darkMode.getModeFromCookie(cookies);
+      expect(result).toBe('dark');
     });
-    it('dark mode set', async () => {
+    test('should return mode from cookie', async () => {
       const { useDarkMode } = await import('./dark-mode.service');
-      const { setModeCurrent, currentMode, MODE } = useDarkMode();
+      const darkMode = useDarkMode();
 
-      setModeCurrent(MODE.DARK);
-      expect(currentMode.value).toBe(MODE.DARK);
-      expect(document.documentElement.classList.contains('dark')).toBe(true);
+      const cookies = 'vuetiful-mode=light';
+      const result = darkMode.getModeFromCookie(cookies);
+      expect(result).toBe('light');
     });
   });
 
   describe('initializeMode', () => {
-    it('should set currentMode', async () => {
+    test('should set mode from cookie', async () => {
       const { useDarkMode } = await import('./dark-mode.service');
-      const { initializeMode, currentMode, getModeAutoPrefers } = useDarkMode();
+      const darkMode = useDarkMode();
 
-      const mode = getModeAutoPrefers();
-      initializeMode();
-      expect(currentMode.value).toBe(mode);
-    });
-  });
+      const cookies = 'vuetiful-mode=dark';
+      vi.spyOn(document, 'cookie', 'get').mockReturnValueOnce(cookies);
 
-  describe('autoModeWatcher', () => {
-    describe('given mode changes', () => {
-      it('should set modeCurrent', async () => {
-        const { useDarkMode } = await import('./dark-mode.service');
-        const darkMode = useDarkMode();
-
-        const mql = {
-          matches: true,
-          onchange: () => {
-            darkMode.setModeCurrent(mql.matches);
-          },
-        };
-        vi.spyOn(window, 'matchMedia').mockReturnValueOnce(mql as any);
-
-        darkMode.autoModeWatcher();
-
-        mql.matches = false;
-        mql.onchange?.();
-        expect(darkMode.currentMode.value).toBe(false);
-
-        mql.matches = true;
-        mql.onchange?.();
-        expect(darkMode.currentMode.value).toBe(true);
-      });
+      darkMode.initializeMode();
+      expect(darkMode.chosenMode.value).toBe('dark');
     });
   });
 });

package/src/services/dark-mode.service.ts

@@ -1,64 +1,48 @@
-import { computed, readonly, Ref, ref } from 'vue';
+import { computed, readonly, ref } from 'vue';
 import { usePlatform } from '../utils/platform/platform.service';
 
 const { isBrowser } = usePlatform();
 
 const MODE = {
-  LIGHT: true,
-  DARK: false,
+  LIGHT: 'light',
+  DARK: 'dark',
 };
+export type Mode = (typeof MODE)[keyof typeof MODE];
 
-const modeOsPrefers = ref(MODE.DARK);
-const currentMode = ref(MODE.DARK);
-const modeUserPrefers: Ref<boolean | undefined> = ref(undefined);
-const isDark = computed(() => currentMode.value === MODE.DARK);
+const defaultMode = MODE.DARK;
+const chosenMode = ref(defaultMode);
+const isDark = computed(() => chosenMode.value === MODE.DARK);
 
 const useDarkMode = () => {
-  const getModeOsPrefers = (): boolean => {
-    let prefersLightMode = false;
-    if (isBrowser) prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
-    setModeOsPrefers(prefersLightMode);
-    return prefersLightMode;
-  };
-
-  const getModeUserPrefers = (): boolean | undefined => {
-    if (isBrowser) {
-      const mode = localStorage.getItem('modeUserPrefers');
-      if (mode !== null) modeUserPrefers.value = mode === 'true';
+  const getModeFromCookie = (cookies: string) => {
+    const cookie = cookies.split(';').find((c) => c.trim().startsWith('vuetiful-mode='));
+    if (cookie) {
+      const value = cookie.split('=')[1];
+      return value;
     }
-    return modeUserPrefers.value;
+    return defaultMode;
   };
 
-  const getModeAutoPrefers = (): boolean => {
-    const os = getModeOsPrefers();
-    const user = getModeUserPrefers();
-    if (user === undefined) return os;
-    return user;
+  const applyModeSSR = (html: string, mode: Mode): string => {
+    if (mode === MODE.DARK) html = html.replace('<html', '<html class="dark"');
+    return html;
   };
 
-  const setModeOsPrefers = (value: boolean) => {
-    modeOsPrefers.value = value;
-    if (isBrowser) {
-      localStorage.setItem('modeOsPrefers', value.toString());
-    }
-  };
-  const setModeUserPrefers = (value: boolean): void => {
-    modeUserPrefers.value = value;
+  const initializeMode = () => {
     if (isBrowser) {
-      localStorage.setItem('modeUserPrefers', value.toString());
+      const mode = getModeFromCookie(document.cookie);
+      applyMode(mode);
     }
   };
 
-  const setModeCurrent = (value: boolean) => {
+  const applyMode = (value: Mode) => {
     const elemHtmlClasses = document.documentElement.classList;
     const classDark = 'dark';
     value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-    currentMode.value = value;
-  };
-
-  const initializeMode = (): void => {
-    const mode = getModeAutoPrefers();
-    setModeCurrent(mode);
+    if (isBrowser) {
+      document.cookie = `vuetiful-mode=${value};path=/;max-age=31536000;SameSite=Lax`;
+    }
+    chosenMode.value = value;
   };
 
   const autoModeWatcher = (): void => {
@@ -66,8 +50,9 @@ const useDarkMode = () => {
     const setMode = (value: boolean) => {
       const elemHtmlClasses = document.documentElement.classList;
       const classDark = `dark`;
-      value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-      setModeCurrent(value);
+      const mode = value ? MODE.LIGHT : MODE.DARK;
+      mode === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+      applyMode(mode);
     };
     setMode(mql.matches);
     mql.onchange = () => {
@@ -76,17 +61,13 @@ const useDarkMode = () => {
   };
 
   return {
-    modeOsPrefers: readonly(modeOsPrefers),
-    modeUserPrefers: readonly(modeUserPrefers),
-    currentMode: readonly(currentMode),
+    chosenMode,
     isDark: readonly(isDark),
-    getModeOsPrefers,
-    getModeUserPrefers,
-    getModeAutoPrefers,
-    setModeUserPrefers,
-    setModeCurrent,
-    autoModeWatcher,
     initializeMode,
+    applyMode,
+    autoModeWatcher,
+    applyModeSSR,
+    getModeFromCookie,
     MODE,
   };
 };