origam 2.2.1 → 2.5.0

package/dist/src/composables/Masonry/masonry.composable.js

@@ -0,0 +1,160 @@
+import { onBeforeUnmount, ref, watch } from "vue";
+export function pickColumnsForWidth(width, breakpoints, defaultColumns) {
+  if (!breakpoints) return Math.max(1, Math.floor(defaultColumns));
+  const entries = Object.entries(breakpoints).map(([k, v]) => [Number(k), Number(v)]).filter(([k, v]) => Number.isFinite(k) && Number.isFinite(v) && k > 0 && v >= 1).sort((a, b) => a[0] - b[0]);
+  let resolved = Math.max(1, Math.floor(defaultColumns));
+  for (const [bp, cols] of entries) {
+    if (width >= bp) resolved = Math.max(1, Math.floor(cols));
+  }
+  return resolved;
+}
+export function bucketFill(heights, containerWidth, gap, columns, align = "top") {
+  const cols = Math.max(1, Math.floor(columns));
+  const totalGap = (cols - 1) * gap;
+  const itemWidth = Math.max(0, (containerWidth - totalGap) / cols);
+  const columnHeights = new Array(cols).fill(0);
+  const items = [];
+  for (let i = 0; i < heights.length; i++) {
+    let col = 0;
+    let min = columnHeights[0];
+    for (let c = 1; c < cols; c++) {
+      if (columnHeights[c] < min) {
+        min = columnHeights[c];
+        col = c;
+      }
+    }
+    const left = col * (itemWidth + gap);
+    const top = columnHeights[col];
+    const height = Math.max(0, heights[i]);
+    items.push({
+      index: i,
+      left,
+      top,
+      width: itemWidth,
+      height,
+      column: col
+    });
+    columnHeights[col] = top + height + gap;
+  }
+  let maxHeight = 0;
+  for (let c = 0; c < cols; c++) {
+    const h = columnHeights[c] > 0 ? columnHeights[c] - gap : 0;
+    if (h > maxHeight) maxHeight = h;
+  }
+  if (align === "center" && maxHeight > 0) {
+    const columnUsed = new Array(cols).fill(0);
+    for (const item of items) {
+      const colHeight = columnHeights[item.column] > 0 ? columnHeights[item.column] - gap : 0;
+      const shift = Math.max(0, (maxHeight - colHeight) / 2);
+      if (columnUsed[item.column] === 0) columnUsed[item.column] = shift;
+      item.top += columnUsed[item.column];
+    }
+  }
+  return {
+    containerHeight: maxHeight,
+    items,
+    columns: cols
+  };
+}
+function createResizeObserver(callback) {
+  if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
+    return null;
+  }
+  return new ResizeObserver(() => {
+    if (typeof window !== "undefined") {
+      window.requestAnimationFrame(callback);
+    } else {
+      callback();
+    }
+  });
+}
+export function useMasonry(options) {
+  const containerRef = ref(null);
+  const items = /* @__PURE__ */ new Map();
+  const layout = ref({
+    containerHeight: 0,
+    items: [],
+    columns: Math.max(1, options.columnsRef.value || 1)
+  });
+  let containerObserver = null;
+  let itemObserver = null;
+  const setItem = (index, el) => {
+    const previous = items.get(index);
+    if (previous && previous !== el && itemObserver) {
+      itemObserver.unobserve(previous);
+    }
+    if (!el) {
+      items.delete(index);
+      return;
+    }
+    items.set(index, el);
+    if (itemObserver) itemObserver.observe(el);
+  };
+  const measureHeights = () => {
+    const heights = [];
+    const sorted = Array.from(items.entries()).sort((a, b) => a[0] - b[0]);
+    for (const [, el] of sorted) {
+      heights.push(el.offsetHeight);
+    }
+    return heights;
+  };
+  const relayout = () => {
+    const container = containerRef.value;
+    if (!container) return;
+    const width = container.clientWidth;
+    if (width <= 0) {
+      return;
+    }
+    const cols = pickColumnsForWidth(
+      width,
+      options.breakpointsRef?.value,
+      options.columnsRef.value
+    );
+    const heights = measureHeights();
+    const align = options.alignRef?.value ?? "top";
+    layout.value = bucketFill(heights, width, options.gapRef.value, cols, align);
+  };
+  watch(
+    containerRef,
+    (container, previous) => {
+      if (previous) {
+        containerObserver?.unobserve(previous);
+      }
+      if (!container) return;
+      if (!containerObserver) {
+        containerObserver = createResizeObserver(relayout);
+      }
+      if (!itemObserver) {
+        itemObserver = createResizeObserver(relayout);
+      }
+      if (containerObserver) containerObserver.observe(container);
+      if (itemObserver) {
+        for (const el of items.values()) itemObserver.observe(el);
+      }
+      if (typeof window !== "undefined") {
+        window.requestAnimationFrame(relayout);
+      } else {
+        relayout();
+      }
+    },
+    { immediate: false }
+  );
+  onBeforeUnmount(() => {
+    containerObserver?.disconnect();
+    itemObserver?.disconnect();
+    containerObserver = null;
+    itemObserver = null;
+    items.clear();
+  });
+  watch(
+    () => [options.columnsRef.value, options.gapRef.value, options.alignRef?.value, options.breakpointsRef?.value],
+    () => relayout(),
+    { deep: true }
+  );
+  return {
+    containerRef,
+    setItem,
+    layout,
+    relayout
+  };
+}

