origam 2.2.1 → 2.3.0

package/dist/src/composables/Parallax/parallax.composable.d.ts

@@ -0,0 +1,60 @@
+import { type Ref } from 'vue';
+import type { IParallaxLayerRegistry } from '../../interfaces';
+import type { TParallaxDirection, TParallaxEasing } from '../../types';
+/*********************************************************
+ * Internal options consumed by `useParallaxRuntime`.
+ ********************************************************/
+export interface IUseParallaxRuntimeOptions {
+    target: Ref<HTMLElement | undefined>;
+    direction: Ref<TParallaxDirection>;
+    easing: Ref<TParallaxEasing | string>;
+    threshold: Ref<number>;
+    disabled: Ref<boolean>;
+    /**
+     * Fallback speed used when `slot=default` carries raw content (no
+     * `<OrigamParallaxLayer>`). Mirrors `IParallaxProps.speed`.
+     */
+    speed: Ref<number>;
+    onEnter?: () => void;
+    onLeave?: () => void;
+    onProgress?: (progress: number) => void;
+}
+/*********************************************************
+ * useParallaxRuntime
+ *
+ * Headless runtime for the enriched OrigamParallax. Maintains a registry
+ * of layers, tracks scroll progress / mouse-ratio, decides between the
+ * CSS-first scroll-driven path and a JS rAF fallback, honours
+ * `prefers-reduced-motion`, and emits enter / leave / progress hooks via
+ * the options bag.
+ ********************************************************/
+export declare function useParallaxRuntime(options: IUseParallaxRuntimeOptions): {
+    layers: Ref<{
+        id: symbol;
+        speed: number;
+        offsetX: number;
+        offsetY: number;
+        target: HTMLElement;
+    }[], IParallaxLayerRegistry[] | {
+        id: symbol;
+        speed: number;
+        offsetX: number;
+        offsetY: number;
+        target: HTMLElement;
+    }[]>;
+    progress: Ref<number, number>;
+    mouseRatio: Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    cssScrollDriven: import("vue").ComputedRef<boolean>;
+    reducedMotion: Ref<boolean, boolean>;
+    register: (layer: IParallaxLayerRegistry) => void;
+    unregister: (id: symbol) => void;
+};

package/dist/src/composables/Parallax/parallax.composable.js

