flipfolio 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -9,6 +9,9 @@ export interface FolderItem {
   content?: string | Node;
   /** Image URL printed on the folder's front panel; back and tab keep their color. */
   decal?: string;
+  /** CSS gradient painted across the front panel (e.g. `linear-gradient(...)`),
+   *  over the frosted surface but under the label. */
+  gradient?: string;
   /** Any extra data - passed through to onSelect. */
   [key: string]: unknown;
 }
@@ -20,7 +23,7 @@ export type DragMode = 'fling' | 'off';
 export interface FolderGalleryOptions {
   items?: FolderItem[];
   mode?: GalleryMode;
-  /** Fills the folder interior. Overrides the built-in polaroid/image preset. */
+  /** Fills the folder interior. Overrides the built-in image/content renderer. */
   contentRenderer?: (card: HTMLElement, item: FolderItem, index: number) => void;
   /** Fired on click/Enter of the active folder. No built-in navigation. */
   onSelect?: (item: FolderItem, index: number) => void;
@@ -36,6 +39,9 @@ export interface FolderGalleryOptions {
   defaultActiveIndex?: number;
   /** aria-label for the listbox. */
   label?: string;
+  /** Pin the grid layout's column count and/or gap (px). Both default to the
+   *  built-in heuristic (2 or 3 columns by scene width and item count, 16px gap). */
+  grid?: { columns?: number; gap?: number };
 }
 
 export interface FolderGalleryHandle {
@@ -44,12 +50,44 @@ export interface FolderGalleryHandle {
   goTo(index: number): void;
   setMode(mode: GalleryMode): void;
   setPeek(peek: PeekMode): void;
+  /** Recolor folder `index` from a single hex; re-derives the full palette
+   *  (back, frosted + solid fronts, auto-contrast label) like build time. */
+  setColor(index: number, hex: string): void;
+  /** Paint (or, with a falsy value, clear) a CSS gradient on folder `index`'s front. */
+  setGradient(index: number, gradient: string | null): void;
   getActiveIndex(): number;
   getMode(): GalleryMode;
+  /** Current peek mode (reads the root's `data-fg-peek`). */
+  getPeek(): PeekMode;
+  /** The hex color folder `index` is painted with, or `undefined` if unset. */
+  getColor(index: number): string | undefined;
+  /** The CSS gradient on folder `index`'s front, or `undefined` if none. */
+  getGradient(index: number): string | undefined;
+  /** A shallow copy of the items the gallery was built with. */
+  getItems(): FolderItem[];
   /** Removes every listener and empties the root element. */
   destroy(): void;
 }
 
+/**
+ * DOM CustomEvents the gallery dispatches on its root element. They bubble, so
+ * a wrapper or ancestor can listen too. Use with `addEventListener` for typed
+ * `event.detail` (augment `HTMLElementEventMap` in your app to wire it up).
+ */
+export interface FolderGalleryEventMap {
+  'fg-select': CustomEvent<{ index: number; item: FolderItem }>;
+  'fg-activechange': CustomEvent<{ index: number; item: FolderItem }>;
+  'fg-modechange': CustomEvent<{ mode: GalleryMode }>;
+  'fg-peekchange': CustomEvent<{ peek: PeekMode }>;
+  'fg-flingstart': CustomEvent<{ index: number; direction: 'next' | 'prev' }>;
+  'fg-flingend': CustomEvent<{ index: number; direction: 'next' | 'prev' }>;
+}
+
+/** Preset folder silhouette path strings for the `folderPath` option
+ *  (viewBox `0 0 480 342`): a left tab (default), a mirrored right tab, or a
+ *  tabless tray. */
+export const FOLDER_PATHS: { left: string; right: string; tray: string };
+
 /**
  * Create a 3D folder gallery inside `root`. The gallery builds and owns its
  * own DOM; call `handle.destroy()` to tear it down.

package/dist/index.js

@@ -1,8 +1,10 @@
 import {
+  FOLDER_PATHS,
   createFolderGallery,
   folder_gallery_default
-} from "./chunk-Q2NKZMCC.js";
+} from "./chunk-RFBZ3WPG.js";
 export {
+  FOLDER_PATHS,
   createFolderGallery,
   folder_gallery_default as default
 };

package/dist/react.cjs

@@ -1,34 +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 __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -72,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);
@@ -94,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";
@@ -113,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;
@@ -129,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");
@@ -147,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();
@@ -154,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);
@@ -179,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");
@@ -193,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);
@@ -216,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;
   });
@@ -229,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 });
@@ -247,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);
@@ -308,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;
@@ -402,7 +455,7 @@ function createFolderGallery(root, options = {}) {
         scrollAccum = 0;
         scrollCooldown = true;
         goTo(active + dir);
-        setTimeout(() => {
+        later(() => {
           scrollCooldown = false;
           scrollAccum = 0;
         }, SCROLL_COOLDOWN[mode] || 300);
@@ -491,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;
@@ -501,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();
@@ -509,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);
     };
@@ -524,24 +583,52 @@ 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-react.js
 var FolderGallery = (0, import_react.forwardRef)(function FolderGallery2(props, ref) {
-  const _a = props, {
+  const {
     items,
     mode = "stack",
     peek = "hover",
@@ -550,6 +637,9 @@ var FolderGallery = (0, import_react.forwardRef)(function FolderGallery2(props,
     onSelect,
     onActiveChange,
     onModeChange,
+    onPeekChange,
+    onFlingStart,
+    onFlingEnd,
     folderPath,
     loop,
     scrollNav,
@@ -557,29 +647,13 @@ var FolderGallery = (0, import_react.forwardRef)(function FolderGallery2(props,
     defaultActiveIndex,
     label,
     className,
-    style
-  } = _a, rest = __objRest(_a, [
-    "items",
-    "mode",
-    "peek",
-    "drag",
-    "contentRenderer",
-    "onSelect",
-    "onActiveChange",
-    "onModeChange",
-    "folderPath",
-    "loop",
-    "scrollNav",
-    "reducedMotion",
-    "defaultActiveIndex",
-    "label",
-    "className",
-    "style"
-  ]);
+    style,
+    ...rest
+  } = props;
   const rootRef = (0, import_react.useRef)(null);
   const handleRef = (0, import_react.useRef)(null);
   const callbacksRef = (0, import_react.useRef)({});
-  callbacksRef.current = { onSelect, onActiveChange, onModeChange, contentRenderer };
+  callbacksRef.current = { onSelect, onActiveChange, onModeChange, onPeekChange, onFlingStart, onFlingEnd, contentRenderer };
   (0, import_react.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return void 0;
@@ -609,11 +683,29 @@ var FolderGallery = (0, import_react.forwardRef)(function FolderGallery2(props,
       const fn = callbacksRef.current.onModeChange;
       if (fn) fn(e.detail.mode);
     };
+    const onPeekEv = (e) => {
+      const fn = callbacksRef.current.onPeekChange;
+      if (fn) fn(e.detail.peek);
+    };
+    const onFlingStartEv = (e) => {
+      const fn = callbacksRef.current.onFlingStart;
+      if (fn) fn(e.detail.index, e.detail.direction);
+    };
+    const onFlingEndEv = (e) => {
+      const fn = callbacksRef.current.onFlingEnd;
+      if (fn) fn(e.detail.index, e.detail.direction);
+    };
     root.addEventListener("fg-activechange", onActive);
     root.addEventListener("fg-modechange", onModeEv);
+    root.addEventListener("fg-peekchange", onPeekEv);
+    root.addEventListener("fg-flingstart", onFlingStartEv);
+    root.addEventListener("fg-flingend", onFlingEndEv);
     return () => {
       root.removeEventListener("fg-activechange", onActive);
       root.removeEventListener("fg-modechange", onModeEv);
+      root.removeEventListener("fg-peekchange", onPeekEv);
+      root.removeEventListener("fg-flingstart", onFlingStartEv);
+      root.removeEventListener("fg-flingend", onFlingEndEv);
       handle.destroy();
       handleRef.current = null;
     };
@@ -632,10 +724,16 @@ var FolderGallery = (0, import_react.forwardRef)(function FolderGallery2(props,
     goTo: (i) => handleRef.current && handleRef.current.goTo(i),
     setMode: (m) => handleRef.current && handleRef.current.setMode(m),
     setPeek: (p) => handleRef.current && handleRef.current.setPeek(p),
+    setColor: (i, hex) => handleRef.current && handleRef.current.setColor(i, hex),
+    setGradient: (i, gradient) => handleRef.current && handleRef.current.setGradient(i, gradient),
     getActiveIndex: () => handleRef.current ? handleRef.current.getActiveIndex() : -1,
-    getMode: () => handleRef.current ? handleRef.current.getMode() : mode
-  }), [mode]);
-  return (0, import_react.createElement)("div", __spreadValues({ ref: rootRef, className, style }, rest));
+    getMode: () => handleRef.current ? handleRef.current.getMode() : mode,
+    getPeek: () => handleRef.current ? handleRef.current.getPeek() : peek,
+    getColor: (i) => handleRef.current ? handleRef.current.getColor(i) : void 0,
+    getGradient: (i) => handleRef.current ? handleRef.current.getGradient(i) : void 0,
+    getItems: () => handleRef.current ? handleRef.current.getItems() : []
+  }), [mode, peek]);
+  return (0, import_react.createElement)("div", { ref: rootRef, className, style, ...rest });
 });
 var folder_gallery_react_default = FolderGallery;
 // Annotate the CommonJS export names for ESM import in node: