flipfolio 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/README.md +9 -3
  2. package/dist/{chunk-DT6YOBGV.js → chunk-Q2NKZMCC.js} +113 -3
  3. package/dist/chunk-Q2NKZMCC.js.map +1 -0
  4. package/dist/element.cjs +114 -3
  5. package/dist/element.cjs.map +1 -1
  6. package/dist/element.js +3 -2
  7. package/dist/element.js.map +1 -1
  8. package/dist/folder-gallery.css +32 -0
  9. package/dist/index.cjs +112 -2
  10. package/dist/index.cjs.map +1 -1
  11. package/dist/index.d.ts +3 -0
  12. package/dist/index.js +1 -1
  13. package/dist/react.cjs +116 -3
  14. package/dist/react.cjs.map +1 -1
  15. package/dist/react.d.ts +2 -1
  16. package/dist/react.js +5 -2
  17. package/dist/react.js.map +1 -1
  18. package/dist/vue.cjs +115 -2
  19. package/dist/vue.cjs.map +1 -1
  20. package/dist/vue.d.ts +2 -1
  21. package/dist/vue.js +4 -1
  22. package/dist/vue.js.map +1 -1
  23. package/package.json +1 -1
  24. package/dist/chunk-DT6YOBGV.js.map +0 -1
package/dist/element.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/folder-gallery-element.js","../src/folder-gallery.js"],"sourcesContent":["/* ============================================================================\n * <folder-gallery> - Custom Element wrapper around the framework-agnostic core.\n *\n * import { defineFolderGallery } from 'folder-gallery/element';\n * defineFolderGallery(); // registers <folder-gallery>\n *\n * <folder-gallery mode=\"grid\"></folder-gallery>\n * el.items = [{ label, color, src }, ...]; // set items via property\n * el.addEventListener('fg-select', e => ...); // events bubble from the core\n *\n * Uses the element itself as the light-DOM root, so the shared\n * folder-gallery.css styles it. (Shadow-DOM encapsulation is a later option.)\n * ========================================================================== */\n\nimport { createFolderGallery } from './folder-gallery.js';\n\nconst asBool = (v) => v !== null && v !== 'false';\n\n// SSR-safe base: on a server (Next/Nuxt) there is no HTMLElement, and merely\n// evaluating `class extends HTMLElement` at import time would throw. Fall back\n// to a stub there; the real element is only ever registered in the browser via\n// defineFolderGallery (guarded on customElements below).\nconst ElementBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};\n\nexport class FolderGalleryElement extends ElementBase {\n static get observedAttributes() {\n return ['mode', 'peek', 'loop', 'scroll-nav', 'reduced-motion', 'default-active-index', 'label', 'folder-path'];\n }\n\n constructor() {\n super();\n this._handle = null;\n this._items = [];\n }\n\n /** Items are an array - set via property (attributes can't hold objects). */\n get items() { return this._items; }\n set items(value) {\n this._items = Array.isArray(value) ? value : [];\n if (this.isConnected) this._render();\n }\n\n connectedCallback() {\n // Optional declarative items via a JSON `items` attribute.\n if (!this._items.length && this.getAttribute('items')) {\n try { this._items = JSON.parse(this.getAttribute('items')); } catch (_) { /* ignore malformed */ }\n }\n this._render();\n }\n\n disconnectedCallback() { this._destroy(); }\n\n attributeChangedCallback(name, _oldValue, newValue) {\n if (!this._handle) return;\n if (name === 'mode') { this._handle.setMode(newValue); return; }\n if (name === 'peek') { this._handle.setPeek(newValue); return; }\n this._render(); // any other observed attribute → rebuild\n }\n\n _options() {\n const opts = { items: this._items };\n if (this.hasAttribute('mode')) opts.mode = this.getAttribute('mode');\n if (this.hasAttribute('peek')) opts.peek = this.getAttribute('peek');\n if (this.hasAttribute('loop')) opts.loop = asBool(this.getAttribute('loop'));\n if (this.hasAttribute('scroll-nav')) opts.scrollNav = asBool(this.getAttribute('scroll-nav'));\n if (this.hasAttribute('reduced-motion')) opts.reducedMotion = this.getAttribute('reduced-motion');\n if (this.hasAttribute('default-active-index')) opts.defaultActiveIndex = parseInt(this.getAttribute('default-active-index'), 10) || 0;\n if (this.hasAttribute('label')) opts.label = this.getAttribute('label');\n if (this.hasAttribute('folder-path')) opts.folderPath = this.getAttribute('folder-path');\n if (typeof this.contentRenderer === 'function') opts.contentRenderer = this.contentRenderer;\n if (typeof this.onSelect === 'function') opts.onSelect = this.onSelect;\n return opts;\n }\n\n _render() {\n this._destroy();\n this._handle = createFolderGallery(this, this._options());\n }\n _destroy() {\n if (this._handle) { this._handle.destroy(); this._handle = null; }\n }\n\n /* Imperative API - delegate to the core handle. */\n next() { this._handle && this._handle.next(); }\n prev() { this._handle && this._handle.prev(); }\n goTo(i) { this._handle && this._handle.goTo(i); }\n setMode(m) { this.setAttribute('mode', m); }\n setPeek(p) { this.setAttribute('peek', p); }\n getActiveIndex() { return this._handle ? this._handle.getActiveIndex() : -1; }\n getMode() { return this._handle ? this._handle.getMode() : (this.getAttribute('mode') || 'stack'); }\n}\n\nexport function defineFolderGallery(tag = 'folder-gallery') {\n if (typeof customElements !== 'undefined' && !customElements.get(tag)) {\n customElements.define(tag, FolderGalleryElement);\n }\n return FolderGalleryElement;\n}\n\nexport default FolderGalleryElement;\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":[]}
1
+ {"version":3,"sources":["../src/folder-gallery-element.js","../src/folder-gallery.js"],"sourcesContent":["/* ============================================================================\n * <folder-gallery> - Custom Element wrapper around the framework-agnostic core.\n *\n * import { defineFolderGallery } from 'folder-gallery/element';\n * defineFolderGallery(); // registers <folder-gallery>\n *\n * <folder-gallery mode=\"grid\"></folder-gallery>\n * el.items = [{ label, color, src }, ...]; // set items via property\n * el.addEventListener('fg-select', e => ...); // events bubble from the core\n *\n * Uses the element itself as the light-DOM root, so the shared\n * folder-gallery.css styles it. (Shadow-DOM encapsulation is a later option.)\n * ========================================================================== */\n\nimport { createFolderGallery } from './folder-gallery.js';\n\nconst asBool = (v) => v !== null && v !== 'false';\n\n// SSR-safe base: on a server (Next/Nuxt) there is no HTMLElement, and merely\n// evaluating `class extends HTMLElement` at import time would throw. Fall back\n// to a stub there; the real element is only ever registered in the browser via\n// defineFolderGallery (guarded on customElements below).\nconst ElementBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};\n\nexport class FolderGalleryElement extends ElementBase {\n static get observedAttributes() {\n return ['mode', 'peek', 'drag', 'loop', 'scroll-nav', 'reduced-motion', 'default-active-index', 'label', 'folder-path'];\n }\n\n constructor() {\n super();\n this._handle = null;\n this._items = [];\n }\n\n /** Items are an array - set via property (attributes can't hold objects). */\n get items() { return this._items; }\n set items(value) {\n this._items = Array.isArray(value) ? value : [];\n if (this.isConnected) this._render();\n }\n\n connectedCallback() {\n // Optional declarative items via a JSON `items` attribute.\n if (!this._items.length && this.getAttribute('items')) {\n try { this._items = JSON.parse(this.getAttribute('items')); } catch (_) { /* ignore malformed */ }\n }\n this._render();\n }\n\n disconnectedCallback() { this._destroy(); }\n\n attributeChangedCallback(name, _oldValue, newValue) {\n if (!this._handle) return;\n if (name === 'mode') { this._handle.setMode(newValue); return; }\n if (name === 'peek') { this._handle.setPeek(newValue); return; }\n this._render(); // any other observed attribute → rebuild\n }\n\n _options() {\n const opts = { items: this._items };\n if (this.hasAttribute('mode')) opts.mode = this.getAttribute('mode');\n if (this.hasAttribute('peek')) opts.peek = this.getAttribute('peek');\n if (this.hasAttribute('drag')) opts.drag = this.getAttribute('drag');\n if (this.hasAttribute('loop')) opts.loop = asBool(this.getAttribute('loop'));\n if (this.hasAttribute('scroll-nav')) opts.scrollNav = asBool(this.getAttribute('scroll-nav'));\n if (this.hasAttribute('reduced-motion')) opts.reducedMotion = this.getAttribute('reduced-motion');\n if (this.hasAttribute('default-active-index')) opts.defaultActiveIndex = parseInt(this.getAttribute('default-active-index'), 10) || 0;\n if (this.hasAttribute('label')) opts.label = this.getAttribute('label');\n if (this.hasAttribute('folder-path')) opts.folderPath = this.getAttribute('folder-path');\n if (typeof this.contentRenderer === 'function') opts.contentRenderer = this.contentRenderer;\n if (typeof this.onSelect === 'function') opts.onSelect = this.onSelect;\n return opts;\n }\n\n _render() {\n this._destroy();\n this._handle = createFolderGallery(this, this._options());\n }\n _destroy() {\n if (this._handle) { this._handle.destroy(); this._handle = null; }\n }\n\n /* Imperative API - delegate to the core handle. */\n next() { this._handle && this._handle.next(); }\n prev() { this._handle && this._handle.prev(); }\n goTo(i) { this._handle && this._handle.goTo(i); }\n setMode(m) { this.setAttribute('mode', m); }\n setPeek(p) { this.setAttribute('peek', p); }\n getActiveIndex() { return this._handle ? this._handle.getActiveIndex() : -1; }\n getMode() { return this._handle ? this._handle.getMode() : (this.getAttribute('mode') || 'stack'); }\n}\n\nexport function defineFolderGallery(tag = 'folder-gallery') {\n if (typeof customElements !== 'undefined' && !customElements.get(tag)) {\n customElements.define(tag, FolderGalleryElement);\n }\n return FolderGalleryElement;\n}\n\nexport default FolderGalleryElement;\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 drag: 'fling', // 'fling' | 'off' - grab the active folder and throw it (stack mode)\n defaultActiveIndex: 0,\n label: 'Folder gallery',\n};\n\nconst PEEK_MODES = new Set(['hover', 'always', 'off']);\nconst DRAG_MODES = new Set(['fling', '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 root.setAttribute('data-fg-drag', DRAG_MODES.has(opts.drag) ? opts.drag : 'fling');\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 root.removeAttribute('data-fg-drag');\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 /* A card mid-throw owns its own motion: layout updates its role\n (selection, stacking) but leaves transform and opacity to the fling,\n so the pile can shuffle immediately while the thrown folder finishes\n its flight. The fling handler relayouts it once it has faded out. */\n if (!card.classList.contains('fg-card--flung')) {\n card.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`;\n card.style.opacity = String(opacity);\n }\n card.style.transformOrigin = 'center bottom';\n card.style.zIndex = String(zIndex);\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 const dragEnabled = opts.drag !== 'off';\n let suppressClick = false; // a real drag eats the click that follows pointerup\n\n cardEls.forEach((card, i) => {\n on(card, 'click', () => {\n if (suppressClick) { suppressClick = false; return; }\n i === active ? select(i) : goTo(i);\n });\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 // In stack mode the pointer-based drag below owns the gesture; letting\n // both fire would advance twice per swipe.\n if (dragEnabled && mode === 'stack') return;\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 /* ── Drag: grab the active folder and throw it (stack mode) ──\n Pointer Events give one code path for mouse, touch, and pen. The\n gesture constants come from the folder-deck prototype this feature is\n ported from: rotation follows the drag at 0.04deg/px, a release past\n 90px of travel (or a genuine throw, over 0.5px/ms) flings the folder\n off along the dominant axis and advances; anything shorter springs\n back into the pile on the card's own transition. Direction keeps the\n swipe semantics: left or up is next, right or down is previous. */\n if (dragEnabled) {\n const DRAG_ROT = 0.04;\n const FLING_DIST = 90;\n const FLING_VEL = 0.5;\n const TAP_SLOP = 6;\n let dragCard = null;\n let dragBase = '';\n let startPX = 0, startPY = 0, dragDX = 0, dragDY = 0;\n let lastX = 0, lastY = 0, lastT = 0, velX = 0, velY = 0;\n\n on(scene, 'pointerdown', (e) => {\n if (mode !== 'stack') return;\n if (e.button !== undefined && e.button !== 0) return;\n const card = e.target && e.target.closest ? e.target.closest('.fg-card') : null;\n if (!card || !card.classList.contains('is-active')) return;\n dragCard = card;\n dragBase = card.style.transform;\n startPX = e.clientX; startPY = e.clientY;\n dragDX = 0; dragDY = 0;\n lastX = e.clientX; lastY = e.clientY;\n lastT = (typeof performance !== 'undefined' ? performance.now() : Date.now());\n velX = 0; velY = 0;\n card.classList.add('fg-card--dragging');\n if (card.setPointerCapture && e.pointerId !== undefined) {\n try { card.setPointerCapture(e.pointerId); } catch (_) { /* jsdom / detached */ }\n }\n });\n on(window, 'pointermove', (e) => {\n if (!dragCard) return;\n dragDX = e.clientX - startPX;\n dragDY = e.clientY - startPY;\n const now = (typeof performance !== 'undefined' ? performance.now() : Date.now());\n const dt = Math.max(now - lastT, 1);\n velX = (e.clientX - lastX) / dt;\n velY = (e.clientY - lastY) / dt;\n lastX = e.clientX; lastY = e.clientY; lastT = now;\n // translateZ lifts the grabbed folder clear of every plane in the\n // pile (tilted tops can poke past the active card's resting depth)\n // and reads as physically picking it up.\n dragCard.style.transform = `${dragBase} translate3d(${dragDX}px, ${dragDY}px, 40px) rotate(${(dragDX * DRAG_ROT).toFixed(2)}deg)`;\n });\n const endDrag = () => {\n if (!dragCard) return;\n const card = dragCard;\n dragCard = null;\n card.classList.remove('fg-card--dragging');\n const dist = Math.hypot(dragDX, dragDY);\n if (dist < TAP_SLOP) { card.style.transform = dragBase; return; } // a tap: the click handler owns it\n suppressClick = true;\n const horizontal = Math.abs(dragDX) >= Math.abs(dragDY);\n const flung = dist > FLING_DIST || Math.hypot(velX, velY) > FLING_VEL;\n const dir = horizontal ? (dragDX > 0 ? -1 : 1) : (dragDY > 0 ? -1 : 1);\n const target = active + dir;\n const blocked = !opts.loop && (target < 0 || target > n - 1);\n if (!flung || blocked) { card.style.transform = dragBase; return; } // spring back into the pile\n if (reduced) { goTo(target); return; }\n const offX = horizontal ? Math.sign(dragDX) * Math.max(window.innerWidth * 0.7, 480) : dragDX * 3;\n const offY = horizontal ? dragDY * 3 : Math.sign(dragDY) * Math.max(window.innerHeight * 0.7, 480);\n /* Choreography: the pile answers the throw IMMEDIATELY (goTo below;\n layout skips the flung card), while the thrown folder finishes its\n own flight - a longer, momentum-eased sail that fades over 340ms.\n Once it is fully invisible, it re-enters by DROPPING IN from above\n its new slot: never straight from off-screen, which would cross\n the other folders' 3D planes and slice them visibly. */\n card.classList.add('fg-card--flung');\n card.style.transform = `${dragBase} translate3d(${offX}px, ${offY}px, 40px) rotate(${Math.sign(dragDX || 1) * 18}deg)`;\n card.style.opacity = '0';\n goTo(target); // shuffle starts now; the flung card is exempt from this relayout\n setTimeout(() => {\n card.classList.add('fg-card--snap');\n card.classList.remove('fg-card--flung');\n applyLayout(); // now it takes its slot transform (invisible, transitions off)\n const slot = card.style.transform;\n const slotOpacity = card.style.opacity;\n card.style.transform = `${slot} translate3d(0, -90px, 0)`;\n card.style.opacity = '0';\n /* Phase boundary via double rAF, NOT a synchronous reflow flush:\n WebKit does not treat forced reflows as transition boundaries and\n will compute the transition from the last PAINTED state (the\n fling-off position), which flashes the card across the pile.\n Painting one real frame at the staging point (invisible,\n transitions off) gives every engine the same before-state. */\n requestAnimationFrame(() => requestAnimationFrame(() => {\n card.classList.remove('fg-card--snap');\n card.classList.add('fg-card--entering'); // quicker settle curve for the drop\n card.style.transform = slot; // descend into the pile\n card.style.opacity = slotOpacity;\n setTimeout(() => card.classList.remove('fg-card--entering'), 700);\n }));\n }, 400); // after the 340ms flung fade, with margin: never snap a visible card\n };\n on(window, 'pointerup', endDrag);\n on(window, 'pointercancel', endDrag);\n }\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":[]}
package/dist/element.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  createFolderGallery
3
- } from "./chunk-DT6YOBGV.js";
3
+ } from "./chunk-Q2NKZMCC.js";
4
4
 
