flipfolio 0.2.0 → 0.3.0

package/dist/element.cjs

@@ -1,22 +1,7 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -60,15 +45,20 @@ var DEFAULTS = {
 };
 var PEEK_MODES = /* @__PURE__ */ new Set(["hover", "always", "off"]);
 var DRAG_MODES = /* @__PURE__ */ new Set(["fling", "off"]);
+var INSTANCES = /* @__PURE__ */ new WeakMap();
 var MODE_WIDTHS = { stack: 480, grid: 720, carousel: 720 };
 var SCROLL_THRESHOLD = 30;
 var SCROLL_COOLDOWN = { stack: 450, carousel: 300 };
 function hexToRgb(hex) {
-  const h = String(hex).replace("#", "");
+  let h = String(hex).trim().replace(/^#/, "");
+  if (h.length === 3) h = h.replace(/./g, (c) => c + c);
+  if (!/^[0-9a-f]{6}$/i.test(h)) return null;
   return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
 }
 function folderColors(hex) {
-  const [r, g, b] = hexToRgb(hex);
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const [r, g, b] = rgb;
   const dn = (v) => Math.max(v - 30, 0);
   const up = (v, o) => Math.min(v + o, 255);
   const fr = up(r, 35);
@@ -82,6 +72,34 @@ function folderColors(hex) {
     label: yiq >= 128 ? "#1c1c1a" : "#ffffff"
   };
 }
+function paintFolder(card, hex) {
+  const c = folderColors(hex);
+  if (!c) return;
+  card.style.setProperty("--fg-folder-bg", hex);
+  card.style.setProperty("--fg-front", c.front);
+  card.style.setProperty("--fg-front-solid", c.frontSolid);
+  card.style.setProperty("--fg-label-on-color", c.label);
+  const path = card.querySelector(".fg-folder path");
+  if (path) path.setAttribute("fill", c.back);
+}
+function paintGradient(card, gradient) {
+  const front = card.querySelector(".fg-front");
+  if (!front) return;
+  let layer = front.querySelector(".fg-gradient");
+  if (!gradient) {
+    if (layer) layer.remove();
+    card.classList.remove("fg-card--gradient");
+    return;
+  }
+  if (!layer) {
+    layer = document.createElement("div");
+    layer.className = "fg-gradient";
+    layer.setAttribute("aria-hidden", "true");
+    front.insertBefore(layer, front.firstChild);
+  }
+  layer.style.background = gradient;
+  card.classList.add("fg-card--gradient");
+}
 function defaultContentRenderer(card, item) {
   const wrap = document.createElement("div");
   wrap.className = "fg-content";
@@ -101,12 +119,17 @@ function defaultContentRenderer(card, item) {
   card.appendChild(wrap);
 }
 function createFolderGallery(root, options = {}) {
-  if (!root || !root.nodeType) throw new Error("createFolderGallery: a root element is required");
-  const opts = __spreadValues(__spreadValues({}, DEFAULTS), options);
+  if (!root || root.nodeType !== 1) throw new Error("createFolderGallery: a root element is required");
+  const prior = INSTANCES.get(root);
+  if (prior) prior();
+  const provided = {};
+  for (const k in options) if (options[k] !== void 0) provided[k] = options[k];
+  const opts = { ...DEFAULTS, ...provided };
   const items = Array.isArray(opts.items) ? opts.items : [];
   const n = items.length;
   const renderContent = typeof opts.contentRenderer === "function" ? opts.contentRenderer : defaultContentRenderer;
-  const reduced = opts.reducedMotion === "force" || opts.reducedMotion !== "off" && typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const reducedQuery = opts.reducedMotion === "auto" && typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+  let reduced = opts.reducedMotion === "force" || (reducedQuery ? reducedQuery.matches : false);
   let mode = MODE_WIDTHS[opts.mode] ? opts.mode : "stack";
   let active = Math.min(Math.max(opts.defaultActiveIndex | 0, 0), Math.max(n - 1, 0));
   let scrollCooldown = false;
@@ -117,6 +140,25 @@ function createFolderGallery(root, options = {}) {
     cleanups.push(() => el.removeEventListener(ev, fn, o));
   };
   const emit = (name, detail) => root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+  let destroyed = false;
+  const timers = /* @__PURE__ */ new Set();
+  const rafs = /* @__PURE__ */ new Set();
+  const later = (fn, ms) => {
+    const id = setTimeout(() => {
+      timers.delete(id);
+      fn();
+    }, ms);
+    timers.add(id);
+    return id;
+  };
+  const frame = (fn) => {
+    const id = requestAnimationFrame(() => {
+      rafs.delete(id);
+      fn();
+    });
+    rafs.add(id);
+    return id;
+  };
   root.classList.add("fg-root");
   root.setAttribute("data-fg-mode", mode);
   root.setAttribute("data-fg-peek", PEEK_MODES.has(opts.peek) ? opts.peek : "hover");
@@ -135,6 +177,12 @@ function createFolderGallery(root, options = {}) {
   live.setAttribute("aria-atomic", "true");
   root.append(scene, dotsEl, live);
   function teardown() {
+    if (destroyed) return;
+    destroyed = true;
+    timers.forEach(clearTimeout);
+    timers.clear();
+    rafs.forEach(cancelAnimationFrame);
+    rafs.clear();
     cleanups.forEach((fn) => fn());
     cleanups.length = 0;
     root.replaceChildren();
@@ -142,21 +190,34 @@ function createFolderGallery(root, options = {}) {
     root.removeAttribute("data-fg-mode");
     root.removeAttribute("data-fg-peek");
     root.removeAttribute("data-fg-drag");
+    INSTANCES.delete(root);
   }
   if (n === 0) {
-    return { next() {
-    }, prev() {
-    }, goTo() {
-    }, setMode() {
-    }, setPeek() {
-    }, getActiveIndex: () => -1, getMode: () => mode, destroy: teardown };
+    const noop = () => {
+    };
+    INSTANCES.set(root, teardown);
+    return {
+      next: noop,
+      prev: noop,
+      goTo: noop,
+      setMode: noop,
+      setPeek: noop,
+      setColor: noop,
+      setGradient: noop,
+      getActiveIndex: () => -1,
+      getMode: () => mode,
+      getPeek: () => root.getAttribute("data-fg-peek"),
+      getColor: () => void 0,
+      getGradient: () => void 0,
+      getItems: () => [],
+      destroy: teardown
+    };
   }
   function setCardTransform(card, { x, y, z, rx, ry, s, zIndex, opacity, isActive }) {
     if (!card.classList.contains("fg-card--flung")) {
       card.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`;
       card.style.opacity = String(opacity);
     }
-    card.style.transformOrigin = "center bottom";
     card.style.zIndex = String(zIndex);
     card.setAttribute("aria-selected", isActive ? "true" : "false");
     card.classList.toggle("is-active", isActive);
@@ -167,13 +228,9 @@ function createFolderGallery(root, options = {}) {
     card.tabIndex = i === active ? 0 : -1;
     card.setAttribute("role", "option");
     card.setAttribute("aria-label", item.label || `Item ${i + 1}`);
-    if (item.color) {
-      const c = folderColors(item.color);
-      card.style.setProperty("--fg-folder-bg", item.color);
-      card.style.setProperty("--fg-front", c.front);
-      card.style.setProperty("--fg-front-solid", c.frontSolid);
-      card.style.setProperty("--fg-label-on-color", c.label);
-    }
+    card.setAttribute("aria-setsize", String(n));
+    card.setAttribute("aria-posinset", String(i + 1));
+    card.setAttribute("data-fg-index", String(i));
     const svg = document.createElementNS(SVG_NS, "svg");
     svg.setAttribute("class", "fg-folder");
     svg.setAttribute("viewBox", "0 0 480 342");
@@ -181,7 +238,7 @@ function createFolderGallery(root, options = {}) {
     svg.setAttribute("aria-hidden", "true");
     const path = document.createElementNS(SVG_NS, "path");
     path.setAttribute("d", opts.folderPath);
-    path.setAttribute("fill", item.color ? folderColors(item.color).back : "var(--fg-folder-bg)");
+    path.setAttribute("fill", "var(--fg-folder-bg)");
     svg.appendChild(path);
     card.appendChild(svg);
     renderContent(card, item, i);
@@ -204,6 +261,8 @@ function createFolderGallery(root, options = {}) {
       front.appendChild(label);
     }
     card.appendChild(front);
+    if (item.color) paintFolder(card, item.color);
+    if (item.gradient) paintGradient(card, item.gradient);
     scene.appendChild(card);
     return card;
   });
@@ -217,9 +276,13 @@ function createFolderGallery(root, options = {}) {
     dotsEl.appendChild(dot);
     return dot;
   });
+  const clearGridWidth = (card) => {
+    if (card.style.width) card.style.width = "";
+  };
   function layoutStack() {
     scene.style.height = "";
     cardEls.forEach((card, i) => {
+      clearGridWidth(card);
       const behind = (i - active + n) % n;
       if (behind === 0) {
         setCardTransform(card, { x: 0, y: 100, z: 20, rx: 0, ry: 0, s: 1, zIndex: n + 1, opacity: 1, isActive: true });
@@ -235,33 +298,31 @@ function createFolderGallery(root, options = {}) {
   }
   function layoutGrid() {
     const sceneW = scene.clientWidth || MODE_WIDTHS.grid;
-    const cols = sceneW < 520 ? 2 : n <= 4 ? 2 : 3;
-    const gap = 16;
-    const cardW = sceneW;
-    const cardH = sceneW * (2 / 3);
-    const sc = (sceneW - (cols - 1) * gap) / (cols * cardW);
-    const scaledW = cardW * sc;
-    const scaledH = cardH * sc;
-    const tabScaled = 22 * sc;
+    const gap = Number.isFinite(opts.grid && opts.grid.gap) ? opts.grid.gap : 16;
+    const cols = Math.max(1, Math.round(
+      opts.grid && opts.grid.columns ? opts.grid.columns : sceneW < 520 ? 2 : n <= 4 ? 2 : 3
+    ));
+    const cellW = (sceneW - (cols - 1) * gap) / cols;
+    const cellH = cellW * (2 / 3);
     const rows = Math.ceil(n / cols);
     cardEls.forEach((card, i) => {
       const col = i % cols;
       const row = Math.floor(i / cols);
       const itemsInRow = Math.min(cols, n - row * cols);
-      const rowW = itemsInRow * scaledW + (itemsInRow - 1) * gap;
+      const rowW = itemsInRow * cellW + (itemsInRow - 1) * gap;
       const rowStartX = (sceneW - rowW) / 2;
-      const cellLeft = rowStartX + col * (scaledW + gap);
-      const cellTop = row * (scaledH + tabScaled + gap) + tabScaled;
-      const tx = cellLeft + scaledW / 2 - cardW / 2;
-      const ty = cellTop + scaledH - cardH;
-      setCardTransform(card, { x: tx, y: ty, z: 0, rx: 0, ry: 0, s: sc, zIndex: i === active ? 2 : 1, opacity: 1, isActive: i === active });
+      const x = rowStartX + col * (cellW + gap);
+      const y = row * (cellH + gap);
+      card.style.width = cellW + "px";
+      setCardTransform(card, { x, y, z: 0, rx: 0, ry: 0, s: 1, zIndex: i === active ? 2 : 1, opacity: 1, isActive: i === active });
     });
-    scene.style.height = rows * (scaledH + tabScaled + gap) + 20 + "px";
+    scene.style.height = rows * cellH + (rows - 1) * gap + "px";
   }
   function layoutCarousel() {
     const sceneW = scene.clientWidth || MODE_WIDTHS.carousel;
     const cardW = sceneW;
     const cardH = cardW * (2 / 3);
+    cardEls.forEach(clearGridWidth);
     const activeSc = 0.62;
     const activeW = cardW * activeSc;
     const sceneH = Math.max(cardH * activeSc + 40, 180);
@@ -296,26 +357,30 @@ function createFolderGallery(root, options = {}) {
     live.textContent = cur && cur.label ? `${active + 1} of ${n}: ${cur.label}` : `${active + 1} of ${n}`;
   }
   function goTo(i) {
-    const next = opts.loop ? (i % n + n) % n : Math.min(Math.max(i, 0), n - 1);
+    if (destroyed) return;
+    const t = Number.isFinite(+i) ? Math.trunc(+i) : active;
+    const next = opts.loop ? (t % n + n) % n : Math.min(Math.max(t, 0), n - 1);
     if (next === active) return;
     active = next;
     applyLayout();
     emit("fg-activechange", { index: active, item: items[active] });
   }
   function select(i) {
+    if (destroyed) return;
     emit("fg-select", { index: i, item: items[i] });
     if (typeof opts.onSelect === "function") opts.onSelect(items[i], i);
   }
   function setMode(m) {
-    if (m === mode || !MODE_WIDTHS[m]) return;
+    if (destroyed || m === mode || !MODE_WIDTHS[m]) return;
     mode = m;
     root.setAttribute("data-fg-mode", mode);
     applyLayout();
     emit("fg-modechange", { mode });
   }
   function setPeek(p) {
-    if (!PEEK_MODES.has(p)) return;
+    if (destroyed || !PEEK_MODES.has(p) || p === root.getAttribute("data-fg-peek")) return;
     root.setAttribute("data-fg-peek", p);
+    emit("fg-peekchange", { peek: p });
   }
   const dragEnabled = opts.drag !== "off";
   let suppressClick = false;
@@ -390,7 +455,7 @@ function createFolderGallery(root, options = {}) {
         scrollAccum = 0;
         scrollCooldown = true;
         goTo(active + dir);
-        setTimeout(() => {
+        later(() => {
           scrollCooldown = false;
           scrollAccum = 0;
         }, SCROLL_COOLDOWN[mode] || 300);
@@ -479,8 +544,11 @@ function createFolderGallery(root, options = {}) {
         card.style.transform = dragBase;
         return;
       }
+      const semantic = dir > 0 ? "next" : "prev";
+      emit("fg-flingstart", { index: active, direction: semantic });
       if (reduced) {
         goTo(target);
+        emit("fg-flingend", { index: target, direction: semantic });
         return;
       }
       const offX = horizontal ? Math.sign(dragDX) * Math.max(window.innerWidth * 0.7, 480) : dragDX * 3;
@@ -489,7 +557,7 @@ function createFolderGallery(root, options = {}) {
       card.style.transform = `${dragBase} translate3d(${offX}px, ${offY}px, 40px) rotate(${Math.sign(dragDX || 1) * 18}deg)`;
       card.style.opacity = "0";
       goTo(target);
-      setTimeout(() => {
+      later(() => {
         card.classList.add("fg-card--snap");
         card.classList.remove("fg-card--flung");
         applyLayout();
@@ -497,12 +565,15 @@ function createFolderGallery(root, options = {}) {
         const slotOpacity = card.style.opacity;
         card.style.transform = `${slot} translate3d(0, -90px, 0)`;
         card.style.opacity = "0";
-        requestAnimationFrame(() => requestAnimationFrame(() => {
+        frame(() => frame(() => {
           card.classList.remove("fg-card--snap");
           card.classList.add("fg-card--entering");
           card.style.transform = slot;
           card.style.opacity = slotOpacity;
-          setTimeout(() => card.classList.remove("fg-card--entering"), 700);
+          later(() => {
+            card.classList.remove("fg-card--entering");
+            emit("fg-flingend", { index: target, direction: semantic });
+          }, 700);
         }));
       }, 400);
     };
@@ -512,19 +583,47 @@ function createFolderGallery(root, options = {}) {
   let resizeTimer;
   on(window, "resize", () => {
     clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(applyLayout, 150);
+    resizeTimer = later(applyLayout, 150);
   });
+  if (reducedQuery && reducedQuery.addEventListener) {
+    on(reducedQuery, "change", (e) => {
+      if (!destroyed) {
+        reduced = e.matches;
+        applyLayout();
+      }
+    });
+  }
   applyLayout();
-  return {
+  const handle = {
     next: () => goTo(active + 1),
     prev: () => goTo(active - 1),
     goTo,
     setMode,
     setPeek,
+    setColor: (i, hex) => {
+      const card = cardEls[i];
+      if (card && !destroyed) paintFolder(card, hex);
+    },
+    setGradient: (i, gradient) => {
+      const card = cardEls[i];
+      if (card && !destroyed) paintGradient(card, gradient);
+    },
     getActiveIndex: () => active,
     getMode: () => mode,
+    getPeek: () => root.getAttribute("data-fg-peek"),
+    getColor: (i) => {
+      const card = cardEls[i];
+      return card ? card.style.getPropertyValue("--fg-folder-bg") || void 0 : void 0;
+    },
+    getGradient: (i) => {
+      const layer = cardEls[i] && cardEls[i].querySelector(".fg-gradient");
+      return layer ? layer.style.background || void 0 : void 0;
+    },
+    getItems: () => items.slice(),
     destroy: teardown
   };
+  INSTANCES.set(root, teardown);
+  return handle;
 }
 
 // src/folder-gallery-element.js
@@ -613,12 +712,30 @@ var FolderGalleryElement = class extends ElementBase {
   setPeek(p) {
     this.setAttribute("peek", p);
   }
+  setColor(i, hex) {
+    this._handle && this._handle.setColor(i, hex);
+  }
+  setGradient(i, gradient) {
+    this._handle && this._handle.setGradient(i, gradient);
+  }
   getActiveIndex() {
     return this._handle ? this._handle.getActiveIndex() : -1;
   }
   getMode() {
     return this._handle ? this._handle.getMode() : this.getAttribute("mode") || "stack";
   }
+  getPeek() {
+    return this._handle ? this._handle.getPeek() : this.getAttribute("peek") || "hover";
+  }
+  getColor(i) {
+    return this._handle ? this._handle.getColor(i) : void 0;
+  }
+  getGradient(i) {
+    return this._handle ? this._handle.getGradient(i) : void 0;
+  }
+  getItems() {
+    return this._handle ? this._handle.getItems() : [];
+  }
 };
 function defineFolderGallery(tag = "folder-gallery") {
   if (typeof customElements !== "undefined" && !customElements.get(tag)) {