package/dist/src/composables/Media/use-media-player.composable.cjs

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldSuppressAutoplay = shouldSuppressAutoplay;
+exports.useMediaPlayer = useMediaPlayer;
+var _vue = require("vue");
+var _media = require("../../consts/Media/media.const.cjs");
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function readBufferedEnd(media) {
+  if (!media.buffered || media.buffered.length === 0) return 0;
+  try {
+    return media.buffered.end(media.buffered.length - 1);
+  } catch {
+    return 0;
+  }
+}
+function useMediaPlayer(options = {}) {
+  const mediaRef = options.mediaRef ?? (0, _vue.ref)(null);
+  const playing = (0, _vue.ref)(false);
+  const paused = (0, _vue.ref)(true);
+  const currentTime = (0, _vue.ref)(0);
+  const duration = (0, _vue.ref)(NaN);
+  const buffered = (0, _vue.ref)(0);
+  const volume = (0, _vue.ref)(_media.MEDIA_DEFAULT_VOLUME);
+  const muted = (0, _vue.ref)(Boolean(options.muted));
+  const ready = (0, _vue.ref)(false);
+  const loading = (0, _vue.ref)(false);
+  const error = (0, _vue.ref)(null);
+  const playbackRate = (0, _vue.ref)(1);
+  const remoteAvailable = (0, _vue.ref)(false);
+  const remoteState = (0, _vue.ref)("disconnected");
+  const play = async () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    try {
+      await el.play();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const pause = () => {
+    mediaRef.value?.pause();
+  };
+  const toggle = async () => {
+    if (playing.value) pause();else await play();
+  };
+  const seek = seconds => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const max = Number.isFinite(el.duration) ? el.duration : seconds;
+    el.currentTime = Math.max(0, Math.min(seconds, max));
+  };
+  const setVolume = value => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const clamped = Math.max(0, Math.min(1, value));
+    el.volume = clamped;
+    if (clamped > 0 && el.muted) {
+      el.muted = false;
+    }
+  };
+  const toggleMute = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    el.muted = !el.muted;
+  };
+  const load = () => {
+    mediaRef.value?.load();
+  };
+  const skipBackward = seconds => {
+    const el = mediaRef.value;
+    if (!el) return;
+    seek(el.currentTime - seconds);
+  };
+  const skipForward = seconds => {
+    const el = mediaRef.value;
+    if (!el) return;
+    seek(el.currentTime + seconds);
+  };
+  const setPlaybackRate = rate => {
+    const el = mediaRef.value;
+    if (!el) return;
+    const clamped = Math.max(0.25, Math.min(4, rate));
+    el.playbackRate = clamped;
+    playbackRate.value = clamped;
+  };
+  const requestRemotePlayback = async () => {
+    const el = mediaRef.value;
+    if (!el?.remote?.prompt) return;
+    try {
+      await el.remote.prompt();
+    } catch (err) {
+      if (err instanceof Error && err.name !== "NotAllowedError" && err.name !== "NotFoundError") {
+        error.value = err;
+      }
+    }
+  };
+  const stopRemotePlayback = async () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    try {
+      el.pause();
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+  const onPlay = () => {
+    playing.value = true;
+    paused.value = false;
+  };
+  const onPause = () => {
+    playing.value = false;
+    paused.value = true;
+  };
+  const onEnded = () => {
+    playing.value = false;
+    paused.value = true;
+  };
+  const onTimeUpdate = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    currentTime.value = el.currentTime;
+    buffered.value = readBufferedEnd(el);
+  };
+  const onProgress = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    buffered.value = readBufferedEnd(el);
+  };
+  const onVolumeChange = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    volume.value = el.volume;
+    muted.value = el.muted;
+  };
+  const onLoadedMetadata = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    duration.value = el.duration;
+    ready.value = true;
+    loading.value = false;
+  };
+  const onLoadStart = () => {
+    loading.value = true;
+    error.value = null;
+  };
+  const onCanPlay = () => {
+    loading.value = false;
+  };
+  const onWaiting = () => {
+    loading.value = true;
+  };
+  const onError = () => {
+    loading.value = false;
+    const el = mediaRef.value;
+    if (el?.error) error.value = el.error;else error.value = new Error("Unknown media error");
+  };
+  const onRateChange = () => {
+    const el = mediaRef.value;
+    if (!el) return;
+    playbackRate.value = el.playbackRate;
+  };
+  let _remoteAvailabilityCallbackId = null;
+  const onRemoteConnecting = () => {
+    remoteState.value = "connecting";
+  };
+  const onRemoteConnect = () => {
+    remoteState.value = "connected";
+  };
+  const onRemoteDisconnect = () => {
+    remoteState.value = "disconnected";
+  };
+  const bind = el => {
+    el.addEventListener("play", onPlay);
+    el.addEventListener("pause", onPause);
+    el.addEventListener("ended", onEnded);
+    el.addEventListener("timeupdate", onTimeUpdate);
+    el.addEventListener("progress", onProgress);
+    el.addEventListener("volumechange", onVolumeChange);
+    el.addEventListener("loadedmetadata", onLoadedMetadata);
+    el.addEventListener("loadstart", onLoadStart);
+    el.addEventListener("canplay", onCanPlay);
+    el.addEventListener("waiting", onWaiting);
+    el.addEventListener("error", onError);
+    el.addEventListener("ratechange", onRateChange);
+    const remote = el.remote;
+    if (remote) {
+      if (remote.state) remoteState.value = remote.state;
+      remote.addEventListener?.("connecting", onRemoteConnecting);
+      remote.addEventListener?.("connect", onRemoteConnect);
+      remote.addEventListener?.("disconnect", onRemoteDisconnect);
+      if (typeof remote.watchAvailability === "function") {
+        remote.watchAvailability(available => {
+          remoteAvailable.value = available;
+        }).then(id => {
+          _remoteAvailabilityCallbackId = id;
+        }).catch(() => {});
+      }
+    }
+    volume.value = el.volume;
+    muted.value = el.muted || Boolean(options.muted);
+    paused.value = el.paused;
+    playing.value = !el.paused;
+    if (Number.isFinite(el.duration)) {
+      duration.value = el.duration;
+      ready.value = true;
+    }
+    if (options.autoplay && prefersReducedMotion()) {
+      console.warn("[origam:media] `autoplay` requested but the user prefers reduced motion; autoplay was suppressed.");
+    }
+  };
+  const unbind = el => {
+    el.removeEventListener("play", onPlay);
+    el.removeEventListener("pause", onPause);
+    el.removeEventListener("ended", onEnded);
+    el.removeEventListener("timeupdate", onTimeUpdate);
+    el.removeEventListener("progress", onProgress);
+    el.removeEventListener("volumechange", onVolumeChange);
+    el.removeEventListener("loadedmetadata", onLoadedMetadata);
+    el.removeEventListener("loadstart", onLoadStart);
+    el.removeEventListener("canplay", onCanPlay);
+    el.removeEventListener("waiting", onWaiting);
+    el.removeEventListener("error", onError);
+    el.removeEventListener("ratechange", onRateChange);
+    const remote = el.remote;
+    if (remote) {
+      remote.removeEventListener?.("connecting", onRemoteConnecting);
+      remote.removeEventListener?.("connect", onRemoteConnect);
+      remote.removeEventListener?.("disconnect", onRemoteDisconnect);
+      if (_remoteAvailabilityCallbackId != null && typeof remote.cancelWatchAvailability === "function") {
+        remote.cancelWatchAvailability(_remoteAvailabilityCallbackId).catch(() => {});
+        _remoteAvailabilityCallbackId = null;
+      }
+    }
+  };
+  (0, _vue.onMounted)(() => {
+    const el = mediaRef.value;
+    if (el) bind(el);
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    const el = mediaRef.value;
+    if (el) unbind(el);
+  });
+  return {
+    mediaRef,
+    state: {
+      playing,
+      paused,
+      currentTime,
+      duration,
+      buffered,
+      volume,
+      muted,
+      ready,
+      loading,
+      error,
+      playbackRate,
+      remoteAvailable,
+      remoteState
+    },
+    methods: {
+      play,
+      pause,
+      toggle,
+      seek,
+      setVolume,
+      toggleMute,
+      load,
+      skipBackward,
+      skipForward,
+      setPlaybackRate,
+      requestRemotePlayback,
+      stopRemotePlayback
+    }
+  };
+}
+function shouldSuppressAutoplay() {
+  return prefersReducedMotion();
+}