@@ -0,0 +1,219 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useCssSupport } from "../CssSupport/cssSupport.composable.js";
+import { PARALLAX_DIRECTION, PARALLAX_EASING } from "../../enums/index.js";
+function usePrefersReducedMotion() {
+  const flag = ref(false);
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return flag;
+  }
+  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+  flag.value = mql.matches;
+  const onChange = (ev) => {
+    flag.value = ev.matches;
+  };
+  if (typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", onChange);
+  } else if (typeof mql.addListener === "function") {
+    mql.addListener(onChange);
+  }
+  onBeforeUnmount(() => {
+    if (typeof mql.removeEventListener === "function") {
+      mql.removeEventListener("change", onChange);
+    } else if (typeof mql.removeListener === "function") {
+      mql.removeListener(onChange);
+    }
+  });
+  return flag;
+}
+function composeLayerTransform(progress, mouseRatio, direction, layer, hostHeight, hostWidth) {
+  const centred = progress * 2 - 1;
+  let tx = layer.offsetX;
+  let ty = layer.offsetY;
+  switch (direction) {
+    case PARALLAX_DIRECTION.HORIZONTAL:
+      tx += centred * hostWidth * layer.speed;
+      break;
+    case PARALLAX_DIRECTION.BOTH:
+      tx += mouseRatio.x * hostWidth * 0.5 * layer.speed;
+      ty += centred * hostHeight * layer.speed;
+      break;
+    case PARALLAX_DIRECTION.VERTICAL:
+    default:
+      ty += centred * hostHeight * layer.speed;
+      break;
+  }
+  return `translate3d(${tx.toFixed(2)}px, ${ty.toFixed(2)}px, 0)`;
+}
+export function useParallaxRuntime(options) {
+  const { supports } = useCssSupport();
+  const cssScrollDriven = computed(
+    () => supports("animation-timeline: scroll()") && options.easing.value === PARALLAX_EASING.LINEAR
+  );
+  const reducedMotion = usePrefersReducedMotion();
+  const layers = ref([]);
+  const progress = ref(0);
+  const mouseRatio = ref({ x: 0, y: 0 });
+  let isInViewport = false;
+  let rafId = null;
+  let observer = null;
+  const layerLerp = /* @__PURE__ */ new WeakMap();
+  const register = (layer) => {
+    layers.value.push(layer);
+  };
+  const unregister = (id) => {
+    layers.value = layers.value.filter((l) => l.id !== id);
+  };
+  const updateProgress = () => {
+    const host = options.target.value;
+    if (!host) return;
+    const rect = host.getBoundingClientRect();
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    const total = rect.height + vh;
+    const distanceFromTop = vh - rect.top;
+    let p = distanceFromTop / total;
+    if (p < 0) p = 0;
+    if (p > 1) p = 1;
+    const t = options.threshold.value;
+    if (t > 0 && p < t) {
+      p = 0;
+    } else if (t > 0) {
+      p = (p - t) / (1 - t);
+    }
+    progress.value = p;
+    options.onProgress?.(p);
+  };
+  const applyLayerTransforms = () => {
+    const host = options.target.value;
+    if (!host) return;
+    const rect = host.getBoundingClientRect();
+    const dir = options.direction.value;
+    const easing = options.easing.value;
+    const isSpring = easing === PARALLAX_EASING.SPRING;
+    for (const layer of layers.value) {
+      if (options.disabled.value || reducedMotion.value) {
+        layer.target.style.transform = `translate3d(${layer.offsetX}px, ${layer.offsetY}px, 0)`;
+        continue;
+      }
+      const target = composeLayerTransform(
+        progress.value,
+        mouseRatio.value,
+        dir,
+        layer,
+        rect.height,
+        rect.width
+      );
+      if (!isSpring) {
+        layer.target.style.transform = target;
+        continue;
+      }
+      const match = /translate3d\(([-\d.]+)px,\s*([-\d.]+)px/.exec(target);
+      if (!match) {
+        layer.target.style.transform = target;
+        continue;
+      }
+      const targetTx = parseFloat(match[1]);
+      const targetTy = parseFloat(match[2]);
+      const current = layerLerp.get(layer.target) ?? { tx: targetTx, ty: targetTy };
+      const damping = 0.12;
+      current.tx += (targetTx - current.tx) * damping;
+      current.ty += (targetTy - current.ty) * damping;
+      layerLerp.set(layer.target, current);
+      layer.target.style.transform = `translate3d(${current.tx.toFixed(2)}px, ${current.ty.toFixed(2)}px, 0)`;
+    }
+  };
+  const tick = () => {
+    rafId = null;
+    updateProgress();
+    applyLayerTransforms();
+    if (isInViewport && !options.disabled.value && !reducedMotion.value) {
+      rafId = requestAnimationFrame(tick);
+    }
+  };
+  const onScroll = () => {
+    if (rafId == null && isInViewport) {
+      rafId = requestAnimationFrame(tick);
+    }
+  };
+  const onMouseMove = (event) => {
+    if (options.direction.value !== PARALLAX_DIRECTION.BOTH) return;
+    const host = options.target.value;
+    if (!host) return;
+    const rect = host.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    mouseRatio.value = {
+      x: (event.clientX - cx) / (rect.width / 2),
+      y: (event.clientY - cy) / (rect.height / 2)
+    };
+    if (rafId == null && isInViewport) {
+      rafId = requestAnimationFrame(tick);
+    }
+  };
+  const startCss = () => {
+    const host = options.target.value;
+    if (!host) return;
+    for (const layer of layers.value) {
+      layer.target.style.setProperty("--origam-parallax__layer---speed", String(layer.speed));
+      layer.target.style.setProperty("--origam-parallax__layer---offset-x", `${layer.offsetX}px`);
+      layer.target.style.setProperty("--origam-parallax__layer---offset-y", `${layer.offsetY}px`);
+    }
+  };
+  onMounted(() => {
+    const host = options.target.value;
+    if (!host) return;
+    observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting && !isInViewport) {
+          isInViewport = true;
+          options.onEnter?.();
+          if (!cssScrollDriven.value) {
+            if (rafId == null) rafId = requestAnimationFrame(tick);
+          } else {
+            startCss();
+          }
+        } else if (!entry.isIntersecting && isInViewport) {
+          isInViewport = false;
+          options.onLeave?.();
+        }
+      }
+    }, { threshold: 0 });
+    observer.observe(host);
+    if (!cssScrollDriven.value) {
+      window.addEventListener("scroll", onScroll, { passive: true });
+      window.addEventListener("resize", onScroll, { passive: true });
+      host.addEventListener("mousemove", onMouseMove, { passive: true });
+      requestAnimationFrame(tick);
+    }
+  });
+  onBeforeUnmount(() => {
+    if (rafId != null) cancelAnimationFrame(rafId);
+    observer?.disconnect();
+    observer = null;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    }
+    const host = options.target.value;
+    host?.removeEventListener("mousemove", onMouseMove);
+  });
+  watch(cssScrollDriven, (v) => {
+    if (v) {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      startCss();
+    } else if (isInViewport && rafId == null) {
+      rafId = requestAnimationFrame(tick);
+    }
+  });
+  return {
+    layers,
+    progress,
+    mouseRatio,
+    cssScrollDriven,
+    reducedMotion,
+    register,
+    unregister
+  };
+}

