origam 2.3.0 → 2.6.1

package/dist/src/composables/Theme/installed-themes.composable.d.ts

@@ -0,0 +1,19 @@
+import type { TInstalledThemes } from '../../types';
+/**
+ * `useInstalledThemes()` returns the list of brand themes installed via
+ * `createOrigam({ themes })` — one entry per distinct brand `name`, each
+ * listing the concrete modes it was installed for.
+ *
+ * Consumers (e.g. a theme switcher) map over this list instead of hard-coding
+ * the available brands, so the UI stays in sync with whatever the app
+ * installed. Returns an empty array when no themes were installed (or when
+ * called outside an app that ran `createOrigam`), so callers never need a
+ * null-guard.
+ *
+ * The list is static (snapshot at install time); pair it with `useTheme()` to
+ * read / switch the active brand and mode.
+ */
+/*********************************************************
+ * useInstalledThemes
+ ********************************************************/
+export declare function useInstalledThemes(): TInstalledThemes;

package/dist/src/composables/Theme/installed-themes.composable.js

@@ -0,0 +1,5 @@
+import { inject } from "vue";
+import { ORIGAM_THEMES_KEY } from "../../consts/index.js";
+export function useInstalledThemes() {
+  return inject(ORIGAM_THEMES_KEY, []);
+}

package/dist/src/composables/Theme/theme.composable.cjs

@@ -3,17 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports._resetThemeForTesting = _resetThemeForTesting;
+exports.applyModeSync = applyModeSync;
 exports.applyThemeSync = applyThemeSync;
+exports.readPersistedMode = readPersistedMode;
 exports.readPersistedTheme = readPersistedTheme;
 exports.useTheme = useTheme;
 var _vue = require("vue");
-const STORAGE_KEY = "origam-theme";
-const ATTR = "data-theme";
+var _theme2 = require("../../consts/Theme/theme.const.cjs");
 let _theme = null;