package/dist/src/composables/Media/use-media-player.composable.d.ts

@@ -0,0 +1,43 @@
+import { type Ref } from 'vue';
+import type { IMediaPlayerMethods, IMediaPlayerState, IUseMediaPlayerOptions } from '../../interfaces';
+/**
+ * Headless media-player composable. Owns the media-shared runtime
+ * state (`playing`, `paused`, `currentTime`, `duration`, `buffered`,
+ * `volume`, `muted`, `playbackRate`, `ready`, `loading`, `error`,
+ * `remoteAvailable`, `remoteState`) and exposes imperative methods
+ * that wrap the standard `HTMLMediaElement` API.
+ *
+ * Works for BOTH `HTMLVideoElement` and `HTMLAudioElement` — the
+ * composable types its element ref against `HTMLMediaElement`, the
+ * common ancestor. `useVideoPlayer` and `useAudioPlayer` layer their
+ * own specialisations on top of this base.
+ *
+ * @example
+ * ```ts
+ * const audioRef = ref<HTMLAudioElement | null>(null)
+ * const { state, methods } = useMediaPlayer({ mediaRef: audioRef })
+ *
+ * // template:
+ * // <audio ref="audioRef" src="…" />
+ * ```
+ */
+export declare function useMediaPlayer(options?: IUseMediaPlayerOptions): {
+    mediaRef: Ref<HTMLMediaElement | null>;
+    state: IMediaPlayerState;
+    methods: IMediaPlayerMethods;
+};
+/**
+ * Reduced-motion check exported for the host components — 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).
+ */
+export declare function shouldSuppressAutoplay(): boolean;
+/**
+ * Default preload value re-exported so the host components can mirror
+ * it in `withDefaults()` without duplicating the literal string.
+ * Inline-literal-only constraint on `withDefaults` does not apply here
+ * because the SFC inlines the literal at the call-site and only uses
+ * this constant in JSDoc.
+ */