origam 2.3.0 → 2.5.0

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;

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

@@ -0,0 +1,128 @@
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "vue";
+import { shouldSuppressAutoplay as shouldSuppressAutoplayBase, useMediaPlayer } from "../Media/use-media-player.composable.js";
+export function useVideoPlayer(options = {}) {
+  const videoRef = options.videoRef ?? ref(null);
+  const {
+    state: baseState,
+    methods: baseMethods
+  } = useMediaPlayer({
+    autoplay: options.autoplay,
+    muted: options.muted,
+    loop: options.loop,
+    preload: options.preload,
+    mediaRef: videoRef
+  });
+  const fullscreen = ref(false);
+  const pip = 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);
+  };
+  onMounted(() => {
+    const el = videoRef.value;
+    if (el) {
+      el.addEventListener("enterpictureinpicture", onEnterPip);
+      el.addEventListener("leavepictureinpicture", onLeavePip);
+    }
+    if (typeof document !== "undefined") {
+      document.addEventListener("fullscreenchange", onFullscreenChange);
+    }
+  });
+  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
+    }
+  };
+}
+export function shouldSuppressAutoplay() {
+  return shouldSuppressAutoplayBase();
+}

package/dist/src/composables/Watermark/watermark.composable.cjs

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWatermark = useWatermark;
+var _vue = require("vue");
+var _watermark = require("../../consts/Watermark/watermark.const.cjs");
+function escapeXml(raw) {
+  return raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function buildPatternUrl(options) {
+  const tile = options.gap + Math.max(options.fontSize, 1);
+  const cx = tile / 2;
+  const cy = tile / 2;
+  const opacityAttr = `opacity="${options.opacity}"`;
+  let glyph;
+  if (options.image) {
+    const safeHref = escapeXml(options.image);
+    const imgSize = Math.max(options.fontSize, 16);
+    glyph = `<image href="${safeHref}" x="${cx - imgSize / 2}" y="${cy - imgSize / 2}" width="${imgSize}" height="${imgSize}" preserveAspectRatio="xMidYMid meet" ${opacityAttr}/>`;
+  } else {
+    const safeText = escapeXml(options.text);
+    const safeFamily = escapeXml(options.fontFamily);
+    const safeColor = escapeXml(options.color);
+    const safeWeight = escapeXml(String(options.fontWeight));
+    glyph = `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="middle" fill="${safeColor}" font-size="${options.fontSize}" font-family="${safeFamily}" font-weight="${safeWeight}" ${opacityAttr}>${safeText}</text>`;
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tile}" height="${tile}" viewBox="0 0 ${tile} ${tile}"><g transform="rotate(${options.angle} ${cx} ${cy})">${glyph}</g></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function resolveOptions(raw) {
+  const opts = raw ?? {};
+  return {
+    text: opts.text ?? "",
+    image: opts.image ?? "",
+    opacity: typeof opts.opacity === "number" ? opts.opacity : _watermark.WATERMARK_DEFAULT_OPACITY,
+    angle: typeof opts.angle === "number" ? opts.angle : _watermark.WATERMARK_DEFAULT_ANGLE_DEG,
+    gap: typeof opts.gap === "number" ? opts.gap : _watermark.WATERMARK_DEFAULT_GAP_PX,
+    fontSize: typeof opts.fontSize === "number" ? opts.fontSize : _watermark.WATERMARK_DEFAULT_FONT_SIZE_PX,
+    fontFamily: opts.fontFamily ?? _watermark.WATERMARK_DEFAULT_FONT_FAMILY,
+    color: opts.color ?? _watermark.WATERMARK_DEFAULT_COLOR,
+    fontWeight: opts.fontWeight ?? _watermark.WATERMARK_DEFAULT_FONT_WEIGHT,
+    pointerEvents: opts.pointerEvents ?? _watermark.WATERMARK_DEFAULT_POINTER_EVENTS,
+    zIndex: typeof opts.zIndex === "number" ? opts.zIndex : _watermark.WATERMARK_DEFAULT_Z_INDEX
+  };
+}
+function applyLayerStyles(layer, options, pattern) {
+  layer.style.position = "absolute";
+  layer.style.top = "0";
+  layer.style.right = "0";
+  layer.style.bottom = "0";
+  layer.style.left = "0";
+  layer.style.backgroundImage = pattern;
+  layer.style.backgroundRepeat = "repeat";
+  layer.style.pointerEvents = options.pointerEvents;
+  layer.style.zIndex = String(options.zIndex);
+  layer.style.userSelect = "none";
+  layer.setAttribute("aria-hidden", "true");
+  layer.setAttribute(_watermark.WATERMARK_DATA_ATTR, "");
+}
+function useWatermark(options = {}) {
+  const resolved = (0, _vue.computed)(() => {
+    const raw = (0, _vue.isRef)(options) || typeof options === "function" ? (0, _vue.toValue)(options) : options;
+    return resolveOptions(raw);
+  });
+  const patternUrl = (0, _vue.computed)(() => buildPatternUrl(resolved.value));
+  let layer = null;
+  let host = null;
+  let observer = null;
+  let reinjectScheduled = false;
+  const reinject = () => {
+    if (reinjectScheduled) return;
+    reinjectScheduled = true;
+    Promise.resolve().then(() => {
+      reinjectScheduled = false;
+      if (!host) return;
+      if (layer && host.contains(layer)) {
+        host.removeChild(layer);
+      }
+      layer = document.createElement("div");
+      applyLayerStyles(layer, resolved.value, patternUrl.value);
+      host.appendChild(layer);
+    });
+  };
+  const ensureObserver = () => {
+    if (observer || !host) return;
+    observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          let removed = false;
+          mutation.removedNodes.forEach(node => {
+            if (node === layer) removed = true;
+          });
+          if (removed) {
+            reinject();
+            return;
+          }
+        } else if (mutation.type === "attributes" && mutation.target === layer) {
+          reinject();
+          return;
+        }
+      }
+    });
+    observer.observe(host, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ["style", "class", _watermark.WATERMARK_DATA_ATTR],
+      subtree: false
+    });
+  };
+  const install = target => {
+    if (typeof document === "undefined") return null;
+    host = target ?? document.body;
+    if (!host) return null;
+    const computedPosition = getComputedStyle(host).position;
+    if (!computedPosition || computedPosition === "static") {
+      host.style.position = "relative";
+    }
+    layer = document.createElement("div");
+    applyLayerStyles(layer, resolved.value, patternUrl.value);
+    host.appendChild(layer);
+    if (resolved.value && options?.antiTamper) {
+      ensureObserver();
+    }
+    return layer;
+  };
+  const uninstall = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    if (layer && host && host.contains(layer)) {
+      host.removeChild(layer);
+    }
+    layer = null;
+    host = null;
+  };
+  if ((0, _vue.getCurrentScope)()) {
+    (0, _vue.onScopeDispose)(uninstall);
+  }
+  return {
+    patternUrl,
+    install,
+    uninstall
+  };
+}