+let _mode = null;
+let _systemPrefersDark = null;
+let _mediaInitDone = false;
+function ensureSystemPreference() {
+  if (_systemPrefersDark === null) {
+    _systemPrefersDark = (0, _vue.ref)(false);
+  }
+  if (_mediaInitDone || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return _systemPrefersDark;
+  }
+  _mediaInitDone = true;
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  _systemPrefersDark.value = mq.matches;
+  mq.addEventListener?.("change", e => {
+    if (_systemPrefersDark) _systemPrefersDark.value = e.matches;
+  });
+  return _systemPrefersDark;
+}
 function readPersisted() {
   if (typeof window === "undefined") return "auto";
   try {
-    const v = window.localStorage?.getItem(STORAGE_KEY);
+    const v = window.localStorage?.getItem(_theme2.ORIGAM_THEME_STORAGE_KEY);
     if (v === "auto" || v === "light" || v === "dark") return v;
     if (v && typeof v === "string") return v;
   } catch {}
@@ -22,62 +42,112 @@ function readPersisted() {
 function writePersisted(theme) {
   if (typeof window === "undefined") return;
   try {
-    window.localStorage?.setItem(STORAGE_KEY, theme);
+    window.localStorage?.setItem(_theme2.ORIGAM_THEME_STORAGE_KEY, theme);
   } catch {}
 }
 function applyToDocument(theme) {
   if (typeof document === "undefined") return;
   if (theme === "auto") {
-    document.documentElement.removeAttribute(ATTR);
+    document.documentElement.removeAttribute(_theme2.ORIGAM_THEME_ATTR);
   } else {
-    document.documentElement.setAttribute(ATTR, theme);
+    document.documentElement.setAttribute(_theme2.ORIGAM_THEME_ATTR, theme);
   }
 }
+function readPersistedModeValue() {
+  if (typeof window === "undefined") return "auto";
+  try {
+    const v = window.localStorage?.getItem(_theme2.ORIGAM_MODE_STORAGE_KEY);
+    if (v === "auto" || v === "light" || v === "dark") return v;
+  } catch {}
+  return "auto";
+}
+function writePersistedMode(mode) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage?.setItem(_theme2.ORIGAM_MODE_STORAGE_KEY, mode);
+  } catch {}
+}
+function applyModeToDocument(resolvedMode) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(_theme2.ORIGAM_MODE_ATTR, resolvedMode);
+}
 function useTheme() {
   if (_theme === null) {
     _theme = (0, _vue.ref)(readPersisted());
   }
+  if (_mode === null) {
+    _mode = (0, _vue.ref)(readPersistedModeValue());
+  }
   const theme = _theme;
-  const systemPrefersDark = (0, _vue.ref)(false);
+  const mode = _mode;
+  const systemPrefersDark = ensureSystemPreference();
   const resolved = (0, _vue.computed)(() => {
     if (theme.value === "auto") return systemPrefersDark.value ? "dark" : "light";
     return theme.value === "dark" ? "dark" : "light";
   });
-  let mediaQuery = null;
-  const onSystemChange = e => {
-    systemPrefersDark.value = e.matches;
-  };
-  (0, _vue.onMounted)(() => {
-    if (typeof window === "undefined") return;
-    mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    systemPrefersDark.value = mediaQuery.matches;
-    mediaQuery.addEventListener?.("change", onSystemChange);
-    applyToDocument(theme.value);
-  });
-  (0, _vue.onUnmounted)(() => {
-    mediaQuery?.removeEventListener?.("change", onSystemChange);
+  const resolvedMode = (0, _vue.computed)(() => {
+    if (mode.value === "auto") return systemPrefersDark.value ? "dark" : "light";
+    return mode.value;
   });
   (0, _vue.watch)(theme, next => {
     applyToDocument(next);
     writePersisted(next);
+  }, {
+    immediate: true
+  });
+  (0, _vue.watch)(resolvedMode, next => {
+    applyModeToDocument(next);
+  }, {
+    immediate: true
+  });
+  (0, _vue.watch)(mode, next => {
+    writePersistedMode(next);
   });
   function setTheme(next) {
     theme.value = next;
   }
+  function setMode(next) {
+    mode.value = next;
+  }
   function toggle() {
     const effective = resolved.value;
     theme.value = effective === "dark" ? "light" : "dark";
   }
+  function toggleMode() {
+    const effective = resolvedMode.value;
+    mode.value = effective === "dark" ? "light" : "dark";
+  }
   return {
     theme: (0, _vue.readonly)(theme),
     resolved: (0, _vue.readonly)(resolved),
     setTheme,
-    toggle
+    toggle,
+    mode: (0, _vue.readonly)(mode),
+    resolvedMode: (0, _vue.readonly)(resolvedMode),
+    setMode,
+    toggleMode
   };
 }
 function applyThemeSync(theme) {
   applyToDocument(theme);
 }
+function applyModeSync(mode) {
+  if (mode === "light" || mode === "dark") {
+    applyModeToDocument(mode);
+    return;
+  }
+  const prefersDark = ensureSystemPreference().value;
+  applyModeToDocument(prefersDark ? "dark" : "light");
+}
 function readPersistedTheme() {
   return readPersisted();
+}
+function readPersistedMode() {
+  return readPersistedModeValue();
+}
+function _resetThemeForTesting() {
+  _theme = null;
+  _mode = null;
+  _systemPrefersDark = null;
+  _mediaInitDone = false;
 }

package/dist/src/composables/Theme/theme.composable.d.ts

@@ -1,17 +1,30 @@
 import type { Ref } from 'vue';
-import type { TTheme, TThemeResolved } from '../../types';
+import type { TMode, TModeResolved, TTheme, TThemeResolved } from '../../types/Theme/theme.type';
 /**
- * `useTheme()` returns a shared, reactive theme handle.
+ * `useTheme()` returns a shared, reactive handle over the two theming axes.
  *
- * - `theme` (read-only ref): the current setting — `'auto' | 'light' | 'dark' | string`.
+ * ### Brand axis (`theme` / `data-theme`)
+ * - `theme` (read-only ref): the current brand — `'auto' | 'light' | 'dark' | string`.
  * - `setTheme(t)`: imperative setter. Persists to `localStorage` and applies
  *   `data-theme` to `<html>`.
  * - `resolved` (computed): the effective theme after resolving `'auto'`
  *   against `prefers-color-scheme`. Useful for SVG asset switching.
- * - `toggle()`: convenience to flip light ↔ dark (treats `'auto'` as light).
+ * - `toggle()`: convenience to flip the brand light ↔ dark (treats `'auto'`
+ *   as light). Kept for back-compat with the single-axis API.
  *
- * The composable does NOT auto-mount a media-query listener at import time
- * (SSR safety). It does so on `onMounted` and cleans up on `onUnmounted`.
+ * ### Mode axis (`mode` / `data-mode`)
+ * - `mode` (read-only ref): the current color mode — `'auto' | 'light' | 'dark'`.
+ * - `setMode(m)`: imperative setter. Persists to `localStorage` and applies
+ *   `data-mode` to `<html>`.
+ * - `resolvedMode` (computed): the effective mode after resolving `'auto'`
+ *   against `prefers-color-scheme`.
+ * - `toggleMode()`: flip the color mode light ↔ dark (treats `'auto'` as the
+ *   current system preference).
+ *
+ * The media-query listener is a lazily-initialised SINGLETON (see
+ * `ensureSystemPreference`) rather than an `onMounted` hook, so `resolvedMode`
+ * is correct even when `useTheme()` is first called outside a component (e.g.
+ * a Nuxt plugin). SSR stays safe — the init is a no-op without `window`.
  */
 /*********************************************************
  * useTheme
@@ -21,20 +34,52 @@ export declare function useTheme(): {
     resolved: Readonly<Ref<TThemeResolved, TThemeResolved>>;
     setTheme: (next: TTheme) => void;
     toggle: () => void;
+    mode: Readonly<Ref<TMode, TMode>>;
+    resolvedMode: Readonly<Ref<TModeResolved, TModeResolved>>;
+    setMode: (next: TMode) => void;
+    toggleMode: () => void;
 };
 /**
- * Internal helper for SSR / no-flash plugins: apply a theme to the document
- * synchronously (called BEFORE first render). Bypasses Vue reactivity.
+ * Internal helper for SSR / no-flash plugins: apply a theme (brand) to the
+ * document synchronously (called BEFORE first render). Bypasses Vue reactivity.
  */
 /*********************************************************
  * applyThemeSync
  ********************************************************/
 export declare function applyThemeSync(theme: TTheme): void;
 /**
- * Internal helper for SSR / no-flash plugins: read the persisted theme from
- * localStorage without instantiating the composable.
+ * Internal helper for SSR / no-flash plugins: apply a CONCRETE mode to the
+ * document synchronously. Bypasses Vue reactivity. An `'auto'` argument is
+ * resolved against the current `prefers-color-scheme` (falling back to
+ * `'light'` when unavailable) so `data-mode` always ends up concrete — the
+ * token matrix has no mode-less fallback.
+ */
+/*********************************************************
+ * applyModeSync
+ ********************************************************/
+export declare function applyModeSync(mode: TMode): void;
+/**
+ * Internal helper for SSR / no-flash plugins: read the persisted theme (brand)
+ * from localStorage without instantiating the composable.
  */
 /*********************************************************
  * readPersistedTheme
  ********************************************************/
 export declare function readPersistedTheme(): TTheme;
+/**
+ * Internal helper for SSR / no-flash plugins: read the persisted mode from
+ * localStorage without instantiating the composable.
+ */
+/*********************************************************
+ * readPersistedMode
+ ********************************************************/
+export declare function readPersistedMode(): TMode;
+/**
+ * Test-only: clear the module-level singletons (theme / mode refs and the
+ * `prefers-color-scheme` cache) so each spec starts from a clean slate. Not
+ * part of the public API.
+ */
+/*********************************************************
+ * _resetThemeForTesting
+ ********************************************************/
+export declare function _resetThemeForTesting(): void;

package/dist/src/composables/Theme/theme.composable.js

@@ -1,7 +1,29 @@
-import { computed, onMounted, onUnmounted, readonly, ref, watch } from "vue";
-const STORAGE_KEY = "origam-theme";
-const ATTR = "data-theme";
+import { computed, readonly, ref, watch } from "vue";
+import {
+  ORIGAM_MODE_ATTR as MODE_ATTR,
+  ORIGAM_MODE_STORAGE_KEY as MODE_STORAGE_KEY,
+  ORIGAM_THEME_ATTR as ATTR,
+  ORIGAM_THEME_STORAGE_KEY as STORAGE_KEY
+} from "../../consts/Theme/theme.const.js";
 let _theme = null;
+let _mode = null;
+let _systemPrefersDark = null;
+let _mediaInitDone = false;
+function ensureSystemPreference() {
+  if (_systemPrefersDark === null) {
+    _systemPrefersDark = ref(false);
+  }
+  if (_mediaInitDone || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return _systemPrefersDark;
+  }
+  _mediaInitDone = true;
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  _systemPrefersDark.value = mq.matches;
+  mq.addEventListener?.("change", (e) => {
+    if (_systemPrefersDark) _systemPrefersDark.value = e.matches;
+  });
+  return _systemPrefersDark;
+}
 function readPersisted() {
   if (typeof window === "undefined") return "auto";
   try {
@@ -27,51 +49,99 @@ function applyToDocument(theme) {
     document.documentElement.setAttribute(ATTR, theme);
   }
 }
+function readPersistedModeValue() {
+  if (typeof window === "undefined") return "auto";
+  try {
+    const v = window.localStorage?.getItem(MODE_STORAGE_KEY);
+    if (v === "auto" || v === "light" || v === "dark") return v;
+  } catch {
+  }
+  return "auto";
+}
+function writePersistedMode(mode) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage?.setItem(MODE_STORAGE_KEY, mode);
+  } catch {
+  }
+}
+function applyModeToDocument(resolvedMode) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(MODE_ATTR, resolvedMode);
+}
 export function useTheme() {
   if (_theme === null) {
     _theme = ref(readPersisted());
   }
+  if (_mode === null) {
+    _mode = ref(readPersistedModeValue());
+  }
   const theme = _theme;
-  const systemPrefersDark = ref(false);
+  const mode = _mode;
+  const systemPrefersDark = ensureSystemPreference();
   const resolved = computed(() => {
     if (theme.value === "auto") return systemPrefersDark.value ? "dark" : "light";
     return theme.value === "dark" ? "dark" : "light";
   });
-  let mediaQuery = null;
-  const onSystemChange = (e) => {
-    systemPrefersDark.value = e.matches;
-  };
-  onMounted(() => {
-    if (typeof window === "undefined") return;
-    mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    systemPrefersDark.value = mediaQuery.matches;
-    mediaQuery.addEventListener?.("change", onSystemChange);
-    applyToDocument(theme.value);
-  });
-  onUnmounted(() => {
-    mediaQuery?.removeEventListener?.("change", onSystemChange);
+  const resolvedMode = computed(() => {
+    if (mode.value === "auto") return systemPrefersDark.value ? "dark" : "light";
+    return mode.value;
   });
   watch(theme, (next) => {
     applyToDocument(next);
     writePersisted(next);
+  }, { immediate: true });
+  watch(resolvedMode, (next) => {
+    applyModeToDocument(next);
+  }, { immediate: true });
+  watch(mode, (next) => {
+    writePersistedMode(next);
   });
   function setTheme(next) {
     theme.value = next;
   }
+  function setMode(next) {
+    mode.value = next;
+  }
   function toggle() {
     const effective = resolved.value;
     theme.value = effective === "dark" ? "light" : "dark";
   }
+  function toggleMode() {
+    const effective = resolvedMode.value;
+    mode.value = effective === "dark" ? "light" : "dark";
+  }
   return {
     theme: readonly(theme),
     resolved: readonly(resolved),
     setTheme,
-    toggle
+    toggle,
+    mode: readonly(mode),
+    resolvedMode: readonly(resolvedMode),
+    setMode,
+    toggleMode
   };
 }
 export function applyThemeSync(theme) {
   applyToDocument(theme);
 }
+export function applyModeSync(mode) {
+  if (mode === "light" || mode === "dark") {
+    applyModeToDocument(mode);
+    return;
+  }
+  const prefersDark = ensureSystemPreference().value;
+  applyModeToDocument(prefersDark ? "dark" : "light");
+}
 export function readPersistedTheme() {
   return readPersisted();
 }
+export function readPersistedMode() {
+  return readPersistedModeValue();
+}
+export function _resetThemeForTesting() {
+  _theme = null;
+  _mode = null;
+  _systemPrefersDark = null;
+  _mediaInitDone = false;
+}

package/dist/src/composables/Video/video-player.composable.cjs

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldSuppressAutoplay = shouldSuppressAutoplay;
+exports.useVideoPlayer = useVideoPlayer;
+var _vue = require("vue");
+var _useMediaPlayer = require("../Media/use-media-player.composable.cjs");
+function useVideoPlayer(options = {}) {
+  const videoRef = options.videoRef ?? (0, _vue.ref)(null);
+  const {
+    state: baseState,
+    methods: baseMethods
+  } = (0, _useMediaPlayer.useMediaPlayer)({
+    autoplay: options.autoplay,
+    muted: options.muted,
+    loop: options.loop,
+    preload: options.preload,
+    mediaRef: videoRef
+  });
+  const fullscreen = (0, _vue.ref)(false);
+  const pip = (0, _vue.ref)(false);
+  const enterFullscreen = async () => {
+    const el = videoRef.value;
+    if (!el || typeof document === "undefined") return;
+    try {
+      if (typeof el.requestFullscreen === "function") {
+        await el.requestFullscreen();
+      } else {
+        const legacy = el;
+        legacy.webkitEnterFullscreen?.();
+      }
+    } catch (err) {
+      baseState.error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const exitFullscreen = async () => {
+    if (typeof document === "undefined") return;
+    try {
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+      }
+    } catch (err) {
+      baseState.error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const toggleFullscreen = async () => {
+    if (typeof document === "undefined") return;
+    if (document.fullscreenElement) await exitFullscreen();else await enterFullscreen();
+  };
+  const requestPip = async () => {
+    const el = videoRef.value;
+    if (!el || typeof document === "undefined") return;
+    try {
+      const req = el.requestPictureInPicture;
+      if (typeof req === "function") {
+        await req.call(el);
+      }
+    } catch (err) {
+      baseState.error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const exitPip = async () => {
+    if (typeof document === "undefined") return;
+    try {
+      const doc = document;
+      if (doc.pictureInPictureElement && typeof doc.exitPictureInPicture === "function") {
+        await doc.exitPictureInPicture();
+      }
+    } catch (err) {
+      baseState.error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const togglePip = async () => {
+    if (typeof document === "undefined") return;
+    const doc = document;
+    if (doc.pictureInPictureElement) await exitPip();else await requestPip();
+  };
+  const onEnterPip = () => {
+    pip.value = true;
+  };
+  const onLeavePip = () => {
+    pip.value = false;
+  };
+  const onFullscreenChange = () => {
+    fullscreen.value = Boolean(document.fullscreenElement);
+  };
+  (0, _vue.onMounted)(() => {
+    const el = videoRef.value;
+    if (el) {
+      el.addEventListener("enterpictureinpicture", onEnterPip);
+      el.addEventListener("leavepictureinpicture", onLeavePip);
+    }
+    if (typeof document !== "undefined") {
+      document.addEventListener("fullscreenchange", onFullscreenChange);
+    }
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    const el = videoRef.value;
+    if (el) {
+      el.removeEventListener("enterpictureinpicture", onEnterPip);
+      el.removeEventListener("leavepictureinpicture", onLeavePip);
+    }
+    if (typeof document !== "undefined") {
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }
+  });
+  return {
+    videoRef,
+    state: {
+      ...baseState,
+      fullscreen,
+      pip
+    },
+    methods: {
+      ...baseMethods,
+      enterFullscreen,
+      exitFullscreen,
+      toggleFullscreen,
+      requestPip,
+      exitPip,
+      togglePip
+    }
+  };
+}
+function shouldSuppressAutoplay() {
+  return (0, _useMediaPlayer.shouldSuppressAutoplay)();
+}

package/dist/src/composables/Video/video-player.composable.d.ts

@@ -0,0 +1,44 @@
+import { type Ref } from 'vue';
+import type { IUseVideoPlayerOptions, IVideoPlayerMethods, IVideoPlayerState } from '../../interfaces';
+/**
+ * Inline default kept for the SFC `withDefaults` host — see CLAUDE.md
+ * "withDefaults inline literals only" rule. The constant is exported
+ * so consumers can reference the canonical default in docs/tests
+ * without re-typing the literal.
+ */
+/**
+ * Headless video player composable. Composes the media-shared
+ * `useMediaPlayer` base and layers on the video-only state
+ * (`fullscreen`, `pip`) + methods (`enterFullscreen`,
+ * `exitFullscreen`, `toggleFullscreen`, `requestPip`, `exitPip`,
+ * `togglePip`) + native event bindings
+ * (`enterpictureinpicture` / `leavepictureinpicture` /
+ * document-level `fullscreenchange`).
+ *
+ * The composable does NOT mount the `<video>` element — consumers pass
+ * a ref (or accept the one the composable creates) and bind it on the
+ * `<video>` tag themselves. This keeps the headless / styled split
+ * clean: `<OrigamVideo>` is just a default skin on top of this state.
+ *
+ * @example
+ * ```ts
+ * const videoRef = ref<HTMLVideoElement | null>(null)
+ * const { state, methods } = useVideoPlayer({ videoRef, autoplay: false })
+ *
+ * // template:
+ * // <video ref="videoRef" src="…" />
+ * ```
+ */
+export declare function useVideoPlayer(options?: IUseVideoPlayerOptions): {
+    videoRef: Ref<HTMLVideoElement | null>;
+    state: IVideoPlayerState;
+    methods: IVideoPlayerMethods;
+};
+/**
+ * Reduced-motion check exported for the host component — kept here
+ * so the single source of truth for "should autoplay run?" stays in
+ * the composable, even when the decision is made by the SFC at
+ * attribute resolution time (i.e. before the composable's onMounted
+ * has fired). Re-exported from the media-shared base.
+ */
+export declare function shouldSuppressAutoplay(): boolean;