package/dist/src/composables/Responsive/aspect.composable.cjs

@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAspectRatio = useAspectRatio;
 var _vue = require("vue");
+var _consts = require("../../consts/index.cjs");
 function useAspectRatio(props) {
   const aspectStyles = (0, _vue.computed)(() => {
     const aspectRatio = [];
-    let ratio = window.innerWidth / window.innerHeight;
+    let ratio;
     if (props.aspectRatio) {
       ratio = eval(props.aspectRatio);
+    } else if (_consts.IN_BROWSER) {
+      ratio = window.innerWidth / window.innerHeight;
+    } else {
+      return aspectRatio;
     }
     if (ratio) {
       aspectRatio.push(`padding-block-end: ${String(1 / ratio * 100)}%`);

package/dist/src/composables/Responsive/aspect.composable.d.ts

@@ -1,5 +1,15 @@
 /*********************************************************
  * useAspectRatio
+ *
+ * SSR safety
+ * ──────────
+ * During SSR (`!IN_BROWSER`) we cannot read `window.innerWidth/Height`.
+ * When the consumer passes an explicit `aspectRatio` prop the ratio is
+ * derived from it (no DOM needed). Otherwise we return an empty styles
+ * array — the layout collapses to its natural box on the server, then
+ * the first browser-side computed access fills in the padding-bottom
+ * value. The component's intrinsic height takes over after hydration,
+ * so the difference is invisible to the user.
  ********************************************************/
 export declare function useAspectRatio(props: {
     aspectRatio?: string | number;

package/dist/src/composables/Responsive/aspect.composable.js

@@ -1,10 +1,15 @@
 import { computed } from "vue";
+import { IN_BROWSER } from "../../consts/index.js";
 export function useAspectRatio(props) {
   const aspectStyles = computed(() => {
     const aspectRatio = [];
-    let ratio = window.innerWidth / window.innerHeight;
+    let ratio;
     if (props.aspectRatio) {
       ratio = eval(props.aspectRatio);
+    } else if (IN_BROWSER) {
+      ratio = window.innerWidth / window.innerHeight;
+    } else {
+      return aspectRatio;
     }
     if (ratio) {
       aspectRatio.push(`padding-block-end: ${String(1 / ratio * 100)}%`);

package/dist/src/composables/SnackbarStack/snackbar-stack.composable.cjs

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetSnackbarStackForTesting = resetSnackbarStackForTesting;
+exports.useSnackbarStack = useSnackbarStack;
+exports.useSnackbarStackInternal = useSnackbarStackInternal;
+var _vue = require("vue");
+var _consts = require("../../consts/index.cjs");
+const STORES = /* @__PURE__ */new Map();
+const getStore = id => {
+  let store = STORES.get(id);
+  if (!store) {
+    store = {
+      items: (0, _vue.ref)([]),
+      timers: /* @__PURE__ */new Map(),
+      counter: {
+        current: 0
+      }
+    };
+    STORES.set(id, store);
+  }
+  return store;
+};
+const generateId = state => {
+  state.counter.current += 1;
+  return `origam-snackbar-stack-item-${state.counter.current}`;
+};
+const clearTimer = (state, itemId) => {
+  const handle = state.timers.get(itemId);
+  if (handle !== void 0) {
+    if (typeof window !== "undefined") window.clearTimeout(handle);
+    state.timers.delete(itemId);
+  }
+};
+function useSnackbarStack(options = {}) {
+  const id = options.id ?? _consts.SNACKBAR_STACK_DEFAULT_ID;
+  const state = getStore(id);
+  const dismiss = itemId => {
+    const index = state.items.value.findIndex(item => item.id === itemId);
+    if (index === -1) return;
+    const [removed] = state.items.value.splice(index, 1);
+    clearTimer(state, itemId);
+    removed?.onDismiss?.();
+  };
+  const scheduleAutoDismiss = (itemId, duration) => {
+    if (duration <= 0) return;
+    if (typeof window === "undefined") return;
+    const handle = window.setTimeout(() => {
+      dismiss(itemId);
+    }, duration);
+    state.timers.set(itemId, handle);
+  };
+  const notify = opts => {
+    const itemId = generateId(state);
+    const duration = opts.duration ?? options.defaultDuration ?? _consts.SNACKBAR_STACK_DEFAULT_DURATION;
+    const item = {
+      ...opts,
+      id: itemId,
+      createdAt: Date.now()
+    };
+    state.items.value.push(item);
+    if (options.max != null && state.items.value.length > options.max) {
+      const evicted = state.items.value.shift();
+      if (evicted) {
+        clearTimer(state, evicted.id);
+        evicted.onDismiss?.();
+      }
+    }
+    scheduleAutoDismiss(itemId, duration);
+    return itemId;
+  };
+  const dismissAll = () => {
+    const ids = state.items.value.map(item => item.id);
+    ids.forEach(dismiss);
+  };
+  return {
+    items: (0, _vue.readonly)(state.items),
+    notify,
+    dismiss,
+    dismissAll
+  };
+}
+function useSnackbarStackInternal(id = _consts.SNACKBAR_STACK_DEFAULT_ID) {
+  const state = getStore(id);
+  return {
+    rawItems: state.items,
+    itemCount: (0, _vue.computed)(() => state.items.value.length)
+  };
+}
+function resetSnackbarStackForTesting() {
+  STORES.forEach(state => {
+    state.timers.forEach(handle => {
+      if (typeof window !== "undefined") window.clearTimeout(handle);
+    });
+    state.timers.clear();
+    state.items.value = [];
+    state.counter.current = 0;
+  });
+  STORES.clear();
+}

package/dist/src/composables/SnackbarStack/snackbar-stack.composable.d.ts

@@ -0,0 +1,58 @@
+import { type Ref } from 'vue';
+import type { ISnackbarStackItem, ISnackbarStackItemOptions } from '../../interfaces';
+/*********************************************************
+ * useSnackbarStack
+ *
+ * @description
+ * Public API. Returns an interface to push / pop items
+ * from a named stack. The returned `items` ref is the
+ * same reactive reference shared with the matching
+ * `<OrigamSnackbarStack id="…">` instance, so direct
+ * mutation outside of `notify` / `dismiss` is discouraged.
+ ********************************************************/
+export interface IUseSnackbarStackOptions {
+    id?: string;
+    /**
+     * Maximum number of items kept in the stack. When `notify` would
+     * push past this number, the oldest item is evicted FIFO. When
+     * undefined, the stack is unbounded (the rendering component
+     * still caps the visible count via its `max` prop).
+     */
+    max?: number;
+    /**
+     * Fallback `duration` applied to items that omit their own.
+     * Defaults to `SNACKBAR_STACK_DEFAULT_DURATION` (5 000 ms).
+     */
+    defaultDuration?: number;
+}
+export interface IUseSnackbarStackReturn {
+    items: Readonly<Ref<ReadonlyArray<ISnackbarStackItem>>>;
+    notify: (opts: ISnackbarStackItemOptions) => string;
+    dismiss: (itemId: string) => void;
+    dismissAll: () => void;
+}
+export declare function useSnackbarStack(options?: IUseSnackbarStackOptions): IUseSnackbarStackReturn;
+/*********************************************************
+ * Internal helper for the host component
+ *
+ * @description
+ * `<OrigamSnackbarStack>` needs a *writable* ref to the
+ * items list (it reads them to render and the composable
+ * mutates them). Exposed under a separate name so the
+ * public `useSnackbarStack` API stays read-only on
+ * `items`. Components outside the library should never
+ * import this.
+ ********************************************************/
+export declare function useSnackbarStackInternal(id?: string): {
+    rawItems: Ref<ISnackbarStackItem[], ISnackbarStackItem[]>;
+    itemCount: import("vue").ComputedRef<number>;
+};
+/*********************************************************
+ * Test helper
+ *
+ * @description
+ * Vitest needs to wipe the singleton between specs so that
+ * counters / timers do not leak across tests. Not part of
+ * the public surface — do not import in product code.
+ ********************************************************/
+export declare function resetSnackbarStackForTesting(): void;

package/dist/src/composables/SnackbarStack/snackbar-stack.composable.js

@@ -0,0 +1,92 @@
+import { computed, readonly, ref } from "vue";
+import { SNACKBAR_STACK_DEFAULT_DURATION, SNACKBAR_STACK_DEFAULT_ID } from "../../consts/index.js";
+const STORES = /* @__PURE__ */ new Map();
+const getStore = (id) => {
+  let store = STORES.get(id);
+  if (!store) {
+    store = {
+      items: ref([]),
+      timers: /* @__PURE__ */ new Map(),
+      counter: { current: 0 }
+    };
+    STORES.set(id, store);
+  }
+  return store;
+};
+const generateId = (state) => {
+  state.counter.current += 1;
+  return `origam-snackbar-stack-item-${state.counter.current}`;
+};
+const clearTimer = (state, itemId) => {
+  const handle = state.timers.get(itemId);
+  if (handle !== void 0) {
+    if (typeof window !== "undefined") window.clearTimeout(handle);
+    state.timers.delete(itemId);
+  }
+};
+export function useSnackbarStack(options = {}) {
+  const id = options.id ?? SNACKBAR_STACK_DEFAULT_ID;
+  const state = getStore(id);
+  const dismiss = (itemId) => {
+    const index = state.items.value.findIndex((item) => item.id === itemId);
+    if (index === -1) return;
+    const [removed] = state.items.value.splice(index, 1);
+    clearTimer(state, itemId);
+    removed?.onDismiss?.();
+  };
+  const scheduleAutoDismiss = (itemId, duration) => {
+    if (duration <= 0) return;
+    if (typeof window === "undefined") return;
+    const handle = window.setTimeout(() => {
+      dismiss(itemId);
+    }, duration);
+    state.timers.set(itemId, handle);
+  };
+  const notify = (opts) => {
+    const itemId = generateId(state);
+    const duration = opts.duration ?? options.defaultDuration ?? SNACKBAR_STACK_DEFAULT_DURATION;
+    const item = {
+      ...opts,
+      id: itemId,
+      createdAt: Date.now()
+    };
+    state.items.value.push(item);
+    if (options.max != null && state.items.value.length > options.max) {
+      const evicted = state.items.value.shift();
+      if (evicted) {
+        clearTimer(state, evicted.id);
+        evicted.onDismiss?.();
+      }
+    }
+    scheduleAutoDismiss(itemId, duration);
+    return itemId;
+  };
+  const dismissAll = () => {
+    const ids = state.items.value.map((item) => item.id);
+    ids.forEach(dismiss);
+  };
+  return {
+    items: readonly(state.items),
+    notify,
+    dismiss,
+    dismissAll
+  };
+}
+export function useSnackbarStackInternal(id = SNACKBAR_STACK_DEFAULT_ID) {
+  const state = getStore(id);
+  return {
+    rawItems: state.items,
+    itemCount: computed(() => state.items.value.length)
+  };
+}
+export function resetSnackbarStackForTesting() {
+  STORES.forEach((state) => {
+    state.timers.forEach((handle) => {
+      if (typeof window !== "undefined") window.clearTimeout(handle);
+    });
+    state.timers.clear();
+    state.items.value = [];
+    state.counter.current = 0;
+  });
+  STORES.clear();
+}