flipfolio 0.1.0

package/dist/vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/folder-gallery-vue.js","../src/folder-gallery.js"],"sourcesContent":["/* ============================================================================\n * flipfolio/vue - thin Vue 3 wrapper over the framework-agnostic core.\n *\n *   import { FolderGallery } from 'flipfolio/vue';\n *   import 'flipfolio/styles.css';\n *\n *   <FolderGallery\n *     :items=\"items\"\n *     mode=\"stack\"\n *     @select=\"(item, i) => ...\"\n *     ref=\"gallery\"            // -> { next, prev, goTo, setMode, setPeek, getActiveIndex, getMode }\n *   />\n *\n * Written as a plain render function (no SFC / template compilation) so the\n * package builds with no Vue toolchain; vue is an optional peer dependency,\n * resolved only in the consumer's app. class/style/id fall through to the\n * root <div> via Vue's normal attribute inheritance.\n * ========================================================================== */\n\nimport { defineComponent, h, ref, onMounted, onBeforeUnmount, watch } from 'vue';\nimport { createFolderGallery } from './folder-gallery.js';\n\nexport const FolderGallery = defineComponent({\n  name: 'FolderGallery',\n  props: {\n    items: { type: Array, default: () => [] },\n    mode: { type: String, default: 'stack' },\n    peek: { type: String, default: 'hover' },\n    contentRenderer: { type: Function, default: undefined },\n    folderPath: { type: String, default: undefined },\n    loop: { type: Boolean, default: undefined },\n    scrollNav: { type: Boolean, default: undefined },\n    reducedMotion: { type: String, default: undefined },\n    defaultActiveIndex: { type: Number, default: undefined },\n    label: { type: String, default: undefined },\n  },\n  // emit('select', ...) dispatches to the current @select handler, so there is\n  // no stale-closure problem the React wrapper has to work around with refs.\n  emits: ['select', 'active-change', 'mode-change'],\n  setup(props, { emit, expose }) {\n    const rootRef = ref(null);\n    let handle = null;\n\n    function onActive(e) { emit('active-change', e.detail.index, e.detail.item); }\n    function onModeEv(e) { emit('mode-change', e.detail.mode); }\n\n    function build() {\n      const root = rootRef.value;\n      if (!root) return;\n      handle = createFolderGallery(root, {\n        items: props.items,\n        mode: props.mode,\n        peek: props.peek,\n        folderPath: props.folderPath,\n        loop: props.loop,\n        scrollNav: props.scrollNav,\n        reducedMotion: props.reducedMotion,\n        defaultActiveIndex: props.defaultActiveIndex,\n        label: props.label,\n        // Read props.contentRenderer at call time so a swapped renderer is\n        // picked up on the next (structural) rebuild without a stale ref.\n        contentRenderer: props.contentRenderer\n          ? (card, item, i) => props.contentRenderer(card, item, i)\n          : undefined,\n        onSelect: (item, i) => emit('select', item, i),\n      });\n      root.addEventListener('fg-activechange', onActive);\n      root.addEventListener('fg-modechange', onModeEv);\n    }\n\n    function teardown() {\n      const root = rootRef.value;\n      if (root) {\n        root.removeEventListener('fg-activechange', onActive);\n        root.removeEventListener('fg-modechange', onModeEv);\n      }\n      if (handle) { handle.destroy(); handle = null; }\n    }\n\n    onMounted(build);\n    onBeforeUnmount(teardown);\n\n    // Structural inputs rebuild; mode and peek reuse the live instance.\n    watch(\n      [\n        () => props.items,\n        () => props.folderPath,\n        () => props.loop,\n        () => props.scrollNav,\n        () => props.reducedMotion,\n        () => props.defaultActiveIndex,\n        () => props.label,\n      ],\n      () => { teardown(); build(); },\n    );\n    watch(() => props.mode, (m) => { if (handle && handle.getMode() !== m) handle.setMode(m); });\n    watch(() => props.peek, (p) => { if (handle) handle.setPeek(p); });\n\n    expose({\n      next: () => handle && handle.next(),\n      prev: () => handle && handle.prev(),\n      goTo: (i) => handle && handle.goTo(i),\n      setMode: (m) => handle && handle.setMode(m),\n      setPeek: (p) => handle && handle.setPeek(p),\n      getActiveIndex: () => (handle ? handle.getActiveIndex() : -1),\n      getMode: () => (handle ? handle.getMode() : props.mode),\n    });\n\n    return () => h('div', { ref: rootRef });\n  },\n});\n\nexport default FolderGallery;\n","/* ============================================================================\n * folder-gallery - a framework-agnostic 3D folder gallery (core, v0.1.0, WIP)\n *\n *   import { createFolderGallery } from 'folder-gallery';\n *   import 'folder-gallery/styles.css';\n *\n *   const gallery = createFolderGallery(rootEl, {\n *     items: [{ label, color, src }, ...],   // or { content: Node | html }\n *     mode: 'stack',                          // 'stack' | 'grid' | 'carousel'\n *     onSelect: (item, index) => { ... },\n *   });\n *   gallery.next(); gallery.setMode('grid'); gallery.destroy();\n *\n * Ported from a hand-built portfolio engine. No framework, no dependencies.\n * Owns its own DOM and removes every listener on destroy().\n * ========================================================================== */\n\nconst SVG_NS = 'http://www.w3.org/2000/svg';\n\n/* Default manila-folder-with-tab silhouette (viewBox 0 0 480 342). */\nconst DEFAULT_FOLDER_PATH =\n  '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 ' +\n  'L 458 32 C 470 32 480 42 480 54 L 480 320 C 480 332 470 342 458 342 ' +\n  'L 22 342 C 10 342 0 332 0 320 Z';\n\nconst DEFAULTS = {\n  mode: 'stack',           // 'stack' | 'grid' | 'carousel'\n  folderPath: DEFAULT_FOLDER_PATH,\n  loop: true,\n  scrollNav: true,\n  reducedMotion: 'auto',   // 'auto' | 'off' | 'force'\n  peek: 'hover',           // 'hover' | 'always' | 'off'\n  defaultActiveIndex: 0,\n  label: 'Folder gallery',\n};\n\nconst PEEK_MODES = new Set(['hover', 'always', 'off']);\n\nconst MODE_WIDTHS = { stack: 480, grid: 720, carousel: 720 };\nconst SCROLL_THRESHOLD = 30;\nconst SCROLL_COOLDOWN = { stack: 450, carousel: 300 };\n\nfunction hexToRgb(hex) {\n  const h = String(hex).replace('#', '');\n  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];\n}\n/* Derive the folder's three surfaces from one base color (same offsets as the\n * original engine): back/tab −30, frosted front +40 at 0.55, solid front +35.\n * The solid variant is what keeps NON-active cards fully opaque - only the\n * active card gets the translucent frosted treatment. Also picks a label\n * color (white or ink) by the frontSolid surface's YIQ brightness, so a\n * dark folder color doesn't leave the label unreadable regardless of theme. */\nfunction folderColors(hex) {\n  const [r, g, b] = hexToRgb(hex);\n  const dn = (v) => Math.max(v - 30, 0);\n  const up = (v, o) => Math.min(v + o, 255);\n  const fr = up(r, 35);\n  const fg = up(g, 35);\n  const fb = up(b, 35);\n  const yiq = (fr * 299 + fg * 587 + fb * 114) / 1000;\n  return {\n    back: `rgb(${dn(r)},${dn(g)},${dn(b)})`,\n    front: `rgba(${up(r, 40)},${up(g, 40)},${up(b, 40)},0.55)`,\n    frontSolid: `rgb(${fr},${fg},${fb})`,\n    label: yiq >= 128 ? '#1c1c1a' : '#ffffff',\n  };\n}\n\n/* Built-in default content renderer. Accepts item.content (a Node or HTML\n * string) or item.src (an image). Consumers pass their own contentRenderer\n * (card, item, index) to hold arbitrary content - that's the whole point. */\nfunction defaultContentRenderer(card, item /* , index */) {\n  const wrap = document.createElement('div');\n  wrap.className = 'fg-content';\n  // Duck-type DOM nodes (nodeType) rather than `instanceof Node` - `Node`\n  // isn't a global in every embedding (SSR shims, minimal DOM harnesses).\n  if (item.content && typeof item.content === 'object' && typeof item.content.nodeType === 'number') {\n    wrap.appendChild(item.content);\n  } else if (typeof item.content === 'string') {\n    wrap.innerHTML = item.content;\n  } else if (item.src) {\n    const img = document.createElement('img');\n    img.className = 'fg-image';\n    img.src = item.src;\n    img.alt = item.label || '';\n    img.loading = 'lazy';\n    img.decoding = 'async';\n    wrap.appendChild(img);\n  }\n  card.appendChild(wrap);\n}\n\nexport function createFolderGallery(root, options = {}) {\n  if (!root || !root.nodeType) throw new Error('createFolderGallery: a root element is required');\n\n  const opts = { ...DEFAULTS, ...options };\n  const items = Array.isArray(opts.items) ? opts.items : [];\n  const n = items.length;\n  const renderContent =\n    typeof opts.contentRenderer === 'function' ? opts.contentRenderer : defaultContentRenderer;\n\n  const reduced =\n    opts.reducedMotion === 'force' ||\n    (opts.reducedMotion !== 'off' &&\n      typeof matchMedia === 'function' &&\n      matchMedia('(prefers-reduced-motion: reduce)').matches);\n\n  let mode = MODE_WIDTHS[opts.mode] ? opts.mode : 'stack';\n  let active = Math.min(Math.max(opts.defaultActiveIndex | 0, 0), Math.max(n - 1, 0));\n  let scrollCooldown = false;\n  let scrollAccum = 0;\n\n  /* ── Listener bookkeeping for destroy() ── */\n  const cleanups = [];\n  const on = (el, ev, fn, o) => { el.addEventListener(ev, fn, o); cleanups.push(() => el.removeEventListener(ev, fn, o)); };\n  const emit = (name, detail) => root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));\n\n  /* ── Build own DOM (no page scaffold assumed) ── */\n  root.classList.add('fg-root');\n  root.setAttribute('data-fg-mode', mode);\n  root.setAttribute('data-fg-peek', PEEK_MODES.has(opts.peek) ? opts.peek : 'hover');\n  const scene = document.createElement('div');\n  scene.className = 'fg-scene';\n  scene.setAttribute('role', 'listbox');\n  scene.setAttribute('aria-label', opts.label);\n  scene.setAttribute('aria-roledescription', 'folder gallery');\n  const dotsEl = document.createElement('div');\n  dotsEl.className = 'fg-dots';\n  dotsEl.setAttribute('role', 'tablist');\n  const live = document.createElement('div');\n  live.className = 'fg-sr-only';\n  live.setAttribute('aria-live', 'polite');\n  live.setAttribute('aria-atomic', 'true');\n  root.append(scene, dotsEl, live);\n\n  function teardown() {\n    cleanups.forEach((fn) => fn());\n    cleanups.length = 0;\n    root.replaceChildren();\n    root.classList.remove('fg-root');\n    root.removeAttribute('data-fg-mode');\n    root.removeAttribute('data-fg-peek');\n  }\n\n  if (n === 0) {\n    return { next() {}, prev() {}, goTo() {}, setMode() {}, setPeek() {}, getActiveIndex: () => -1, getMode: () => mode, destroy: teardown };\n  }\n\n  /* ── Normalized transform - identical function list for every mode ── */\n  function setCardTransform(card, { x, y, z, rx, ry, s, zIndex, opacity, isActive }) {\n    card.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`;\n    card.style.transformOrigin = 'center bottom';\n    card.style.zIndex = String(zIndex);\n    card.style.opacity = String(opacity);\n    card.setAttribute('aria-selected', isActive ? 'true' : 'false');\n    card.classList.toggle('is-active', isActive);\n  }\n\n  /* ── Build cards ── */\n  const cardEls = items.map((item, i) => {\n    const card = document.createElement('div');\n    card.className = 'fg-card';\n    card.tabIndex = i === active ? 0 : -1; // roving tabindex\n    card.setAttribute('role', 'option');\n    card.setAttribute('aria-label', item.label || `Item ${i + 1}`);\n    if (item.color) {\n      const c = folderColors(item.color);\n      card.style.setProperty('--fg-folder-bg', item.color);\n      card.style.setProperty('--fg-front', c.front);\n      card.style.setProperty('--fg-front-solid', c.frontSolid);\n      card.style.setProperty('--fg-label-on-color', c.label);\n    }\n\n    const svg = document.createElementNS(SVG_NS, 'svg');\n    svg.setAttribute('class', 'fg-folder');\n    svg.setAttribute('viewBox', '0 0 480 342');\n    svg.setAttribute('preserveAspectRatio', 'none');\n    svg.setAttribute('aria-hidden', 'true');\n    const path = document.createElementNS(SVG_NS, 'path');\n    path.setAttribute('d', opts.folderPath);\n    path.setAttribute('fill', item.color ? folderColors(item.color).back : 'var(--fg-folder-bg)');\n    svg.appendChild(path);\n\n    card.appendChild(svg);\n\n    renderContent(card, item, i);\n\n    const front = document.createElement('div');\n    front.className = 'fg-front';\n    /* Decal: the photo prints on the folder's FRONT PANEL. The back and tab\n       keep their color, so the folder stays a folder: colored tabs in the\n       stack, a real material boundary at the front's lip. */\n    if (item.decal) {\n      card.classList.add('fg-card--decal');\n      const photo = document.createElement('img');\n      photo.className = 'fg-decal';\n      photo.src = item.decal;\n      photo.alt = '';\n      photo.loading = 'lazy';\n      photo.decoding = 'async';\n      front.appendChild(photo);\n    }\n    if (item.label) {\n      const label = document.createElement('div');\n      label.className = 'fg-label';\n      label.textContent = item.label;\n      front.appendChild(label);\n    }\n    card.appendChild(front);\n\n    scene.appendChild(card);\n    return card;\n  });\n\n  /* ── Dots ── */\n  const dots = cardEls.map((_, i) => {\n    const dot = document.createElement('button');\n    dot.type = 'button';\n    dot.className = 'fg-dot';\n    dot.setAttribute('role', 'tab');\n    dot.setAttribute('aria-label', items[i].label || `Go to ${i + 1}`);\n    on(dot, 'click', () => goTo(i));\n    dotsEl.appendChild(dot);\n    return dot;\n  });\n\n  /* ── Layouts ── */\n  function layoutStack() {\n    scene.style.height = '';\n    cardEls.forEach((card, i) => {\n      const behind = (i - active + n) % n;\n      if (behind === 0) {\n        setCardTransform(card, { x: 0, y: 100, z: 20, rx: 0, ry: 0, s: 1, zIndex: n + 1, opacity: 1, isActive: true });\n        return;\n      }\n      const safeN = Math.max(n - 1, 1);\n      const tz = -behind * 25 - behind * behind * 3;\n      const rx = reduced ? 0 : -behind * 3;\n      const ty = 100 - behind * 28 - behind * behind * 2;\n      const sc = 1 - behind * 0.06 - (behind / safeN) * (behind / safeN) * 0.04;\n      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 });\n    });\n  }\n  function layoutGrid() {\n    const sceneW = scene.clientWidth || MODE_WIDTHS.grid;\n    // Two columns on narrow scenes so folders stay tappable and readable.\n    const cols = sceneW < 520 ? 2 : n <= 4 ? 2 : 3;\n    const gap = 16;\n    const cardW = sceneW;\n    const cardH = sceneW * (2 / 3);\n    const sc = (sceneW - (cols - 1) * gap) / (cols * cardW);\n    const scaledW = cardW * sc;\n    const scaledH = cardH * sc;\n    const tabScaled = 22 * sc;\n    const rows = Math.ceil(n / cols);\n    cardEls.forEach((card, i) => {\n      const col = i % cols;\n      const row = Math.floor(i / cols);\n      const itemsInRow = Math.min(cols, n - row * cols);\n      const rowW = itemsInRow * scaledW + (itemsInRow - 1) * gap;\n      const rowStartX = (sceneW - rowW) / 2;\n      const cellLeft = rowStartX + col * (scaledW + gap);\n      const cellTop = row * (scaledH + tabScaled + gap) + tabScaled;\n      const tx = cellLeft + scaledW / 2 - cardW / 2;\n      const ty = cellTop + scaledH - cardH;\n      setCardTransform(card, { x: tx, y: ty, z: 0, rx: 0, ry: 0, s: sc, zIndex: i === active ? 2 : 1, opacity: 1, isActive: i === active });\n    });\n    scene.style.height = rows * (scaledH + tabScaled + gap) + 20 + 'px';\n  }\n  function layoutCarousel() {\n    const sceneW = scene.clientWidth || MODE_WIDTHS.carousel;\n    const cardW = sceneW;\n    const cardH = cardW * (2 / 3);\n    const activeSc = 0.62;\n    const activeW = cardW * activeSc;\n    const sceneH = Math.max(cardH * activeSc + 40, 180);\n    scene.style.height = sceneH + 'px';\n    const offsetStep = Math.min(130, (sceneW - activeW) / 4);\n    cardEls.forEach((card, i) => {\n      let offset = i - active;\n      if (n > 2 && offset > Math.floor(n / 2)) offset -= n;\n      if (n > 2 && offset < -Math.floor(n / 2)) offset += n;\n      const sc = Math.max(activeSc - Math.abs(offset) * 0.06, 0.28);\n      const z = -Math.abs(offset) * 50;\n      const op = Math.max(1 - Math.abs(offset) * 0.25, 0.15);\n      const tx = sceneW / 2 + offset * offsetStep - cardW / 2;\n      const ty = sceneH - 20 - cardH;\n      setCardTransform(card, { x: tx, y: ty, z, rx: 0, ry: 0, s: sc, zIndex: n - Math.abs(offset), opacity: op, isActive: offset === 0 });\n    });\n  }\n  // Scene width tracks the active mode so the layout math (which assumes the\n  // mode's logical width) matches the actually-rendered card width. Layouts\n  // then read scene.clientWidth, so everything stays self-consistent at any size.\n  function sizeScene() {\n    scene.style.width = `min(${MODE_WIDTHS[mode]}px, 92vw)`;\n  }\n  function applyLayout() {\n    sizeScene();\n    (mode === 'grid' ? layoutGrid : mode === 'carousel' ? layoutCarousel : layoutStack)();\n    dots.forEach((d, i) => {\n      d.classList.toggle('is-active', i === active);\n      d.setAttribute('aria-selected', i === active ? 'true' : 'false');\n    });\n    cardEls.forEach((c, i) => { c.tabIndex = i === active ? 0 : -1; });\n    const cur = items[active];\n    live.textContent = cur && cur.label ? `${active + 1} of ${n}: ${cur.label}` : `${active + 1} of ${n}`;\n  }\n\n  /* ── Navigation ── */\n  function goTo(i) {\n    const next = opts.loop ? ((i % n) + n) % n : Math.min(Math.max(i, 0), n - 1);\n    if (next === active) return;\n    active = next;\n    applyLayout();\n    emit('fg-activechange', { index: active, item: items[active] });\n  }\n  function select(i) {\n    emit('fg-select', { index: i, item: items[i] });\n    if (typeof opts.onSelect === 'function') opts.onSelect(items[i], i);\n  }\n  function setMode(m) {\n    if (m === mode || !MODE_WIDTHS[m]) return;\n    mode = m;\n    root.setAttribute('data-fg-mode', mode);\n    applyLayout();\n    emit('fg-modechange', { mode });\n  }\n  function setPeek(p) {\n    if (!PEEK_MODES.has(p)) return;\n    root.setAttribute('data-fg-peek', p);\n  }\n\n  /* ── Interaction ── */\n  cardEls.forEach((card, i) => {\n    on(card, 'click', () => { i === active ? select(i) : goTo(i); });\n    on(card, 'keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); select(i); }\n    });\n  });\n  /* Arrow keys work two ways, matching the reference implementation:\n     1. Focus already inside the gallery (Tab to a card/dot) - bubbles here\n        and re-focuses the new active card, standard roving-tabindex UX.\n     2. Mouse hovering the gallery, focus anywhere else on the page - a\n        document-level listener picks it up. Without this route, arrow\n        keys only work AFTER a click puts focus on a card - and a click is\n        also what fires onSelect, which in real use is often a link. Making\n        keyboard nav depend on that first click means the only way to\n        \"activate\" arrows is to risk navigating away. Hover is enough. */\n  function handleArrowKeys(e) {\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); goTo(active + 1); return true; }\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); goTo(active - 1); return true; }\n    if (e.key === 'Home') { e.preventDefault(); goTo(0); return true; }\n    if (e.key === 'End') { e.preventDefault(); goTo(n - 1); return true; }\n    return false;\n  }\n  on(scene, 'keydown', (e) => { if (handleArrowKeys(e)) cardEls[active].focus(); });\n  on(dotsEl, 'keydown', (e) => { if (handleArrowKeys(e)) cardEls[active].focus(); });\n\n  let hovered = false;\n  on(root, 'mouseenter', () => { hovered = true; });\n  on(root, 'mouseleave', () => { hovered = false; });\n  on(document, 'keydown', (e) => {\n    if (!hovered) return;\n    // Don't hijack arrows if focus is on an interactive control outside\n    // the gallery (nav link, a form field elsewhere on the page).\n    const ae = document.activeElement;\n    if (ae && ae !== document.body && !root.contains(ae)) return;\n    handleArrowKeys(e); // no forced focus - the user hasn't tabbed in\n  });\n\n  if (opts.scrollNav) {\n    /* Bound to root, not just the scene box: root is the widget's full\n       footprint (scene + dots), so wheel events over the dots row or any\n       gap the consumer's own layout leaves around the gallery still cycle\n       it, instead of requiring the pointer over the exact folder art. */\n    on(root, 'wheel', (e) => {\n      if (mode === 'grid') return;\n      const atStart = !opts.loop && active === 0 && e.deltaY < 0;\n      const atEnd = !opts.loop && active === n - 1 && e.deltaY > 0;\n      if (atStart || atEnd) return;\n      e.preventDefault();\n      if (scrollCooldown) return;\n      scrollAccum += e.deltaY;\n      if (Math.abs(scrollAccum) >= SCROLL_THRESHOLD) {\n        const dir = scrollAccum > 0 ? 1 : -1;\n        scrollAccum = 0;\n        scrollCooldown = true;\n        goTo(active + dir);\n        setTimeout(() => { scrollCooldown = false; scrollAccum = 0; }, SCROLL_COOLDOWN[mode] || 300);\n      }\n    }, { passive: false });\n  }\n\n  /* Dominant-axis swipe: up or left advances, down or right goes back.\n     Horizontal is the natural phone gesture in carousel; vertical matches\n     the wheel direction on the stack. Both work everywhere. */\n  let touchStartX = 0;\n  let touchStartY = 0;\n  on(scene, 'touchstart', (e) => {\n    touchStartX = e.touches[0].clientX;\n    touchStartY = e.touches[0].clientY;\n  }, { passive: true });\n  on(scene, 'touchend', (e) => {\n    const dx = touchStartX - e.changedTouches[0].clientX;\n    const dy = touchStartY - e.changedTouches[0].clientY;\n    const ax = Math.abs(dx);\n    const ay = Math.abs(dy);\n    if (Math.max(ax, ay) < 40) return;\n    const dir = ax > ay ? (dx > 0 ? 1 : -1) : (dy > 0 ? 1 : -1);\n    goTo(active + dir);\n  }, { passive: true });\n\n  let resizeTimer;\n  on(window, 'resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(applyLayout, 150); });\n\n  applyLayout();\n\n  /* ── Public handle ── */\n  return {\n    next: () => goTo(active + 1),\n    prev: () => goTo(active - 1),\n    goTo,\n    setMode,\n    setPeek,\n    getActiveIndex: () => active,\n    getMode: () => mode,\n    destroy: teardown,\n  };\n}\n\nexport default createFolderGallery;\n"],"mappings":"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","names":["h"]}

package/dist/vue.d.ts

@@ -0,0 +1,39 @@
+import type { DefineComponent } from 'vue';
+import type { FolderItem, GalleryMode, PeekMode, FolderGalleryOptions, FolderGalleryHandle } from './index';
+
+export interface FolderGalleryProps {
+  items?: FolderItem[];
+  mode?: GalleryMode;
+  peek?: PeekMode;
+  contentRenderer?: FolderGalleryOptions['contentRenderer'];
+  folderPath?: string;
+  loop?: boolean;
+  scrollNav?: boolean;
+  reducedMotion?: 'auto' | 'off' | 'force';
+  defaultActiveIndex?: number;
+  label?: string;
+}
+
+export interface FolderGalleryEmits {
+  (e: 'select', item: FolderItem, index: number): void;
+  (e: 'active-change', index: number, item: FolderItem): void;
+  (e: 'mode-change', mode: GalleryMode): void;
+}
+
+/** The methods exposed via a template ref (`ref="gallery"`). */
+export type FolderGalleryExpose = Pick<
+  FolderGalleryHandle,
+  'next' | 'prev' | 'goTo' | 'setMode' | 'setPeek' | 'getActiveIndex' | 'getMode'
+>;
+
+export declare const FolderGallery: DefineComponent<
+  FolderGalleryProps,
+  FolderGalleryExpose,
+  {},
+  {},
+  {},
+  {},
+  {},
+  FolderGalleryEmits
+>;
+export default FolderGallery;

package/dist/vue.js

@@ -0,0 +1,105 @@
+import {
+  createFolderGallery
+} from "./chunk-DT6YOBGV.js";
+
+// src/folder-gallery-vue.js
+import { defineComponent, h, ref, onMounted, onBeforeUnmount, watch } from "vue";
+var FolderGallery = 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 = 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;
+      }
+    }
+    onMounted(build);
+    onBeforeUnmount(teardown);
+    watch(
+      [
+        () => props.items,
+        () => props.folderPath,
+        () => props.loop,
+        () => props.scrollNav,
+        () => props.reducedMotion,
+        () => props.defaultActiveIndex,
+        () => props.label
+      ],
+      () => {
+        teardown();
+        build();
+      }
+    );
+    watch(() => props.mode, (m) => {
+      if (handle && handle.getMode() !== m) handle.setMode(m);
+    });
+    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 () => h("div", { ref: rootRef });
+  }
+});
+var folder_gallery_vue_default = FolderGallery;
+export {
+  FolderGallery,
+  folder_gallery_vue_default as default
+};
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/folder-gallery-vue.js"],"sourcesContent":["/* ============================================================================\n * flipfolio/vue - thin Vue 3 wrapper over the framework-agnostic core.\n *\n *   import { FolderGallery } from 'flipfolio/vue';\n *   import 'flipfolio/styles.css';\n *\n *   <FolderGallery\n *     :items=\"items\"\n *     mode=\"stack\"\n *     @select=\"(item, i) => ...\"\n *     ref=\"gallery\"            // -> { next, prev, goTo, setMode, setPeek, getActiveIndex, getMode }\n *   />\n *\n * Written as a plain render function (no SFC / template compilation) so the\n * package builds with no Vue toolchain; vue is an optional peer dependency,\n * resolved only in the consumer's app. class/style/id fall through to the\n * root <div> via Vue's normal attribute inheritance.\n * ========================================================================== */\n\nimport { defineComponent, h, ref, onMounted, onBeforeUnmount, watch } from 'vue';\nimport { createFolderGallery } from './folder-gallery.js';\n\nexport const FolderGallery = defineComponent({\n  name: 'FolderGallery',\n  props: {\n    items: { type: Array, default: () => [] },\n    mode: { type: String, default: 'stack' },\n    peek: { type: String, default: 'hover' },\n    contentRenderer: { type: Function, default: undefined },\n    folderPath: { type: String, default: undefined },\n    loop: { type: Boolean, default: undefined },\n    scrollNav: { type: Boolean, default: undefined },\n    reducedMotion: { type: String, default: undefined },\n    defaultActiveIndex: { type: Number, default: undefined },\n    label: { type: String, default: undefined },\n  },\n  // emit('select', ...) dispatches to the current @select handler, so there is\n  // no stale-closure problem the React wrapper has to work around with refs.\n  emits: ['select', 'active-change', 'mode-change'],\n  setup(props, { emit, expose }) {\n    const rootRef = ref(null);\n    let handle = null;\n\n    function onActive(e) { emit('active-change', e.detail.index, e.detail.item); }\n    function onModeEv(e) { emit('mode-change', e.detail.mode); }\n\n    function build() {\n      const root = rootRef.value;\n      if (!root) return;\n      handle = createFolderGallery(root, {\n        items: props.items,\n        mode: props.mode,\n        peek: props.peek,\n        folderPath: props.folderPath,\n        loop: props.loop,\n        scrollNav: props.scrollNav,\n        reducedMotion: props.reducedMotion,\n        defaultActiveIndex: props.defaultActiveIndex,\n        label: props.label,\n        // Read props.contentRenderer at call time so a swapped renderer is\n        // picked up on the next (structural) rebuild without a stale ref.\n        contentRenderer: props.contentRenderer\n          ? (card, item, i) => props.contentRenderer(card, item, i)\n          : undefined,\n        onSelect: (item, i) => emit('select', item, i),\n      });\n      root.addEventListener('fg-activechange', onActive);\n      root.addEventListener('fg-modechange', onModeEv);\n    }\n\n    function teardown() {\n      const root = rootRef.value;\n      if (root) {\n        root.removeEventListener('fg-activechange', onActive);\n        root.removeEventListener('fg-modechange', onModeEv);\n      }\n      if (handle) { handle.destroy(); handle = null; }\n    }\n\n    onMounted(build);\n    onBeforeUnmount(teardown);\n\n    // Structural inputs rebuild; mode and peek reuse the live instance.\n    watch(\n      [\n        () => props.items,\n        () => props.folderPath,\n        () => props.loop,\n        () => props.scrollNav,\n        () => props.reducedMotion,\n        () => props.defaultActiveIndex,\n        () => props.label,\n      ],\n      () => { teardown(); build(); },\n    );\n    watch(() => props.mode, (m) => { if (handle && handle.getMode() !== m) handle.setMode(m); });\n    watch(() => props.peek, (p) => { if (handle) handle.setPeek(p); });\n\n    expose({\n      next: () => handle && handle.next(),\n      prev: () => handle && handle.prev(),\n      goTo: (i) => handle && handle.goTo(i),\n      setMode: (m) => handle && handle.setMode(m),\n      setPeek: (p) => handle && handle.setPeek(p),\n      getActiveIndex: () => (handle ? handle.getActiveIndex() : -1),\n      getMode: () => (handle ? handle.getMode() : props.mode),\n    });\n\n    return () => h('div', { ref: rootRef });\n  },\n});\n\nexport default FolderGallery;\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "flipfolio",
+  "version": "0.1.0",
+  "private": false,
+  "description": "A framework-agnostic 3D folder gallery for the web. Real content in manila folders, with stack, grid, and carousel modes.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Kirthi Balakrishnan",
+  "homepage": "https://kirthi.studio",
+  "keywords": [
+    "gallery",
+    "folder",
+    "3d",
+    "carousel",
+    "ui",
+    "component",
+    "css-3d",
+    "web-component",
+    "accessibility"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "import": "./dist/element.js",
+      "require": "./dist/element.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs"
+    },
+    "./styles.css": "./dist/folder-gallery.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "check": "node --check src/folder-gallery.js && node --check src/folder-gallery-element.js && node --check src/folder-gallery-vue.js",
+    "build": "tsup",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build",
+    "serve": "python3 -m http.server 5177"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "vue": ">=3.3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^6.0.3",
+    "vitest": "^2.1.8",
+    "vue": "^3.5.39"
+  }
+}