origam 2.2.1 → 2.5.0

package/dist/src/composables/Textarea/textarea-rich.composable.js

@@ -0,0 +1,257 @@
+import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import { TEXTAREA_TOOLBAR_COMMAND } from "../../enums/index.js";
+import { sanitizeHtml } from "../../utils/index.js";
+export function useTextareaRich(options) {
+  const hostRef = ref();
+  const active = reactive({
+    bold: false,
+    italic: false,
+    underline: false,
+    code: false,
+    link: false,
+    listBullet: false,
+    listOrdered: false,
+    heading: 0
+  });
+  let selectionListener = null;
+  onMounted(() => {
+    if (!hostRef.value) return;
+    hostRef.value.innerHTML = sanitizeHtml(options.value());
+    selectionListener = () => {
+      const sel = document.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const node = sel.anchorNode;
+      if (!node || !hostRef.value?.contains(node)) return;
+      syncActiveState();
+    };
+    document.addEventListener("selectionchange", selectionListener);
+  });
+  onBeforeUnmount(() => {
+    if (selectionListener) {
+      document.removeEventListener("selectionchange", selectionListener);
+      selectionListener = null;
+    }
+  });
+  function syncActiveState() {
+    if (typeof document === "undefined") return;
+    try {
+      active.bold = document.queryCommandState("bold");
+      active.italic = document.queryCommandState("italic");
+      active.underline = document.queryCommandState("underline");
+      active.listBullet = document.queryCommandState("insertUnorderedList");
+      active.listOrdered = document.queryCommandState("insertOrderedList");
+    } catch {
+    }
+    active.code = isInsideTag("code");
+    active.link = isInsideTag("a");
+    const headingLevel = currentHeadingLevel();
+    active.heading = headingLevel;
+  }
+  function isInsideTag(tag) {
+    if (typeof document === "undefined" || !hostRef.value) return false;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    let node = sel.anchorNode;
+    while (node && node !== hostRef.value) {
+      if (node.nodeType === 1 && node.tagName.toLowerCase() === tag) return true;
+      node = node.parentNode;
+    }
+    return false;
+  }
+  function currentHeadingLevel() {
+    if (typeof document === "undefined" || !hostRef.value) return 0;
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return 0;
+    let node = sel.anchorNode;
+    while (node && node !== hostRef.value) {
+      if (node.nodeType === 1) {
+        const t = node.tagName.toLowerCase();
+        if (t === "h1") return 1;
+        if (t === "h2") return 2;
+        if (t === "h3") return 3;
+      }
+      node = node.parentNode;
+    }
+    return 0;
+  }
+  function format(command, value) {
+    if (options.disabled()) return;
+    if (typeof document === "undefined") return;
+    hostRef.value?.focus();
+    switch (command) {
+      case TEXTAREA_TOOLBAR_COMMAND.BOLD:
+        document.execCommand("bold");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.ITALIC:
+        document.execCommand("italic");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.UNDERLINE:
+        document.execCommand("underline");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.LINK: {
+        const url = (value ?? "").trim();
+        if (url === "") return;
+        document.execCommand("createLink", false, url);
+        break;
+      }
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET:
+        document.execCommand("insertUnorderedList");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED:
+        document.execCommand("insertOrderedList");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING:
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_1:
+        applyHeadingCycle(["H1", "H2", "H3"]);
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_2:
+        document.execCommand("formatBlock", false, "H2");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_3:
+        document.execCommand("formatBlock", false, "H3");
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE:
+        toggleInlineCode();
+        break;
+      case TEXTAREA_TOOLBAR_COMMAND.CLEAR_FORMAT:
+        document.execCommand("removeFormat");
+        document.execCommand("formatBlock", false, "P");
+        break;
+    }
+    options.onFormat(command, value);
+    emitSanitised();
+    syncActiveState();
+  }
+  function applyHeadingCycle(levels) {
+    const current = currentHeadingLevel();
+    if (current === 0) {
+      document.execCommand("formatBlock", false, levels[0]);
+    } else if (current < levels.length) {
+      document.execCommand("formatBlock", false, levels[current]);
+    } else {
+      document.execCommand("formatBlock", false, "P");
+    }
+  }
+  function toggleInlineCode() {
+    if (active.code) {
+      document.execCommand("removeFormat");
+      return;
+    }
+    const sel = document.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const text = sel.toString();
+    if (text === "") {
+      document.execCommand("insertHTML", false, "<code>&#8203;</code>");
+      return;
+    }
+    const escaped = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    document.execCommand("insertHTML", false, `<code>${escaped}</code>`);
+  }
+  function emitSanitised() {
+    if (!hostRef.value) return;
+    const raw = hostRef.value.innerHTML;
+    const cleaned = sanitizeHtml(raw);
+    options.onUpdate(cleaned);
+  }
+  function onInput() {
+    emitSanitised();
+  }
+  function onKeydown(event) {
+    if (options.disabled()) return;
+    const metaOrCtrl = event.metaKey || event.ctrlKey;
+    if (!metaOrCtrl) return;
+    const key = event.key.toLowerCase();
+    if (event.shiftKey) {
+      if (key === "7") {
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED);
+        return;
+      }
+      if (key === "8") {
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET);
+        return;
+      }
+    }
+    switch (key) {
+      case "b":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.BOLD);
+        return;
+      case "i":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.ITALIC);
+        return;
+      case "u":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.UNDERLINE);
+        return;
+      case "e":
+        event.preventDefault();
+        format(TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE);
+        return;
+      case "k":
+        event.preventDefault();
+        options.onFormat(TEXTAREA_TOOLBAR_COMMAND.LINK);
+        return;
+    }
+  }
+  function onPaste(event) {
+    if (options.disabled()) return;
+    event.preventDefault();
+    const dt = event.clipboardData;
+    if (!dt) return;
+    const html = dt.getData("text/html");
+    const text = dt.getData("text/plain");
+    const payload = html ? sanitizeHtml(html) : escapeText(text);
+    document.execCommand("insertHTML", false, payload);
+    emitSanitised();
+  }
+  function escapeText(s) {
+    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");
+  }
+  function setValue(html) {
+    if (!hostRef.value) return;
+    const clean = sanitizeHtml(html);
+    if (hostRef.value.innerHTML !== clean) {
+      hostRef.value.innerHTML = clean;
+    }
+  }
+  function isFormatActive(command) {
+    switch (command) {
+      case TEXTAREA_TOOLBAR_COMMAND.BOLD:
+        return active.bold;
+      case TEXTAREA_TOOLBAR_COMMAND.ITALIC:
+        return active.italic;
+      case TEXTAREA_TOOLBAR_COMMAND.UNDERLINE:
+        return active.underline;
+      case TEXTAREA_TOOLBAR_COMMAND.CODE_INLINE:
+        return active.code;
+      case TEXTAREA_TOOLBAR_COMMAND.LINK:
+        return active.link;
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_BULLET:
+        return active.listBullet;
+      case TEXTAREA_TOOLBAR_COMMAND.LIST_ORDERED:
+        return active.listOrdered;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING:
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_1:
+        return active.heading === 1;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_2:
+        return active.heading === 2;
+      case TEXTAREA_TOOLBAR_COMMAND.HEADING_3:
+        return active.heading === 3;
+      default:
+        return false;
+    }
+  }
+  return {
+    hostRef,
+    active,
+    format,
+    isFormatActive,
+    setValue,
+    onInput,
+    onKeydown,
+    onPaste
+  };
+}

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

@@ -7,13 +7,12 @@ exports.applyThemeSync = applyThemeSync;
 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;
 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,15 +21,15 @@ 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 useTheme() {

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

@@ -1,6 +1,5 @@
 import { computed, onMounted, onUnmounted, readonly, ref, watch } from "vue";
-const STORAGE_KEY = "origam-theme";
-const ATTR = "data-theme";
+import { ORIGAM_THEME_ATTR as ATTR, ORIGAM_THEME_STORAGE_KEY as STORAGE_KEY } from "../../consts/Theme/theme.const.js";
 let _theme = null;
 function readPersisted() {
   if (typeof window === "undefined") return "auto";

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();
+}