origam 2.2.1 → 2.5.0

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

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useParallaxRuntime = useParallaxRuntime;
+var _vue = require("vue");
+var _cssSupport = require("../CssSupport/cssSupport.composable.cjs");
+var _enums = require("../../enums/index.cjs");
+function usePrefersReducedMotion() {
+  const flag = (0, _vue.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);
+  }
+  (0, _vue.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 _enums.PARALLAX_DIRECTION.HORIZONTAL:
+      tx += centred * hostWidth * layer.speed;
+      break;
+    case _enums.PARALLAX_DIRECTION.BOTH:
+      tx += mouseRatio.x * hostWidth * 0.5 * layer.speed;
+      ty += centred * hostHeight * layer.speed;
+      break;
+    case _enums.PARALLAX_DIRECTION.VERTICAL:
+    default:
+      ty += centred * hostHeight * layer.speed;
+      break;
+  }
+  return `translate3d(${tx.toFixed(2)}px, ${ty.toFixed(2)}px, 0)`;
+}
+function useParallaxRuntime(options) {
+  const {
+    supports
+  } = (0, _cssSupport.useCssSupport)();
+  const cssScrollDriven = (0, _vue.computed)(() => supports("animation-timeline: scroll()") && options.easing.value === _enums.PARALLAX_EASING.LINEAR);
+  const reducedMotion = usePrefersReducedMotion();
+  const layers = (0, _vue.ref)([]);
+  const progress = (0, _vue.ref)(0);
+  const mouseRatio = (0, _vue.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 === _enums.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 !== _enums.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`);
+    }
+  };
+  (0, _vue.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);
+    }
+  });
+  (0, _vue.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);
+  });
+  (0, _vue.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/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/QrCode/qr-code.composable.cjs

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.__clearQrCodeCache = __clearQrCodeCache;
+exports.useQrCode = useQrCode;
+var _qrcodeGenerator = _interopRequireDefault(require("qrcode-generator"));
+var _vue = require("vue");
+var _qrCode = require("../../consts/QrCode/qr-code.const.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const matrixCache = /* @__PURE__ */new Map();
+function buildMatrix(value, ecc) {
+  const cacheKey = `${ecc}::${value}`;
+  const hit = matrixCache.get(cacheKey);
+  if (hit !== void 0) {
+    matrixCache.delete(cacheKey);
+    matrixCache.set(cacheKey, hit);
+    return hit;
+  }
+  const qr = (0, _qrcodeGenerator.default)(0, ecc);
+  qr.addData(value);
+  qr.make();
+  const count = qr.getModuleCount();
+  const matrix = [];
+  for (let row = 0; row < count; row++) {
+    const line = [];
+    for (let col = 0; col < count; col++) {
+      line.push(qr.isDark(row, col));
+    }
+    matrix.push(line);
+  }
+  matrixCache.set(cacheKey, matrix);
+  if (matrixCache.size > _qrCode.QR_CODE_LRU_CAPACITY) {
+    const oldest = matrixCache.keys().next().value;
+    if (oldest !== void 0) {
+      matrixCache.delete(oldest);
+    }
+  }
+  return matrix;
+}
+function escapeXmlAttr(raw) {
+  return raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function buildSvg(matrix, options) {
+  const count = matrix.length;
+  const viewSize = count + options.margin * 2;
+  const fg = escapeXmlAttr(options.foreground);
+  const bg = options.background;
+  const radiusAttr = options.cornerRadius > 0 ? ` rx="${options.cornerRadius}" ry="${options.cornerRadius}"` : "";
+  let rects = "";
+  for (let row = 0; row < count; row++) {
+    for (let col = 0; col < count; col++) {
+      if (matrix[row][col]) {
+        const x = col + options.margin;
+        const y = row + options.margin;
+        rects += `<rect x="${x}" y="${y}" width="1" height="1" fill="${fg}"${radiusAttr}/>`;
+      }
+    }
+  }
+  const backgroundRect = bg && bg !== "transparent" ? `<rect x="0" y="0" width="${viewSize}" height="${viewSize}" fill="${escapeXmlAttr(bg)}"/>` : "";
+  let logoMarkup = "";
+  if (options.logo && options.logo.src) {
+    const ratio = options.logo.size ?? _qrCode.QR_CODE_DEFAULT_LOGO_SIZE;
+    const padding = options.logo.padding ?? _qrCode.QR_CODE_DEFAULT_LOGO_PADDING;
+    const logoBg = options.logo.background ?? (bg && bg !== "transparent" ? bg : "#ffffff");
+    const logoBoxSize = count * ratio;
+    const logoX = options.margin + (count - logoBoxSize) / 2;
+    const logoY = options.margin + (count - logoBoxSize) / 2;
+    const paddingUnits = padding / 16;
+    const bdX = logoX - paddingUnits;
+    const bdY = logoY - paddingUnits;
+    const bdSize = logoBoxSize + paddingUnits * 2;
+    logoMarkup += `<rect x="${bdX}" y="${bdY}" width="${bdSize}" height="${bdSize}" fill="${escapeXmlAttr(logoBg)}"/>`;
+    logoMarkup += `<image href="${escapeXmlAttr(options.logo.src)}" x="${logoX}" y="${logoY}" width="${logoBoxSize}" height="${logoBoxSize}" preserveAspectRatio="xMidYMid meet"/>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${viewSize} ${viewSize}" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid meet">${backgroundRect}${rects}${logoMarkup}</svg>`;
+}
+function __clearQrCodeCache() {
+  matrixCache.clear();
+}
+function useQrCode(value, options = {}) {
+  const normalisedValue = (0, _vue.computed)(() => {
+    const resolved = (0, _vue.isRef)(value) || typeof value === "function" ? (0, _vue.toValue)(value) : value;
+    return typeof resolved === "string" ? resolved : String(resolved ?? "");
+  });
+  const normalisedOptions = (0, _vue.computed)(() => {
+    const raw = (0, _vue.isRef)(options) || typeof options === "function" ? (0, _vue.toValue)(options) : options;
+    const opts = raw ?? {};
+    const ratio = opts.logo?.size ?? _qrCode.QR_CODE_DEFAULT_LOGO_SIZE;
+    if (opts.logo?.src && ratio > _qrCode.QR_CODE_OVERLAY_MAX_RATIO && typeof console !== "undefined") {
+      console.warn(`[origam] useQrCode: logo size ${ratio} exceeds the recommended max (${_qrCode.QR_CODE_OVERLAY_MAX_RATIO}). Scanners may fail to decode the matrix; consider increasing error-correction to "H" or shrinking the logo.`);
+    }
+    return {
+      errorCorrectionLevel: opts.errorCorrectionLevel ?? _qrCode.QR_CODE_DEFAULT_ECC,
+      foreground: opts.foreground ?? "currentColor",
+      background: opts.background ?? "transparent",
+      margin: typeof opts.margin === "number" ? opts.margin : _qrCode.QR_CODE_DEFAULT_MARGIN,
+      cornerRadius: typeof opts.cornerRadius === "number" ? opts.cornerRadius : 0,
+      logo: opts.logo
+    };
+  });
+  const modules = (0, _vue.computed)(() => buildMatrix(normalisedValue.value, normalisedOptions.value.errorCorrectionLevel));
+  const size = (0, _vue.computed)(() => modules.value.length);
+  const svg = (0, _vue.computed)(() => buildSvg(modules.value, normalisedOptions.value));
+  return {
+    svg,
+    modules,
+    size
+  };
+}

package/dist/src/composables/QrCode/qr-code.composable.d.ts

@@ -0,0 +1,31 @@
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { IUseQrCodeOptions } from '../../interfaces';
+/**
+ * Test helper — clears the module-level matrix LRU. Exposed for the
+ * unit-test suite and not advertised publicly.
+ */
+export declare function __clearQrCodeCache(): void;
+/**
+ * Headless QR-code composable. Encodes `value` through
+ * `qrcode-generator` (Reed-Solomon + matrix masking handled by the
+ * library) and rebuilds an SVG fragment on every reactive change.
+ *
+ * The composable is SSR-safe — no DOM API is touched, the encoder is
+ * pure JS, and the SVG string is suitable for `v-html` on both client
+ * and server.
+ *
+ * @example
+ * ```ts
+ * const value = ref('https://origam.dev')
+ * const { svg, modules, size } = useQrCode(value, {
+ *     errorCorrectionLevel: 'M',
+ *     foreground: '#000',
+ *     background: '#fff'
+ * })
+ * ```
+ */
+export declare function useQrCode(value: MaybeRefOrGetter<string>, options?: MaybeRefOrGetter<IUseQrCodeOptions>): {
+    svg: ComputedRef<string>;
+    modules: ComputedRef<boolean[][]>;
+    size: ComputedRef<number>;
+};