flipfolio 0.1.0

package/dist/react.js

@@ -0,0 +1,108 @@
+import {
+  __objRest,
+  __spreadValues,
+  createFolderGallery
+} from "./chunk-DT6YOBGV.js";
+
+// src/folder-gallery-react.js
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+var FolderGallery = forwardRef(function FolderGallery2(props, ref) {
+  const _a = props, {
+    items,
+    mode = "stack",
+    peek = "hover",
+    contentRenderer,
+    onSelect,
+    onActiveChange,
+    onModeChange,
+    folderPath,
+    loop,
+    scrollNav,
+    reducedMotion,
+    defaultActiveIndex,
+    label,
+    className,
+    style
+  } = _a, rest = __objRest(_a, [
+    "items",
+    "mode",
+    "peek",
+    "contentRenderer",
+    "onSelect",
+    "onActiveChange",
+    "onModeChange",
+    "folderPath",
+    "loop",
+    "scrollNav",
+    "reducedMotion",
+    "defaultActiveIndex",
+    "label",
+    "className",
+    "style"
+  ]);
+  const rootRef = useRef(null);
+  const handleRef = useRef(null);
+  const callbacksRef = useRef({});
+  callbacksRef.current = { onSelect, onActiveChange, onModeChange, contentRenderer };
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    const handle = createFolderGallery(root, {
+      items,
+      mode,
+      peek,
+      folderPath,
+      loop,
+      scrollNav,
+      reducedMotion,
+      defaultActiveIndex,
+      label,
+      contentRenderer: callbacksRef.current.contentRenderer ? (card, item, i) => callbacksRef.current.contentRenderer(card, item, i) : void 0,
+      onSelect: (item, i) => {
+        const fn = callbacksRef.current.onSelect;
+        if (fn) fn(item, i);
+      }
+    });
+    handleRef.current = handle;
+    const onActive = (e) => {
+      const fn = callbacksRef.current.onActiveChange;
+      if (fn) fn(e.detail.index, e.detail.item);
+    };
+    const onModeEv = (e) => {
+      const fn = callbacksRef.current.onModeChange;
+      if (fn) fn(e.detail.mode);
+    };
+    root.addEventListener("fg-activechange", onActive);
+    root.addEventListener("fg-modechange", onModeEv);
+    return () => {
+      root.removeEventListener("fg-activechange", onActive);
+      root.removeEventListener("fg-modechange", onModeEv);
+      handle.destroy();
+      handleRef.current = null;
+    };
+  }, [items, folderPath, loop, scrollNav, reducedMotion, defaultActiveIndex, label]);
+  useEffect(() => {
+    if (handleRef.current && handleRef.current.getMode() !== mode) {
+      handleRef.current.setMode(mode);
+    }
+  }, [mode]);
+  useEffect(() => {
+    if (handleRef.current) handleRef.current.setPeek(peek);
+  }, [peek]);
+  useImperativeHandle(ref, () => ({
+    next: () => handleRef.current && handleRef.current.next(),
+    prev: () => handleRef.current && handleRef.current.prev(),
+    goTo: (i) => handleRef.current && handleRef.current.goTo(i),
+    setMode: (m) => handleRef.current && handleRef.current.setMode(m),
+    setPeek: (p) => handleRef.current && handleRef.current.setPeek(p),
+    getActiveIndex: () => handleRef.current ? handleRef.current.getActiveIndex() : -1,
+    getMode: () => handleRef.current ? handleRef.current.getMode() : mode
+  }), [mode]);
+  return createElement("div", __spreadValues({ ref: rootRef, className, style }, rest));
+});
+var folder_gallery_react_default = FolderGallery;
+export {
+  FolderGallery,
+  folder_gallery_react_default as default
+};
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/folder-gallery-react.js"],"sourcesContent":["/* ============================================================================\n * folder-gallery/react - thin React wrapper over the framework-agnostic core.\n *\n *   import { FolderGallery } from 'folder-gallery/react';\n *   import 'folder-gallery/styles.css';\n *\n *   <FolderGallery\n *     items={items}\n *     mode=\"stack\"\n *     onSelect={(item, i) => ...}\n *     ref={galleryRef}          // -> { next, prev, goTo, setMode, getActiveIndex, getMode }\n *   />\n *\n * Written without JSX so the package builds with no React toolchain;\n * React is a peer dependency and only resolved in the consumer's app.\n * ========================================================================== */\n\nimport { createElement, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { createFolderGallery } from './folder-gallery.js';\n\nexport const FolderGallery = forwardRef(function FolderGallery(props, ref) {\n  const {\n    items,\n    mode = 'stack',\n    peek = 'hover',\n    contentRenderer,\n    onSelect,\n    onActiveChange,\n    onModeChange,\n    folderPath,\n    loop,\n    scrollNav,\n    reducedMotion,\n    defaultActiveIndex,\n    label,\n    className,\n    style,\n    ...rest\n  } = props;\n\n  const rootRef = useRef(null);\n  const handleRef = useRef(null);\n\n  // Callbacks live in refs so a new inline closure per render doesn't force a\n  // full gallery rebuild (and the core never holds a stale reference).\n  const callbacksRef = useRef({});\n  callbacksRef.current = { onSelect, onActiveChange, onModeChange, contentRenderer };\n\n  // (Re)build when the structural inputs change.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return undefined;\n\n    const handle = createFolderGallery(root, {\n      items,\n      mode,\n      peek,\n      folderPath,\n      loop,\n      scrollNav,\n      reducedMotion,\n      defaultActiveIndex,\n      label,\n      contentRenderer: callbacksRef.current.contentRenderer\n        ? (card, item, i) => callbacksRef.current.contentRenderer(card, item, i)\n        : undefined,\n      onSelect: (item, i) => {\n        const fn = callbacksRef.current.onSelect;\n        if (fn) fn(item, i);\n      },\n    });\n    handleRef.current = handle;\n\n    const onActive = (e) => {\n      const fn = callbacksRef.current.onActiveChange;\n      if (fn) fn(e.detail.index, e.detail.item);\n    };\n    const onModeEv = (e) => {\n      const fn = callbacksRef.current.onModeChange;\n      if (fn) fn(e.detail.mode);\n    };\n    root.addEventListener('fg-activechange', onActive);\n    root.addEventListener('fg-modechange', onModeEv);\n\n    return () => {\n      root.removeEventListener('fg-activechange', onActive);\n      root.removeEventListener('fg-modechange', onModeEv);\n      handle.destroy();\n      handleRef.current = null;\n    };\n    // mode and peek are handled by the effects below without a rebuild.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, folderPath, loop, scrollNav, reducedMotion, defaultActiveIndex, label]);\n\n  // Mode changes reuse the live instance.\n  useEffect(() => {\n    if (handleRef.current && handleRef.current.getMode() !== mode) {\n      handleRef.current.setMode(mode);\n    }\n  }, [mode]);\n\n  // Peek changes reuse the live instance too.\n  useEffect(() => {\n    if (handleRef.current) handleRef.current.setPeek(peek);\n  }, [peek]);\n\n  useImperativeHandle(ref, () => ({\n    next: () => handleRef.current && handleRef.current.next(),\n    prev: () => handleRef.current && handleRef.current.prev(),\n    goTo: (i) => handleRef.current && handleRef.current.goTo(i),\n    setMode: (m) => handleRef.current && handleRef.current.setMode(m),\n    setPeek: (p) => handleRef.current && handleRef.current.setPeek(p),\n    getActiveIndex: () => (handleRef.current ? handleRef.current.getActiveIndex() : -1),\n    getMode: () => (handleRef.current ? handleRef.current.getMode() : mode),\n  }), [mode]);\n\n  return createElement('div', { ref: rootRef, className, style, ...rest });\n});\n\nexport default FolderGallery;\n"],"mappings":"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","names":["FolderGallery"]}

package/dist/vue.cjs

@@ -0,0 +1,519 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/folder-gallery-vue.js
+var folder_gallery_vue_exports = {};
+__export(folder_gallery_vue_exports, {
+  FolderGallery: () => FolderGallery,
+  default: () => folder_gallery_vue_default
+});
+module.exports = __toCommonJS(folder_gallery_vue_exports);
+var import_vue = require("vue");
+
+// src/folder-gallery.js
+var SVG_NS = "http://www.w3.org/2000/svg";
+var DEFAULT_FOLDER_PATH = "M 0 22 C 0 10 10 0 22 0 L 155 0 C 168 0 172 6 176 14 C 180 24 188 32 204 32 L 458 32 C 470 32 480 42 480 54 L 480 320 C 480 332 470 342 458 342 L 22 342 C 10 342 0 332 0 320 Z";
+var DEFAULTS = {
+  mode: "stack",
+  // 'stack' | 'grid' | 'carousel'
+  folderPath: DEFAULT_FOLDER_PATH,
+  loop: true,
+  scrollNav: true,
+  reducedMotion: "auto",
+  // 'auto' | 'off' | 'force'
+  peek: "hover",
+  // 'hover' | 'always' | 'off'
+  defaultActiveIndex: 0,
+  label: "Folder gallery"
+};
+var PEEK_MODES = /* @__PURE__ */ new Set(["hover", "always", "off"]);
+var MODE_WIDTHS = { stack: 480, grid: 720, carousel: 720 };
+var SCROLL_THRESHOLD = 30;
+var SCROLL_COOLDOWN = { stack: 450, carousel: 300 };
+function hexToRgb(hex) {
+  const h2 = String(hex).replace("#", "");
+  return [parseInt(h2.slice(0, 2), 16), parseInt(h2.slice(2, 4), 16), parseInt(h2.slice(4, 6), 16)];
+}
+function folderColors(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  const dn = (v) => Math.max(v - 30, 0);
+  const up = (v, o) => Math.min(v + o, 255);
+  const fr = up(r, 35);
+  const fg = up(g, 35);
+  const fb = up(b, 35);
+  const yiq = (fr * 299 + fg * 587 + fb * 114) / 1e3;
+  return {
+    back: `rgb(${dn(r)},${dn(g)},${dn(b)})`,
+    front: `rgba(${up(r, 40)},${up(g, 40)},${up(b, 40)},0.55)`,
+    frontSolid: `rgb(${fr},${fg},${fb})`,
+    label: yiq >= 128 ? "#1c1c1a" : "#ffffff"
+  };
+}
+function defaultContentRenderer(card, item) {
+  const wrap = document.createElement("div");
+  wrap.className = "fg-content";
+  if (item.content && typeof item.content === "object" && typeof item.content.nodeType === "number") {
+    wrap.appendChild(item.content);
+  } else if (typeof item.content === "string") {
+    wrap.innerHTML = item.content;
+  } else if (item.src) {
+    const img = document.createElement("img");
+    img.className = "fg-image";
+    img.src = item.src;
+    img.alt = item.label || "";
+    img.loading = "lazy";
+    img.decoding = "async";
+    wrap.appendChild(img);
+  }
+  card.appendChild(wrap);
+}
+function createFolderGallery(root, options = {}) {
+  if (!root || !root.nodeType) throw new Error("createFolderGallery: a root element is required");
+  const opts = __spreadValues(__spreadValues({}, DEFAULTS), options);
+  const items = Array.isArray(opts.items) ? opts.items : [];
+  const n = items.length;
+  const renderContent = typeof opts.contentRenderer === "function" ? opts.contentRenderer : defaultContentRenderer;
+  const reduced = opts.reducedMotion === "force" || opts.reducedMotion !== "off" && typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  let mode = MODE_WIDTHS[opts.mode] ? opts.mode : "stack";
+  let active = Math.min(Math.max(opts.defaultActiveIndex | 0, 0), Math.max(n - 1, 0));
+  let scrollCooldown = false;
+  let scrollAccum = 0;
+  const cleanups = [];
+  const on = (el, ev, fn, o) => {
+    el.addEventListener(ev, fn, o);
+    cleanups.push(() => el.removeEventListener(ev, fn, o));
+  };
+  const emit = (name, detail) => root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+  root.classList.add("fg-root");
+  root.setAttribute("data-fg-mode", mode);
+  root.setAttribute("data-fg-peek", PEEK_MODES.has(opts.peek) ? opts.peek : "hover");
+  const scene = document.createElement("div");
+  scene.className = "fg-scene";
+  scene.setAttribute("role", "listbox");
+  scene.setAttribute("aria-label", opts.label);
+  scene.setAttribute("aria-roledescription", "folder gallery");
+  const dotsEl = document.createElement("div");
+  dotsEl.className = "fg-dots";
+  dotsEl.setAttribute("role", "tablist");
+  const live = document.createElement("div");
+  live.className = "fg-sr-only";
+  live.setAttribute("aria-live", "polite");
+  live.setAttribute("aria-atomic", "true");
+  root.append(scene, dotsEl, live);
+  function teardown() {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+    root.replaceChildren();
+    root.classList.remove("fg-root");
+    root.removeAttribute("data-fg-mode");
+    root.removeAttribute("data-fg-peek");
+  }
+  if (n === 0) {
+    return { next() {
+    }, prev() {
+    }, goTo() {
+    }, setMode() {
+    }, setPeek() {
+    }, getActiveIndex: () => -1, getMode: () => mode, destroy: teardown };
+  }
+  function setCardTransform(card, { x, y, z, rx, ry, s, zIndex, opacity, isActive }) {
+    card.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`;
+    card.style.transformOrigin = "center bottom";
+    card.style.zIndex = String(zIndex);
+    card.style.opacity = String(opacity);
+    card.setAttribute("aria-selected", isActive ? "true" : "false");
+    card.classList.toggle("is-active", isActive);
+  }
+  const cardEls = items.map((item, i) => {
+    const card = document.createElement("div");
+    card.className = "fg-card";
+    card.tabIndex = i === active ? 0 : -1;
+    card.setAttribute("role", "option");
+    card.setAttribute("aria-label", item.label || `Item ${i + 1}`);
+    if (item.color) {
+      const c = folderColors(item.color);
+      card.style.setProperty("--fg-folder-bg", item.color);
+      card.style.setProperty("--fg-front", c.front);
+      card.style.setProperty("--fg-front-solid", c.frontSolid);
+      card.style.setProperty("--fg-label-on-color", c.label);
+    }
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("class", "fg-folder");
+    svg.setAttribute("viewBox", "0 0 480 342");
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.setAttribute("aria-hidden", "true");
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute("d", opts.folderPath);
+    path.setAttribute("fill", item.color ? folderColors(item.color).back : "var(--fg-folder-bg)");
+    svg.appendChild(path);
+    card.appendChild(svg);
+    renderContent(card, item, i);
+    const front = document.createElement("div");
+    front.className = "fg-front";
+    if (item.decal) {
+      card.classList.add("fg-card--decal");
+      const photo = document.createElement("img");
+      photo.className = "fg-decal";
+      photo.src = item.decal;
+      photo.alt = "";
+      photo.loading = "lazy";
+      photo.decoding = "async";
+      front.appendChild(photo);
+    }
+    if (item.label) {
+      const label = document.createElement("div");
+      label.className = "fg-label";
+      label.textContent = item.label;
+      front.appendChild(label);
+    }
+    card.appendChild(front);
+    scene.appendChild(card);
+    return card;
+  });
+  const dots = cardEls.map((_, i) => {
+    const dot = document.createElement("button");
+    dot.type = "button";
+    dot.className = "fg-dot";
+    dot.setAttribute("role", "tab");
+    dot.setAttribute("aria-label", items[i].label || `Go to ${i + 1}`);
+    on(dot, "click", () => goTo(i));
+    dotsEl.appendChild(dot);
+    return dot;
+  });
+  function layoutStack() {
+    scene.style.height = "";
+    cardEls.forEach((card, i) => {
+      const behind = (i - active + n) % n;
+      if (behind === 0) {
+        setCardTransform(card, { x: 0, y: 100, z: 20, rx: 0, ry: 0, s: 1, zIndex: n + 1, opacity: 1, isActive: true });
+        return;
+      }
+      const safeN = Math.max(n - 1, 1);
+      const tz = -behind * 25 - behind * behind * 3;
+      const rx = reduced ? 0 : -behind * 3;
+      const ty = 100 - behind * 28 - behind * behind * 2;
+      const sc = 1 - behind * 0.06 - behind / safeN * (behind / safeN) * 0.04;
+      setCardTransform(card, { x: 0, y: ty, z: tz, rx, ry: 0, s: Math.max(sc, 0.5), zIndex: n - behind, opacity: 1 - behind * 0.08, isActive: false });
+    });
+  }
+  function layoutGrid() {
+    const sceneW = scene.clientWidth || MODE_WIDTHS.grid;
+    const cols = sceneW < 520 ? 2 : n <= 4 ? 2 : 3;
+    const gap = 16;
+    const cardW = sceneW;
+    const cardH = sceneW * (2 / 3);
+    const sc = (sceneW - (cols - 1) * gap) / (cols * cardW);
+    const scaledW = cardW * sc;
+    const scaledH = cardH * sc;
+    const tabScaled = 22 * sc;
+    const rows = Math.ceil(n / cols);
+    cardEls.forEach((card, i) => {
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      const itemsInRow = Math.min(cols, n - row * cols);
+      const rowW = itemsInRow * scaledW + (itemsInRow - 1) * gap;
+      const rowStartX = (sceneW - rowW) / 2;
+      const cellLeft = rowStartX + col * (scaledW + gap);
+      const cellTop = row * (scaledH + tabScaled + gap) + tabScaled;
+      const tx = cellLeft + scaledW / 2 - cardW / 2;
+      const ty = cellTop + scaledH - cardH;
+      setCardTransform(card, { x: tx, y: ty, z: 0, rx: 0, ry: 0, s: sc, zIndex: i === active ? 2 : 1, opacity: 1, isActive: i === active });
+    });
+    scene.style.height = rows * (scaledH + tabScaled + gap) + 20 + "px";
+  }
+  function layoutCarousel() {
+    const sceneW = scene.clientWidth || MODE_WIDTHS.carousel;
+    const cardW = sceneW;
+    const cardH = cardW * (2 / 3);
+    const activeSc = 0.62;
+    const activeW = cardW * activeSc;
+    const sceneH = Math.max(cardH * activeSc + 40, 180);
+    scene.style.height = sceneH + "px";
+    const offsetStep = Math.min(130, (sceneW - activeW) / 4);
+    cardEls.forEach((card, i) => {
+      let offset = i - active;
+      if (n > 2 && offset > Math.floor(n / 2)) offset -= n;
+      if (n > 2 && offset < -Math.floor(n / 2)) offset += n;
+      const sc = Math.max(activeSc - Math.abs(offset) * 0.06, 0.28);
+      const z = -Math.abs(offset) * 50;
+      const op = Math.max(1 - Math.abs(offset) * 0.25, 0.15);
+      const tx = sceneW / 2 + offset * offsetStep - cardW / 2;
+      const ty = sceneH - 20 - cardH;
+      setCardTransform(card, { x: tx, y: ty, z, rx: 0, ry: 0, s: sc, zIndex: n - Math.abs(offset), opacity: op, isActive: offset === 0 });
+    });
+  }
+  function sizeScene() {
+    scene.style.width = `min(${MODE_WIDTHS[mode]}px, 92vw)`;
+  }
+  function applyLayout() {
+    sizeScene();
+    (mode === "grid" ? layoutGrid : mode === "carousel" ? layoutCarousel : layoutStack)();
+    dots.forEach((d, i) => {
+      d.classList.toggle("is-active", i === active);
+      d.setAttribute("aria-selected", i === active ? "true" : "false");
+    });
+    cardEls.forEach((c, i) => {
+      c.tabIndex = i === active ? 0 : -1;
+    });
+    const cur = items[active];
+    live.textContent = cur && cur.label ? `${active + 1} of ${n}: ${cur.label}` : `${active + 1} of ${n}`;
+  }
+  function goTo(i) {
+    const next = opts.loop ? (i % n + n) % n : Math.min(Math.max(i, 0), n - 1);
+    if (next === active) return;
+    active = next;
+    applyLayout();
+    emit("fg-activechange", { index: active, item: items[active] });
+  }
+  function select(i) {
+    emit("fg-select", { index: i, item: items[i] });
+    if (typeof opts.onSelect === "function") opts.onSelect(items[i], i);
+  }
+  function setMode(m) {
+    if (m === mode || !MODE_WIDTHS[m]) return;
+    mode = m;
+    root.setAttribute("data-fg-mode", mode);
+    applyLayout();
+    emit("fg-modechange", { mode });
+  }
+  function setPeek(p) {
+    if (!PEEK_MODES.has(p)) return;
+    root.setAttribute("data-fg-peek", p);
+  }
+  cardEls.forEach((card, i) => {
+    on(card, "click", () => {
+      i === active ? select(i) : goTo(i);
+    });
+    on(card, "keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        select(i);
+      }
+    });
+  });
+  function handleArrowKeys(e) {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      goTo(active + 1);
+      return true;
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      goTo(active - 1);
+      return true;
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      goTo(0);
+      return true;
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      goTo(n - 1);
+      return true;
+    }
+    return false;
+  }
+  on(scene, "keydown", (e) => {
+    if (handleArrowKeys(e)) cardEls[active].focus();
+  });
+  on(dotsEl, "keydown", (e) => {
+    if (handleArrowKeys(e)) cardEls[active].focus();
+  });
+  let hovered = false;
+  on(root, "mouseenter", () => {
+    hovered = true;
+  });
+  on(root, "mouseleave", () => {
+    hovered = false;
+  });
+  on(document, "keydown", (e) => {
+    if (!hovered) return;
+    const ae = document.activeElement;
+    if (ae && ae !== document.body && !root.contains(ae)) return;
+    handleArrowKeys(e);
+  });
+  if (opts.scrollNav) {
+    on(root, "wheel", (e) => {
+      if (mode === "grid") return;
+      const atStart = !opts.loop && active === 0 && e.deltaY < 0;
+      const atEnd = !opts.loop && active === n - 1 && e.deltaY > 0;
+      if (atStart || atEnd) return;
+      e.preventDefault();
+      if (scrollCooldown) return;
+      scrollAccum += e.deltaY;
+      if (Math.abs(scrollAccum) >= SCROLL_THRESHOLD) {
+        const dir = scrollAccum > 0 ? 1 : -1;
+        scrollAccum = 0;
+        scrollCooldown = true;
+        goTo(active + dir);
+        setTimeout(() => {
+          scrollCooldown = false;
+          scrollAccum = 0;
+        }, SCROLL_COOLDOWN[mode] || 300);
+      }
+    }, { passive: false });
+  }
+  let touchStartX = 0;
+  let touchStartY = 0;
+  on(scene, "touchstart", (e) => {
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+  }, { passive: true });
+  on(scene, "touchend", (e) => {
+    const dx = touchStartX - e.changedTouches[0].clientX;
+    const dy = touchStartY - e.changedTouches[0].clientY;
+    const ax = Math.abs(dx);
+    const ay = Math.abs(dy);
+    if (Math.max(ax, ay) < 40) return;
+    const dir = ax > ay ? dx > 0 ? 1 : -1 : dy > 0 ? 1 : -1;
+    goTo(active + dir);
+  }, { passive: true });
+  let resizeTimer;
+  on(window, "resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(applyLayout, 150);
+  });
+  applyLayout();
+  return {
+    next: () => goTo(active + 1),
+    prev: () => goTo(active - 1),
+    goTo,
+    setMode,
+    setPeek,
+    getActiveIndex: () => active,
+    getMode: () => mode,
+    destroy: teardown
+  };
+}
+
+// src/folder-gallery-vue.js
+var FolderGallery = (0, import_vue.defineComponent)({
+  name: "FolderGallery",
+  props: {
+    items: { type: Array, default: () => [] },
+    mode: { type: String, default: "stack" },
+    peek: { type: String, default: "hover" },
+    contentRenderer: { type: Function, default: void 0 },
+    folderPath: { type: String, default: void 0 },
+    loop: { type: Boolean, default: void 0 },
+    scrollNav: { type: Boolean, default: void 0 },
+    reducedMotion: { type: String, default: void 0 },
+    defaultActiveIndex: { type: Number, default: void 0 },
+    label: { type: String, default: void 0 }
+  },
+  // emit('select', ...) dispatches to the current @select handler, so there is
+  // no stale-closure problem the React wrapper has to work around with refs.
+  emits: ["select", "active-change", "mode-change"],
+  setup(props, { emit, expose }) {
+    const rootRef = (0, import_vue.ref)(null);
+    let handle = null;
+    function onActive(e) {
+      emit("active-change", e.detail.index, e.detail.item);
+    }
+    function onModeEv(e) {
+      emit("mode-change", e.detail.mode);
+    }
+    function build() {
+      const root = rootRef.value;
+      if (!root) return;
+      handle = createFolderGallery(root, {
+        items: props.items,
+        mode: props.mode,
+        peek: props.peek,
+        folderPath: props.folderPath,
+        loop: props.loop,
+        scrollNav: props.scrollNav,
+        reducedMotion: props.reducedMotion,
+        defaultActiveIndex: props.defaultActiveIndex,
+        label: props.label,
+        // Read props.contentRenderer at call time so a swapped renderer is
+        // picked up on the next (structural) rebuild without a stale ref.
+        contentRenderer: props.contentRenderer ? (card, item, i) => props.contentRenderer(card, item, i) : void 0,
+        onSelect: (item, i) => emit("select", item, i)
+      });
+      root.addEventListener("fg-activechange", onActive);
+      root.addEventListener("fg-modechange", onModeEv);
+    }
+    function teardown() {
+      const root = rootRef.value;
+      if (root) {
+        root.removeEventListener("fg-activechange", onActive);
+        root.removeEventListener("fg-modechange", onModeEv);
+      }
+      if (handle) {
+        handle.destroy();
+        handle = null;
+      }
+    }
+    (0, import_vue.onMounted)(build);
+    (0, import_vue.onBeforeUnmount)(teardown);
+    (0, import_vue.watch)(
+      [
+        () => props.items,
+        () => props.folderPath,
+        () => props.loop,
+        () => props.scrollNav,
+        () => props.reducedMotion,
+        () => props.defaultActiveIndex,
+        () => props.label
+      ],
+      () => {
+        teardown();
+        build();
+      }
+    );
+    (0, import_vue.watch)(() => props.mode, (m) => {
+      if (handle && handle.getMode() !== m) handle.setMode(m);
+    });
+    (0, import_vue.watch)(() => props.peek, (p) => {
+      if (handle) handle.setPeek(p);
+    });
+    expose({
+      next: () => handle && handle.next(),
+      prev: () => handle && handle.prev(),
+      goTo: (i) => handle && handle.goTo(i),
+      setMode: (m) => handle && handle.setMode(m),
+      setPeek: (p) => handle && handle.setPeek(p),
+      getActiveIndex: () => handle ? handle.getActiveIndex() : -1,
+      getMode: () => handle ? handle.getMode() : props.mode
+    });
+    return () => (0, import_vue.h)("div", { ref: rootRef });
+  }
+});
+var folder_gallery_vue_default = FolderGallery;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FolderGallery
+});
+//# sourceMappingURL=vue.cjs.map