5
5
  // src/folder-gallery-element.js
6
6
  var asBool = (v) => v !== null && v !== "false";
@@ -8,7 +8,7 @@ var ElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
8
8
  };
9
9
  var FolderGalleryElement = class extends ElementBase {
10
10
  static get observedAttributes() {
11
- return ["mode", "peek", "loop", "scroll-nav", "reduced-motion", "default-active-index", "label", "folder-path"];
11
+ return ["mode", "peek", "drag", "loop", "scroll-nav", "reduced-motion", "default-active-index", "label", "folder-path"];
12
12
  }
13
13
  constructor() {
14
14
  super();
@@ -51,6 +51,7 @@ var FolderGalleryElement = class extends ElementBase {
51
51
  const opts = { items: this._items };
52
52
  if (this.hasAttribute("mode")) opts.mode = this.getAttribute("mode");
53
53
  if (this.hasAttribute("peek")) opts.peek = this.getAttribute("peek");
54
+ if (this.hasAttribute("drag")) opts.drag = this.getAttribute("drag");
54
55
  if (this.hasAttribute("loop")) opts.loop = asBool(this.getAttribute("loop"));
55
56
  if (this.hasAttribute("scroll-nav")) opts.scrollNav = asBool(this.getAttribute("scroll-nav"));
56
57
  if (this.hasAttribute("reduced-motion")) opts.reducedMotion = this.getAttribute("reduced-motion");
package/dist/element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/folder-gallery-element.js"],"sourcesContent":["/* ============================================================================\n * <folder-gallery> - Custom Element wrapper around the framework-agnostic core.\n *\n * import { defineFolderGallery } from 'folder-gallery/element';\n * defineFolderGallery(); // registers <folder-gallery>\n *\n * <folder-gallery mode=\"grid\"></folder-gallery>\n * el.items = [{ label, color, src }, ...]; // set items via property\n * el.addEventListener('fg-select', e => ...); // events bubble from the core\n *\n * Uses the element itself as the light-DOM root, so the shared\n * folder-gallery.css styles it. (Shadow-DOM encapsulation is a later option.)\n * ========================================================================== */\n\nimport { createFolderGallery } from './folder-gallery.js';\n\nconst asBool = (v) => v !== null && v !== 'false';\n\n// SSR-safe base: on a server (Next/Nuxt) there is no HTMLElement, and merely\n// evaluating `class extends HTMLElement` at import time would throw. Fall back\n// to a stub there; the real element is only ever registered in the browser via\n// defineFolderGallery (guarded on customElements below).\nconst ElementBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};\n\nexport class FolderGalleryElement extends ElementBase {\n static get observedAttributes() {\n return ['mode', 'peek', 'loop', 'scroll-nav', 'reduced-motion', 'default-active-index', 'label', 'folder-path'];\n }\n\n constructor() {\n super();\n this._handle = null;\n this._items = [];\n }\n\n /** Items are an array - set via property (attributes can't hold objects). */\n get items() { return this._items; }\n set items(value) {\n this._items = Array.isArray(value) ? value : [];\n if (this.isConnected) this._render();\n }\n\n connectedCallback() {\n // Optional declarative items via a JSON `items` attribute.\n if (!this._items.length && this.getAttribute('items')) {\n try { this._items = JSON.parse(this.getAttribute('items')); } catch (_) { /* ignore malformed */ }\n }\n this._render();\n }\n\n disconnectedCallback() { this._destroy(); }\n\n attributeChangedCallback(name, _oldValue, newValue) {\n if (!this._handle) return;\n if (name === 'mode') { this._handle.setMode(newValue); return; }\n if (name === 'peek') { this._handle.setPeek(newValue); return; }\n this._render(); // any other observed attribute → rebuild\n }\n\n _options() {\n const opts = { items: this._items };\n if (this.hasAttribute('mode')) opts.mode = this.getAttribute('mode');\n if (this.hasAttribute('peek')) opts.peek = this.getAttribute('peek');\n if (this.hasAttribute('loop')) opts.loop = asBool(this.getAttribute('loop'));\n if (this.hasAttribute('scroll-nav')) opts.scrollNav = asBool(this.getAttribute('scroll-nav'));\n if (this.hasAttribute('reduced-motion')) opts.reducedMotion = this.getAttribute('reduced-motion');\n if (this.hasAttribute('default-active-index')) opts.defaultActiveIndex = parseInt(this.getAttribute('default-active-index'), 10) || 0;\n if (this.hasAttribute('label')) opts.label = this.getAttribute('label');\n if (this.hasAttribute('folder-path')) opts.folderPath = this.getAttribute('folder-path');\n if (typeof this.contentRenderer === 'function') opts.contentRenderer = this.contentRenderer;\n if (typeof this.onSelect === 'function') opts.onSelect = this.onSelect;\n return opts;\n }\n\n _render() {\n this._destroy();\n this._handle = createFolderGallery(this, this._options());\n }\n _destroy() {\n if (this._handle) { this._handle.destroy(); this._handle = null; }\n }\n\n /* Imperative API - delegate to the core handle. */\n next() { this._handle && this._handle.next(); }\n prev() { this._handle && this._handle.prev(); }\n goTo(i) { this._handle && this._handle.goTo(i); }\n setMode(m) { this.setAttribute('mode', m); }\n setPeek(p) { this.setAttribute('peek', p); }\n getActiveIndex() { return this._handle ? this._handle.getActiveIndex() : -1; }\n getMode() { return this._handle ? this._handle.getMode() : (this.getAttribute('mode') || 'stack'); }\n}\n\nexport function defineFolderGallery(tag = 'folder-gallery') {\n if (typeof customElements !== 'undefined' && !customElements.get(tag)) {\n customElements.define(tag, FolderGalleryElement);\n }\n return FolderGalleryElement;\n}\n\nexport default FolderGalleryElement;\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/folder-gallery-element.js"],"sourcesContent":["/* ============================================================================\n * <folder-gallery> - Custom Element wrapper around the framework-agnostic core.\n *\n * import { defineFolderGallery } from 'folder-gallery/element';\n * defineFolderGallery(); // registers <folder-gallery>\n *\n * <folder-gallery mode=\"grid\"></folder-gallery>\n * el.items = [{ label, color, src }, ...]; // set items via property\n * el.addEventListener('fg-select', e => ...); // events bubble from the core\n *\n * Uses the element itself as the light-DOM root, so the shared\n * folder-gallery.css styles it. (Shadow-DOM encapsulation is a later option.)\n * ========================================================================== */\n\nimport { createFolderGallery } from './folder-gallery.js';\n\nconst asBool = (v) => v !== null && v !== 'false';\n\n// SSR-safe base: on a server (Next/Nuxt) there is no HTMLElement, and merely\n// evaluating `class extends HTMLElement` at import time would throw. Fall back\n// to a stub there; the real element is only ever registered in the browser via\n// defineFolderGallery (guarded on customElements below).\nconst ElementBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};\n\nexport class FolderGalleryElement extends ElementBase {\n static get observedAttributes() {\n return ['mode', 'peek', 'drag', 'loop', 'scroll-nav', 'reduced-motion', 'default-active-index', 'label', 'folder-path'];\n }\n\n constructor() {\n super();\n this._handle = null;\n this._items = [];\n }\n\n /** Items are an array - set via property (attributes can't hold objects). */\n get items() { return this._items; }\n set items(value) {\n this._items = Array.isArray(value) ? value : [];\n if (this.isConnected) this._render();\n }\n\n connectedCallback() {\n // Optional declarative items via a JSON `items` attribute.\n if (!this._items.length && this.getAttribute('items')) {\n try { this._items = JSON.parse(this.getAttribute('items')); } catch (_) { /* ignore malformed */ }\n }\n this._render();\n }\n\n disconnectedCallback() { this._destroy(); }\n\n attributeChangedCallback(name, _oldValue, newValue) {\n if (!this._handle) return;\n if (name === 'mode') { this._handle.setMode(newValue); return; }\n if (name === 'peek') { this._handle.setPeek(newValue); return; }\n this._render(); // any other observed attribute → rebuild\n }\n\n _options() {\n const opts = { items: this._items };\n if (this.hasAttribute('mode')) opts.mode = this.getAttribute('mode');\n if (this.hasAttribute('peek')) opts.peek = this.getAttribute('peek');\n if (this.hasAttribute('drag')) opts.drag = this.getAttribute('drag');\n if (this.hasAttribute('loop')) opts.loop = asBool(this.getAttribute('loop'));\n if (this.hasAttribute('scroll-nav')) opts.scrollNav = asBool(this.getAttribute('scroll-nav'));\n if (this.hasAttribute('reduced-motion')) opts.reducedMotion = this.getAttribute('reduced-motion');\n if (this.hasAttribute('default-active-index')) opts.defaultActiveIndex = parseInt(this.getAttribute('default-active-index'), 10) || 0;\n if (this.hasAttribute('label')) opts.label = this.getAttribute('label');\n if (this.hasAttribute('folder-path')) opts.folderPath = this.getAttribute('folder-path');\n if (typeof this.contentRenderer === 'function') opts.contentRenderer = this.contentRenderer;\n if (typeof this.onSelect === 'function') opts.onSelect = this.onSelect;\n return opts;\n }\n\n _render() {\n this._destroy();\n this._handle = createFolderGallery(this, this._options());\n }\n _destroy() {\n if (this._handle) { this._handle.destroy(); this._handle = null; }\n }\n\n /* Imperative API - delegate to the core handle. */\n next() { this._handle && this._handle.next(); }\n prev() { this._handle && this._handle.prev(); }\n goTo(i) { this._handle && this._handle.goTo(i); }\n setMode(m) { this.setAttribute('mode', m); }\n setPeek(p) { this.setAttribute('peek', p); }\n getActiveIndex() { return this._handle ? this._handle.getActiveIndex() : -1; }\n getMode() { return this._handle ? this._handle.getMode() : (this.getAttribute('mode') || 'stack'); }\n}\n\nexport function defineFolderGallery(tag = 'folder-gallery') {\n if (typeof customElements !== 'undefined' && !customElements.get(tag)) {\n customElements.define(tag, FolderGalleryElement);\n }\n return FolderGalleryElement;\n}\n\nexport default FolderGalleryElement;\n"],"mappings":";;;;;AAgBA,IAAM,SAAS,CAAC,MAAM,MAAM,QAAQ,MAAM;AAM1C,IAAM,cAAc,OAAO,gBAAgB,cAAc,cAAc,MAAM;AAAC;AAEvE,IAAM,uBAAN,cAAmC,YAAY;AAAA,EACpD,WAAW,qBAAqB;AAC9B,WAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,cAAc,kBAAkB,wBAAwB,SAAS,aAAa;AAAA,EACxH;AAAA,EAEA,cAAc;AACZ,UAAM;AACN,SAAK,UAAU;AACf,SAAK,SAAS,CAAC;AAAA,EACjB;AAAA;AAAA,EAGA,IAAI,QAAQ;AAAE,WAAO,KAAK;AAAA,EAAQ;AAAA,EAClC,IAAI,MAAM,OAAO;AACf,SAAK,SAAS,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;AAC9C,QAAI,KAAK,YAAa,MAAK,QAAQ;AAAA,EACrC;AAAA,EAEA,oBAAoB;AAElB,QAAI,CAAC,KAAK,OAAO,UAAU,KAAK,aAAa,OAAO,GAAG;AACrD,UAAI;AAAE,aAAK,SAAS,KAAK,MAAM,KAAK,aAAa,OAAO,CAAC;AAAA,MAAG,SAAS,GAAG;AAAA,MAAyB;AAAA,IACnG;AACA,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,uBAAuB;AAAE,SAAK,SAAS;AAAA,EAAG;AAAA,EAE1C,yBAAyB,MAAM,WAAW,UAAU;AAClD,QAAI,CAAC,KAAK,QAAS;AACnB,QAAI,SAAS,QAAQ;AAAE,WAAK,QAAQ,QAAQ,QAAQ;AAAG;AAAA,IAAQ;AAC/D,QAAI,SAAS,QAAQ;AAAE,WAAK,QAAQ,QAAQ,QAAQ;AAAG;AAAA,IAAQ;AAC/D,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,WAAW;AACT,UAAM,OAAO,EAAE,OAAO,KAAK,OAAO;AAClC,QAAI,KAAK,aAAa,MAAM,EAAG,MAAK,OAAO,KAAK,aAAa,MAAM;AACnE,QAAI,KAAK,aAAa,MAAM,EAAG,MAAK,OAAO,KAAK,aAAa,MAAM;AACnE,QAAI,KAAK,aAAa,MAAM,EAAG,MAAK,OAAO,KAAK,aAAa,MAAM;AACnE,QAAI,KAAK,aAAa,MAAM,EAAG,MAAK,OAAO,OAAO,KAAK,aAAa,MAAM,CAAC;AAC3E,QAAI,KAAK,aAAa,YAAY,EAAG,MAAK,YAAY,OAAO,KAAK,aAAa,YAAY,CAAC;AAC5F,QAAI,KAAK,aAAa,gBAAgB,EAAG,MAAK,gBAAgB,KAAK,aAAa,gBAAgB;AAChG,QAAI,KAAK,aAAa,sBAAsB,EAAG,MAAK,qBAAqB,SAAS,KAAK,aAAa,sBAAsB,GAAG,EAAE,KAAK;AACpI,QAAI,KAAK,aAAa,OAAO,EAAG,MAAK,QAAQ,KAAK,aAAa,OAAO;AACtE,QAAI,KAAK,aAAa,aAAa,EAAG,MAAK,aAAa,KAAK,aAAa,aAAa;AACvF,QAAI,OAAO,KAAK,oBAAoB,WAAY,MAAK,kBAAkB,KAAK;AAC5E,QAAI,OAAO,KAAK,aAAa,WAAY,MAAK,WAAW,KAAK;AAC9D,WAAO;AAAA,EACT;AAAA,EAEA,UAAU;AACR,SAAK,SAAS;AACd,SAAK,UAAU,oBAAoB,MAAM,KAAK,SAAS,CAAC;AAAA,EAC1D;AAAA,EACA,WAAW;AACT,QAAI,KAAK,SAAS;AAAE,WAAK,QAAQ,QAAQ;AAAG,WAAK,UAAU;AAAA,IAAM;AAAA,EACnE;AAAA;AAAA,EAGA,OAAO;AAAE,SAAK,WAAW,KAAK,QAAQ,KAAK;AAAA,EAAG;AAAA,EAC9C,OAAO;AAAE,SAAK,WAAW,KAAK,QAAQ,KAAK;AAAA,EAAG;AAAA,EAC9C,KAAK,GAAG;AAAE,SAAK,WAAW,KAAK,QAAQ,KAAK,CAAC;AAAA,EAAG;AAAA,EAChD,QAAQ,GAAG;AAAE,SAAK,aAAa,QAAQ,CAAC;AAAA,EAAG;AAAA,EAC3C,QAAQ,GAAG;AAAE,SAAK,aAAa,QAAQ,CAAC;AAAA,EAAG;AAAA,EAC3C,iBAAiB;AAAE,WAAO,KAAK,UAAU,KAAK,QAAQ,eAAe,IAAI;AAAA,EAAI;AAAA,EAC7E,UAAU;AAAE,WAAO,KAAK,UAAU,KAAK,QAAQ,QAAQ,IAAK,KAAK,aAAa,MAAM,KAAK;AAAA,EAAU;AACrG;AAEO,SAAS,oBAAoB,MAAM,kBAAkB;AAC1D,MAAI,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,GAAG,GAAG;AACrE,mBAAe,OAAO,KAAK,oBAAoB;AAAA,EACjD;AACA,SAAO;AACT;AAEA,IAAO,iCAAQ;","names":[]}
package/dist/folder-gallery.css CHANGED
@@ -98,6 +98,38 @@
98
98
  outline: none;
99
99
  }
100
100
  .fg-card.is-active { cursor: default; }
101
+
102
+ /* ── drag: grab the active folder and throw it (stack mode) ── */
103
+ [data-fg-drag='fling'][data-fg-mode='stack'] .fg-card.is-active {
104
+ cursor: grab;
105
+ /* the gesture owns the pointer; without this, touch drags scroll the page */
106
+ touch-action: none;
107
+ }
108
+ .fg-card--dragging,
109
+ [data-fg-drag='fling'][data-fg-mode='stack'] .fg-card--dragging {
110
+ transition: none;
111
+ cursor: grabbing;
112
+ }
113
+ /* One-frame teleport for a thrown folder rejoining the back of the pile
114
+ (see the fling handler): transitioning that move would slide the card
115
+ through the other folders' planes. */
116
+ .fg-card--snap { transition: none; }
117
+ /* While flying off, the fade must FINISH before the relayout snaps the
118
+ card to its staging point: snapping a still-visible card mid-flight
119
+ reads as a flicker. Opacity completes inside the 400ms timer; the
120
+ transform launches hard and glides (a throw keeps its momentum). */
121
+ .fg-card--flung {
122
+ transition:
123
+ transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
124
+ opacity 340ms ease-out;
125
+ }
126
+ /* Dropping back into the pile: a quicker, softer settle than the default
127
+ 700ms shuffle, so the landing reads as its own beat. */
128
+ .fg-card--entering {
129
+ transition:
130
+ transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
131
+ opacity 320ms ease-out;
132
+ }
101
133
  .fg-card:focus-visible {
102
134
  outline: 2px solid var(--fg-dot-active);
103
135
  outline-offset: 4px;
package/dist/index.cjs CHANGED
@@ -50,10 +50,13 @@ var DEFAULTS = {
50
50
  // 'auto' | 'off' | 'force'
51
51
  peek: "hover",
52
52
  // 'hover' | 'always' | 'off'
53
+ drag: "fling",
54
+ // 'fling' | 'off' - grab the active folder and throw it (stack mode)
53
55
  defaultActiveIndex: 0,
54
56
  label: "Folder gallery"
55
57
  };
56
58
  var PEEK_MODES = /* @__PURE__ */ new Set(["hover", "always", "off"]);
59
+ var DRAG_MODES = /* @__PURE__ */ new Set(["fling", "off"]);
57
60
  var MODE_WIDTHS = { stack: 480, grid: 720, carousel: 720 };
58
61
  var SCROLL_THRESHOLD = 30;
59
62
  var SCROLL_COOLDOWN = { stack: 450, carousel: 300 };
@@ -114,6 +117,7 @@ function createFolderGallery(root, options = {}) {
114
117
  root.classList.add("fg-root");
115
118
  root.setAttribute("data-fg-mode", mode);
116
119
  root.setAttribute("data-fg-peek", PEEK_MODES.has(opts.peek) ? opts.peek : "hover");
120
+ root.setAttribute("data-fg-drag", DRAG_MODES.has(opts.drag) ? opts.drag : "fling");
117
121
  const scene = document.createElement("div");
118
122
  scene.className = "fg-scene";
119
123
  scene.setAttribute("role", "listbox");
@@ -134,6 +138,7 @@ function createFolderGallery(root, options = {}) {
134
138
  root.classList.remove("fg-root");
135
139
  root.removeAttribute("data-fg-mode");
136
140
  root.removeAttribute("data-fg-peek");
141
+ root.removeAttribute("data-fg-drag");
137
142
  }
138
143
  if (n === 0) {
139
144
  return { next() {
@@ -144,10 +149,12 @@ function createFolderGallery(root, options = {}) {
144
149
  }, getActiveIndex: () => -1, getMode: () => mode, destroy: teardown };
145
150
  }
146
151
  function setCardTransform(card, { x, y, z, rx, ry, s, zIndex, opacity, isActive }) {
147
- card.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`;
152
+ if (!card.classList.contains("fg-card--flung")) {
153
+ card.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`;
154
+ card.style.opacity = String(opacity);
155
+ }
148
156
  card.style.transformOrigin = "center bottom";
149
157
  card.style.zIndex = String(zIndex);
150
- card.style.opacity = String(opacity);
151
158
  card.setAttribute("aria-selected", isActive ? "true" : "false");
152
159
  card.classList.toggle("is-active", isActive);
153
160
  }
@@ -307,8 +314,14 @@ function createFolderGallery(root, options = {}) {
307
314
  if (!PEEK_MODES.has(p)) return;
308
315
  root.setAttribute("data-fg-peek", p);
309
316
  }
317
+ const dragEnabled = opts.drag !== "off";
318
+ let suppressClick = false;
310
319
  cardEls.forEach((card, i) => {
311
320
  on(card, "click", () => {
321
+ if (suppressClick) {
322
+ suppressClick = false;
323
+ return;
324
+ }
312
325
  i === active ? select(i) : goTo(i);
313
326
  });
314
327
  on(card, "keydown", (e) => {
@@ -388,6 +401,7 @@ function createFolderGallery(root, options = {}) {
388
401
  touchStartY = e.touches[0].clientY;
389
402
  }, { passive: true });
390
403
  on(scene, "touchend", (e) => {
404
+ if (dragEnabled && mode === "stack") return;
391
405
  const dx = touchStartX - e.changedTouches[0].clientX;
392
406
  const dy = touchStartY - e.changedTouches[0].clientY;
393
407
  const ax = Math.abs(dx);
@@ -396,6 +410,102 @@ function createFolderGallery(root, options = {}) {
396
410
  const dir = ax > ay ? dx > 0 ? 1 : -1 : dy > 0 ? 1 : -1;
397
411
  goTo(active + dir);
398
412
  }, { passive: true });
413
+ if (dragEnabled) {
414
+ const DRAG_ROT = 0.04;
415
+ const FLING_DIST = 90;
416
+ const FLING_VEL = 0.5;
417
+ const TAP_SLOP = 6;
418
+ let dragCard = null;
419
+ let dragBase = "";
420
+ let startPX = 0, startPY = 0, dragDX = 0, dragDY = 0;
421
+ let lastX = 0, lastY = 0, lastT = 0, velX = 0, velY = 0;
422
+ on(scene, "pointerdown", (e) => {
423
+ if (mode !== "stack") return;
424
+ if (e.button !== void 0 && e.button !== 0) return;
425
+ const card = e.target && e.target.closest ? e.target.closest(".fg-card") : null;
426
+ if (!card || !card.classList.contains("is-active")) return;
427
+ dragCard = card;
428
+ dragBase = card.style.transform;
429
+ startPX = e.clientX;
430
+ startPY = e.clientY;
431
+ dragDX = 0;
432
+ dragDY = 0;
433
+ lastX = e.clientX;
434
+ lastY = e.clientY;
435
+ lastT = typeof performance !== "undefined" ? performance.now() : Date.now();
436
+ velX = 0;
437
+ velY = 0;
438
+ card.classList.add("fg-card--dragging");
439
+ if (card.setPointerCapture && e.pointerId !== void 0) {
440
+ try {
441
+ card.setPointerCapture(e.pointerId);
442
+ } catch (_) {
443
+ }
444
+ }
445
+ });
446
+ on(window, "pointermove", (e) => {
447
+ if (!dragCard) return;
448
+ dragDX = e.clientX - startPX;
449
+ dragDY = e.clientY - startPY;
450
+ const now = typeof performance !== "undefined" ? performance.now() : Date.now();
451
+ const dt = Math.max(now - lastT, 1);
452
+ velX = (e.clientX - lastX) / dt;
453
+ velY = (e.clientY - lastY) / dt;
454
+ lastX = e.clientX;
455
+ lastY = e.clientY;
456
+ lastT = now;
457
+ dragCard.style.transform = `${dragBase} translate3d(${dragDX}px, ${dragDY}px, 40px) rotate(${(dragDX * DRAG_ROT).toFixed(2)}deg)`;
458
+ });
459
+ const endDrag = () => {
460
+ if (!dragCard) return;
461
+ const card = dragCard;
462
+ dragCard = null;
463
+ card.classList.remove("fg-card--dragging");
464
+ const dist = Math.hypot(dragDX, dragDY);
465
+ if (dist < TAP_SLOP) {
466
+ card.style.transform = dragBase;
467
+ return;
468
+ }
469
+ suppressClick = true;
470
+ const horizontal = Math.abs(dragDX) >= Math.abs(dragDY);
471
+ const flung = dist > FLING_DIST || Math.hypot(velX, velY) > FLING_VEL;
472
+ const dir = horizontal ? dragDX > 0 ? -1 : 1 : dragDY > 0 ? -1 : 1;
473
+ const target = active + dir;
474
+ const blocked = !opts.loop && (target < 0 || target > n - 1);
475
+ if (!flung || blocked) {
476
+ card.style.transform = dragBase;
477
+ return;
478
+ }
479
+ if (reduced) {
480
+ goTo(target);
481
+ return;
482
+ }
483
+ const offX = horizontal ? Math.sign(dragDX) * Math.max(window.innerWidth * 0.7, 480) : dragDX * 3;
484
+ const offY = horizontal ? dragDY * 3 : Math.sign(dragDY) * Math.max(window.innerHeight * 0.7, 480);
485
+ card.classList.add("fg-card--flung");
486
+ card.style.transform = `${dragBase} translate3d(${offX}px, ${offY}px, 40px) rotate(${Math.sign(dragDX || 1) * 18}deg)`;
487
+ card.style.opacity = "0";
488
+ goTo(target);
489
+ setTimeout(() => {
490
+ card.classList.add("fg-card--snap");
491
+ card.classList.remove("fg-card--flung");
492
+ applyLayout();
493
+ const slot = card.style.transform;
494
+ const slotOpacity = card.style.opacity;
495
+ card.style.transform = `${slot} translate3d(0, -90px, 0)`;
496
+ card.style.opacity = "0";
497
+ requestAnimationFrame(() => requestAnimationFrame(() => {
498
+ card.classList.remove("fg-card--snap");
499
+ card.classList.add("fg-card--entering");
500
+ card.style.transform = slot;
501
+ card.style.opacity = slotOpacity;
502
+ setTimeout(() => card.classList.remove("fg-card--entering"), 700);
503
+ }));
504
+ }, 400);
505
+ };
506
+ on(window, "pointerup", endDrag);
507
+ on(window, "pointercancel", endDrag);
508
+ }
399
509
  let resizeTimer;
400
510
  on(window, "resize", () => {
401
511
  clearTimeout(resizeTimer);