package/dist/src/composables/Watermark/watermark.composable.d.ts

@@ -0,0 +1,28 @@
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { IUseWatermarkOptions } from '../../interfaces';
+/**
+ * Headless watermark composable. Returns the data-URL pattern (for
+ * consumers who want to bind it manually via `:style`) plus
+ * `install()` / `uninstall()` helpers for programmatic use without
+ * mounting `<OrigamWatermark>`.
+ *
+ * The composable is SSR-safe — pure-string SVG construction, no DOM
+ * access. `install()` short-circuits when `document` is undefined.
+ *
+ * @example
+ * ```ts
+ * const { patternUrl, install, uninstall } = useWatermark({
+ *     text: 'CONFIDENTIAL — john.doe@example.com',
+ *     opacity: 0.08,
+ *     angle: -30,
+ *     gap: 120
+ * })
+ * onMounted(() => install(document.body))
+ * onBeforeUnmount(() => uninstall())
+ * ```
+ */
+export declare function useWatermark(options?: MaybeRefOrGetter<IUseWatermarkOptions>): {
+    patternUrl: ComputedRef<string>;
+    install: (target?: HTMLElement) => HTMLElement | null;
+    uninstall: () => void;
+};

package/dist/src/composables/Watermark/watermark.composable.js

@@ -0,0 +1,158 @@
+import {
+  computed,
+  getCurrentScope,
+  isRef,
+  onScopeDispose,
+  toValue
+} from "vue";
+import {
+  WATERMARK_DATA_ATTR,
+  WATERMARK_DEFAULT_ANGLE_DEG,
+  WATERMARK_DEFAULT_COLOR,
+  WATERMARK_DEFAULT_FONT_FAMILY,
+  WATERMARK_DEFAULT_FONT_SIZE_PX,
+  WATERMARK_DEFAULT_FONT_WEIGHT,
+  WATERMARK_DEFAULT_GAP_PX,
+  WATERMARK_DEFAULT_OPACITY,
+  WATERMARK_DEFAULT_POINTER_EVENTS,
+  WATERMARK_DEFAULT_Z_INDEX
+} from "../../consts/Watermark/watermark.const.js";
+function escapeXml(raw) {
+  return raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function buildPatternUrl(options) {
+  const tile = options.gap + Math.max(options.fontSize, 1);
+  const cx = tile / 2;
+  const cy = tile / 2;
+  const opacityAttr = `opacity="${options.opacity}"`;
+  let glyph;
+  if (options.image) {
+    const safeHref = escapeXml(options.image);
+    const imgSize = Math.max(options.fontSize, 16);
+    glyph = `<image href="${safeHref}" x="${cx - imgSize / 2}" y="${cy - imgSize / 2}" width="${imgSize}" height="${imgSize}" preserveAspectRatio="xMidYMid meet" ${opacityAttr}/>`;
+  } else {
+    const safeText = escapeXml(options.text);
+    const safeFamily = escapeXml(options.fontFamily);
+    const safeColor = escapeXml(options.color);
+    const safeWeight = escapeXml(String(options.fontWeight));
+    glyph = `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="middle" fill="${safeColor}" font-size="${options.fontSize}" font-family="${safeFamily}" font-weight="${safeWeight}" ${opacityAttr}>${safeText}</text>`;
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tile}" height="${tile}" viewBox="0 0 ${tile} ${tile}"><g transform="rotate(${options.angle} ${cx} ${cy})">${glyph}</g></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function resolveOptions(raw) {
+  const opts = raw ?? {};
+  return {
+    text: opts.text ?? "",
+    image: opts.image ?? "",
+    opacity: typeof opts.opacity === "number" ? opts.opacity : WATERMARK_DEFAULT_OPACITY,
+    angle: typeof opts.angle === "number" ? opts.angle : WATERMARK_DEFAULT_ANGLE_DEG,
+    gap: typeof opts.gap === "number" ? opts.gap : WATERMARK_DEFAULT_GAP_PX,
+    fontSize: typeof opts.fontSize === "number" ? opts.fontSize : WATERMARK_DEFAULT_FONT_SIZE_PX,
+    fontFamily: opts.fontFamily ?? WATERMARK_DEFAULT_FONT_FAMILY,
+    color: opts.color ?? WATERMARK_DEFAULT_COLOR,
+    fontWeight: opts.fontWeight ?? WATERMARK_DEFAULT_FONT_WEIGHT,
+    pointerEvents: opts.pointerEvents ?? WATERMARK_DEFAULT_POINTER_EVENTS,
+    zIndex: typeof opts.zIndex === "number" ? opts.zIndex : WATERMARK_DEFAULT_Z_INDEX
+  };
+}
+function applyLayerStyles(layer, options, pattern) {
+  layer.style.position = "absolute";
+  layer.style.top = "0";
+  layer.style.right = "0";
+  layer.style.bottom = "0";
+  layer.style.left = "0";
+  layer.style.backgroundImage = pattern;
+  layer.style.backgroundRepeat = "repeat";
+  layer.style.pointerEvents = options.pointerEvents;
+  layer.style.zIndex = String(options.zIndex);
+  layer.style.userSelect = "none";
+  layer.setAttribute("aria-hidden", "true");
+  layer.setAttribute(WATERMARK_DATA_ATTR, "");
+}
+export function useWatermark(options = {}) {
+  const resolved = computed(() => {
+    const raw = isRef(options) || typeof options === "function" ? toValue(options) : options;
+    return resolveOptions(raw);
+  });
+  const patternUrl = computed(() => buildPatternUrl(resolved.value));
+  let layer = null;
+  let host = null;
+  let observer = null;
+  let reinjectScheduled = false;
+  const reinject = () => {
+    if (reinjectScheduled) return;
+    reinjectScheduled = true;
+    Promise.resolve().then(() => {
+      reinjectScheduled = false;
+      if (!host) return;
+      if (layer && host.contains(layer)) {
+        host.removeChild(layer);
+      }
+      layer = document.createElement("div");
+      applyLayerStyles(layer, resolved.value, patternUrl.value);
+      host.appendChild(layer);
+    });
+  };
+  const ensureObserver = () => {
+    if (observer || !host) return;
+    observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          let removed = false;
+          mutation.removedNodes.forEach((node) => {
+            if (node === layer) removed = true;
+          });
+          if (removed) {
+            reinject();
+            return;
+          }
+        } else if (mutation.type === "attributes" && mutation.target === layer) {
+          reinject();
+          return;
+        }
+      }
+    });
+    observer.observe(host, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ["style", "class", WATERMARK_DATA_ATTR],
+      subtree: false
+    });
+  };
+  const install = (target) => {
+    if (typeof document === "undefined") return null;
+    host = target ?? document.body;
+    if (!host) return null;
+    const computedPosition = getComputedStyle(host).position;
+    if (!computedPosition || computedPosition === "static") {
+      host.style.position = "relative";
+    }
+    layer = document.createElement("div");
+    applyLayerStyles(layer, resolved.value, patternUrl.value);
+    host.appendChild(layer);
+    if (resolved.value && options?.antiTamper) {
+      ensureObserver();
+    }
+    return layer;
+  };
+  const uninstall = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    if (layer && host && host.contains(layer)) {
+      host.removeChild(layer);
+    }
+    layer = null;
+    host = null;
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(uninstall);
+  }
+  return {
+    patternUrl,
+    install,
+    uninstall
+  };
+}