flipfolio 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kirthi Balakrishnan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# flipfolio
+
+A gallery where every item is a folder: stack them, grid them, spin them.
+
+Started as a CSS 3D experiment; it now runs the [kirthi.studio](https://kirthi.studio) homepage. No framework, no dependencies.
+
+Live demo: [kirthi.studio/demos/flipfolio](https://kirthi.studio/demos/flipfolio/)
+
+> v0.1.0, an early release.
+
+![flipfolio demo: stack, grid, and carousel modes](assets/demo.gif)
+
+## Quick start
+```sh
+npm install flipfolio
+```
+```html
+<link rel="stylesheet" href="flipfolio/styles.css">
+<div id="gallery"></div>
+<script type="module">
+  import { createFolderGallery } from 'flipfolio';
+
+  const gallery = createFolderGallery(document.getElementById('gallery'), {
+    items: [
+      { label: 'One Corner',   color: '#2a3a3a', src: '/img/one.jpg' },
+      { label: 'Banglatown',   color: '#3d2e42', content: '<p>Any HTML or a DOM node.</p>' },
+      { label: 'Diversity',    color: '#2a2d3e', src: '/img/three.jpg' },
+    ],
+    mode: 'stack',
+    onSelect: (item, i) => console.log('selected', item.label, i),
+  });
+
+  // gallery.next() / .prev() / .goTo(2) / .setMode('carousel') / .destroy()
+</script>
+```
+
+React:
+```jsx
+import { FolderGallery } from 'flipfolio/react';
+import 'flipfolio/styles.css';
+
+<FolderGallery items={items} mode="grid" onSelect={(item, i) => open(item)} />
+```
+
+Vue:
+```vue
+<script setup>
+import { FolderGallery } from 'flipfolio/vue';
+import 'flipfolio/styles.css';
+</script>
+
+<template>
+  <FolderGallery :items="items" mode="grid" @select="(item, i) => open(item)" />
+</template>
+```
+
+Web component:
+```html
+<script type="module">
+  import { defineFolderGallery } from 'flipfolio/element';
+  defineFolderGallery();
+</script>
+<folder-gallery mode="carousel"></folder-gallery>
+<script>document.querySelector('folder-gallery').items = items;</script>
+```
+
+## What it looks like
+
+![Six manila folders in a grid, each holding a real project image](assets/showcase/real-content.png)
+Folders hold your actual content. These are live project images, loaded with `item.src`.
+
+![The same five folders laid out as a stack, a grid, and a carousel](assets/showcase/modes.png)
+One items array, three layouts. `setMode()` animates between them at runtime.
+
+![Four folders holding a photo, a text document, an SVG chart, and a custom-rendered card](assets/showcase/any-content.png)
+Interiors take images, markup, DOM nodes, or a `contentRenderer` for anything else.
+
+![Three folder silhouettes: the default left tab, a right tab with sharp corners, and a tabless tray](assets/showcase/customize.png)
+Per-folder tab colors, tokens for radius and blur, and the silhouette itself is one SVG path.
+
+## API
+`createFolderGallery(rootElement, options) -> handle`
+
+| option | type | default | notes |
+|---|---|---|---|
+| `items` | `Item[]` | `[]` | `{ label?, color?, src?, content?, decal?, ...data }` |
+| `mode` | `'stack'\|'grid'\|'carousel'` | `'stack'` | 3 modes (a 4th "shelf" is planned) |
+| `peek` | `'hover'\|'always'\|'off'` | `'hover'` | contents slide out of the folder |
+| `contentRenderer` | `(card, item, i) => void` | built-in | fills the folder interior with whatever you render |
+| `onSelect` | `(item, i) => void` | (none) | fired on click/Enter of the active folder (no built-in navigation) |
+| `folderPath` | `string` | manila default | SVG path `d` (viewBox `0 0 480 342`) |
+| `loop` | `boolean` | `true` | wrap-around |
+| `scrollNav` | `boolean` | `true` | wheel/trackpad cycles the stack/carousel |
+| `reducedMotion` | `'auto'\|'off'\|'force'` | `'auto'` | drops the 3D tilt when reduced |
+| `defaultActiveIndex` | `number` | `0` | |
+| `label` | `string` | `'Folder gallery'` | `aria-label` for the listbox |
+
+Handle: `next()`, `prev()`, `goTo(i)`, `setMode(m)`, `setPeek(p)`, `getActiveIndex()`, `getMode()`, `destroy()`.
+
+Events (CustomEvent on the root, bubbling): `fg-select`, `fg-activechange`, `fg-modechange`, each with `event.detail`.
+
+## Content
+Each folder renders what you give it: `item.src` for an image, `item.content` for an HTML string or a DOM node, or a `contentRenderer(card, item, index)` for anything richer. Set `item.decal` to an image URL and the photo prints on the folder's front panel; the back and tab keep their color. Contents slide out of the folder on hover; the `peek` option makes that always-on or turns it off.
+
+## Accessibility
+`role="listbox"`/`option`, roving tabindex, arrow-key + Home/End navigation, `aria-live` position announcements, `:focus-visible` rings, and a `prefers-reduced-motion` fallback that drops the 3D tilt.
+
+## Theming
+Override the CSS custom properties on `.fg-root`: `--fg-folder-bg`, `--fg-radius`, `--fg-perspective`, `--fg-ease`, `--fg-front`, `--fg-front-solid`, `--fg-active-blur`, `--fg-label`, `--fg-dot`, `--fg-dot-active`. Light is the default; dark applies automatically under `prefers-color-scheme: dark`, and `data-fg-theme="light"` or `"dark"` on `.fg-root` overrides either way.
+
+## Limits
+Client-rendered only: folders paint after JS runs, there is no SSR of the layout itself. Every folder is a live 3D layer, so the sweet spot is 12 items or fewer, not hundreds. Uses `aspect-ratio` and `backdrop-filter`: evergreen browsers only, no IE fallback.
+
+## License
+MIT © Kirthi Balakrishnan

package/dist/chunk-DT6YOBGV.js

@@ -0,0 +1,414 @@
+var __defProp = Object.defineProperty;
+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;
+};
+
+// src/folder-gallery.js
+var SVG_NS = "http://www.w3.org/2000/svg";
+var DEFAULT_FOLDER_PATH = "M 0 22 C 0 10 10 0 22 0 L 155 0 C 168 0 172 6 176 14 C 180 24 188 32 204 32 L 458 32 C 470 32 480 42 480 54 L 480 320 C 480 332 470 342 458 342 L 22 342 C 10 342 0 332 0 320 Z";
+var DEFAULTS = {
+  mode: "stack",
+  // 'stack' | 'grid' | 'carousel'
+  folderPath: DEFAULT_FOLDER_PATH,
+  loop: true,
+  scrollNav: true,
+  reducedMotion: "auto",
+  // 'auto' | 'off' | 'force'
+  peek: "hover",
+  // 'hover' | 'always' | 'off'
+  defaultActiveIndex: 0,
+  label: "Folder gallery"
+};
+var PEEK_MODES = /* @__PURE__ */ new Set(["hover", "always", "off"]);
+var MODE_WIDTHS = { stack: 480, grid: 720, carousel: 720 };
+var SCROLL_THRESHOLD = 30;
+var SCROLL_COOLDOWN = { stack: 450, carousel: 300 };
+function hexToRgb(hex) {
+  const h = String(hex).replace("#", "");
+  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 dn = (v) => Math.max(v - 30, 0);
+  const up = (v, o) => Math.min(v + o, 255);
+  const fr = up(r, 35);
+  const fg = up(g, 35);
+  const fb = up(b, 35);
+  const yiq = (fr * 299 + fg * 587 + fb * 114) / 1e3;
+  return {
+    back: `rgb(${dn(r)},${dn(g)},${dn(b)})`,
+    front: `rgba(${up(r, 40)},${up(g, 40)},${up(b, 40)},0.55)`,
+    frontSolid: `rgb(${fr},${fg},${fb})`,
+    label: yiq >= 128 ? "#1c1c1a" : "#ffffff"
+  };
+}
+function defaultContentRenderer(card, item) {
+  const wrap = document.createElement("div");
+  wrap.className = "fg-content";
+  if (item.content && typeof item.content === "object" && typeof item.content.nodeType === "number") {
+    wrap.appendChild(item.content);
+  } else if (typeof item.content === "string") {
+    wrap.innerHTML = item.content;
+  } else if (item.src) {
+    const img = document.createElement("img");
+    img.className = "fg-image";
+    img.src = item.src;
+    img.alt = item.label || "";
+    img.loading = "lazy";
+    img.decoding = "async";
+    wrap.appendChild(img);
+  }
+  card.appendChild(wrap);
+}
+function createFolderGallery(root, options = {}) {
+  if (!root || !root.nodeType) throw new Error("createFolderGallery: a root element is required");
+  const opts = __spreadValues(__spreadValues({}, DEFAULTS), options);
+  const items = Array.isArray(opts.items) ? opts.items : [];
+  const n = items.length;
+  const renderContent = typeof opts.contentRenderer === "function" ? opts.contentRenderer : defaultContentRenderer;
+  const reduced = opts.reducedMotion === "force" || opts.reducedMotion !== "off" && typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  let mode = MODE_WIDTHS[opts.mode] ? opts.mode : "stack";
+  let active = Math.min(Math.max(opts.defaultActiveIndex | 0, 0), Math.max(n - 1, 0));
+  let scrollCooldown = false;
+  let scrollAccum = 0;
+  const cleanups = [];
+  const on = (el, ev, fn, o) => {
+    el.addEventListener(ev, fn, o);
+    cleanups.push(() => el.removeEventListener(ev, fn, o));
+  };
+  const emit = (name, detail) => root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+  root.classList.add("fg-root");
+  root.setAttribute("data-fg-mode", mode);
+  root.setAttribute("data-fg-peek", PEEK_MODES.has(opts.peek) ? opts.peek : "hover");
+  const scene = document.createElement("div");
+  scene.className = "fg-scene";
+  scene.setAttribute("role", "listbox");
+  scene.setAttribute("aria-label", opts.label);
+  scene.setAttribute("aria-roledescription", "folder gallery");
+  const dotsEl = document.createElement("div");
+  dotsEl.className = "fg-dots";
+  dotsEl.setAttribute("role", "tablist");
+  const live = document.createElement("div");
+  live.className = "fg-sr-only";
+  live.setAttribute("aria-live", "polite");
+  live.setAttribute("aria-atomic", "true");
+  root.append(scene, dotsEl, live);
+  function teardown() {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+    root.replaceChildren();
+    root.classList.remove("fg-root");
+    root.removeAttribute("data-fg-mode");
+    root.removeAttribute("data-fg-peek");
+  }
+  if (n === 0) {
+    return { next() {
+    }, prev() {
+    }, goTo() {
+    }, setMode() {
+    }, setPeek() {
+    }, getActiveIndex: () => -1, getMode: () => mode, destroy: teardown };
+  }
+  function setCardTransform(card, { x, y, z, rx, ry, s, zIndex, opacity, isActive }) {
+    card.style.transform = `translate3d(${x}px,${y}px,${z}px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`;
+    card.style.transformOrigin = "center bottom";
+    card.style.zIndex = String(zIndex);
+    card.style.opacity = String(opacity);
+    card.setAttribute("aria-selected", isActive ? "true" : "false");
+    card.classList.toggle("is-active", isActive);
+  }
+  const cardEls = items.map((item, i) => {
+    const card = document.createElement("div");
+    card.className = "fg-card";
+    card.tabIndex = i === active ? 0 : -1;
+    card.setAttribute("role", "option");
+    card.setAttribute("aria-label", item.label || `Item ${i + 1}`);
+    if (item.color) {
+      const c = folderColors(item.color);
+      card.style.setProperty("--fg-folder-bg", item.color);
+      card.style.setProperty("--fg-front", c.front);
+      card.style.setProperty("--fg-front-solid", c.frontSolid);
+      card.style.setProperty("--fg-label-on-color", c.label);
+    }
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("class", "fg-folder");
+    svg.setAttribute("viewBox", "0 0 480 342");
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.setAttribute("aria-hidden", "true");
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute("d", opts.folderPath);
+    path.setAttribute("fill", item.color ? folderColors(item.color).back : "var(--fg-folder-bg)");
+    svg.appendChild(path);
+    card.appendChild(svg);
+    renderContent(card, item, i);
+    const front = document.createElement("div");
+    front.className = "fg-front";
+    if (item.decal) {
+      card.classList.add("fg-card--decal");
+      const photo = document.createElement("img");
+      photo.className = "fg-decal";
+      photo.src = item.decal;
+      photo.alt = "";
+      photo.loading = "lazy";
+      photo.decoding = "async";
+      front.appendChild(photo);
+    }
+    if (item.label) {
+      const label = document.createElement("div");
+      label.className = "fg-label";
+      label.textContent = item.label;
+      front.appendChild(label);
+    }
+    card.appendChild(front);
+    scene.appendChild(card);
+    return card;
+  });
+  const dots = cardEls.map((_, i) => {
+    const dot = document.createElement("button");
+    dot.type = "button";
+    dot.className = "fg-dot";
+    dot.setAttribute("role", "tab");
+    dot.setAttribute("aria-label", items[i].label || `Go to ${i + 1}`);
+    on(dot, "click", () => goTo(i));
+    dotsEl.appendChild(dot);
+    return dot;
+  });
+  function layoutStack() {
+    scene.style.height = "";
+    cardEls.forEach((card, i) => {
+      const behind = (i - active + n) % n;
+      if (behind === 0) {
+        setCardTransform(card, { x: 0, y: 100, z: 20, rx: 0, ry: 0, s: 1, zIndex: n + 1, opacity: 1, isActive: true });
+        return;
+      }
+      const safeN = Math.max(n - 1, 1);
+      const tz = -behind * 25 - behind * behind * 3;
+      const rx = reduced ? 0 : -behind * 3;
+      const ty = 100 - behind * 28 - behind * behind * 2;
+      const sc = 1 - behind * 0.06 - behind / safeN * (behind / safeN) * 0.04;
+      setCardTransform(card, { x: 0, y: ty, z: tz, rx, ry: 0, s: Math.max(sc, 0.5), zIndex: n - behind, opacity: 1 - behind * 0.08, isActive: false });
+    });
+  }
+  function layoutGrid() {
+    const sceneW = scene.clientWidth || MODE_WIDTHS.grid;
+    const cols = sceneW < 520 ? 2 : n <= 4 ? 2 : 3;
+    const gap = 16;
+    const cardW = sceneW;
+    const cardH = sceneW * (2 / 3);
+    const sc = (sceneW - (cols - 1) * gap) / (cols * cardW);
+    const scaledW = cardW * sc;
+    const scaledH = cardH * sc;
+    const tabScaled = 22 * sc;
+    const rows = Math.ceil(n / cols);
+    cardEls.forEach((card, i) => {
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      const itemsInRow = Math.min(cols, n - row * cols);
+      const rowW = itemsInRow * scaledW + (itemsInRow - 1) * gap;
+      const rowStartX = (sceneW - rowW) / 2;
+      const cellLeft = rowStartX + col * (scaledW + gap);
+      const cellTop = row * (scaledH + tabScaled + gap) + tabScaled;
+      const tx = cellLeft + scaledW / 2 - cardW / 2;
+      const ty = cellTop + scaledH - cardH;
+      setCardTransform(card, { x: tx, y: ty, z: 0, rx: 0, ry: 0, s: sc, zIndex: i === active ? 2 : 1, opacity: 1, isActive: i === active });
+    });
+    scene.style.height = rows * (scaledH + tabScaled + gap) + 20 + "px";
+  }
+  function layoutCarousel() {
+    const sceneW = scene.clientWidth || MODE_WIDTHS.carousel;
+    const cardW = sceneW;
+    const cardH = cardW * (2 / 3);
+    const activeSc = 0.62;
+    const activeW = cardW * activeSc;
+    const sceneH = Math.max(cardH * activeSc + 40, 180);
+    scene.style.height = sceneH + "px";
+    const offsetStep = Math.min(130, (sceneW - activeW) / 4);
+    cardEls.forEach((card, i) => {
+      let offset = i - active;
+      if (n > 2 && offset > Math.floor(n / 2)) offset -= n;
+      if (n > 2 && offset < -Math.floor(n / 2)) offset += n;
+      const sc = Math.max(activeSc - Math.abs(offset) * 0.06, 0.28);
+      const z = -Math.abs(offset) * 50;
+      const op = Math.max(1 - Math.abs(offset) * 0.25, 0.15);
+      const tx = sceneW / 2 + offset * offsetStep - cardW / 2;
+      const ty = sceneH - 20 - cardH;
+      setCardTransform(card, { x: tx, y: ty, z, rx: 0, ry: 0, s: sc, zIndex: n - Math.abs(offset), opacity: op, isActive: offset === 0 });
+    });
+  }
+  function sizeScene() {
+    scene.style.width = `min(${MODE_WIDTHS[mode]}px, 92vw)`;
+  }
+  function applyLayout() {
+    sizeScene();
+    (mode === "grid" ? layoutGrid : mode === "carousel" ? layoutCarousel : layoutStack)();
+    dots.forEach((d, i) => {
+      d.classList.toggle("is-active", i === active);
+      d.setAttribute("aria-selected", i === active ? "true" : "false");
+    });
+    cardEls.forEach((c, i) => {
+      c.tabIndex = i === active ? 0 : -1;
+    });
+    const cur = items[active];
+    live.textContent = cur && cur.label ? `${active + 1} of ${n}: ${cur.label}` : `${active + 1} of ${n}`;
+  }
+  function goTo(i) {
+    const next = opts.loop ? (i % n + n) % n : Math.min(Math.max(i, 0), n - 1);
+    if (next === active) return;
+    active = next;
+    applyLayout();
+    emit("fg-activechange", { index: active, item: items[active] });
+  }
+  function select(i) {
+    emit("fg-select", { index: i, item: items[i] });
+    if (typeof opts.onSelect === "function") opts.onSelect(items[i], i);
+  }
+  function setMode(m) {
+    if (m === mode || !MODE_WIDTHS[m]) return;
+    mode = m;
+    root.setAttribute("data-fg-mode", mode);
+    applyLayout();
+    emit("fg-modechange", { mode });
+  }
+  function setPeek(p) {
+    if (!PEEK_MODES.has(p)) return;
+    root.setAttribute("data-fg-peek", p);
+  }
+  cardEls.forEach((card, i) => {
+    on(card, "click", () => {
+      i === active ? select(i) : goTo(i);
+    });
+    on(card, "keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        select(i);
+      }
+    });
+  });
+  function handleArrowKeys(e) {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      goTo(active + 1);
+      return true;
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      goTo(active - 1);
+      return true;
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      goTo(0);
+      return true;
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      goTo(n - 1);
+      return true;
+    }
+    return false;
+  }
+  on(scene, "keydown", (e) => {
+    if (handleArrowKeys(e)) cardEls[active].focus();
+  });
+  on(dotsEl, "keydown", (e) => {
+    if (handleArrowKeys(e)) cardEls[active].focus();
+  });
+  let hovered = false;
+  on(root, "mouseenter", () => {
+    hovered = true;
+  });
+  on(root, "mouseleave", () => {
+    hovered = false;
+  });
+  on(document, "keydown", (e) => {
+    if (!hovered) return;
+    const ae = document.activeElement;
+    if (ae && ae !== document.body && !root.contains(ae)) return;
+    handleArrowKeys(e);
+  });
+  if (opts.scrollNav) {
+    on(root, "wheel", (e) => {
+      if (mode === "grid") return;
+      const atStart = !opts.loop && active === 0 && e.deltaY < 0;
+      const atEnd = !opts.loop && active === n - 1 && e.deltaY > 0;
+      if (atStart || atEnd) return;
+      e.preventDefault();
+      if (scrollCooldown) return;
+      scrollAccum += e.deltaY;
+      if (Math.abs(scrollAccum) >= SCROLL_THRESHOLD) {
+        const dir = scrollAccum > 0 ? 1 : -1;
+        scrollAccum = 0;
+        scrollCooldown = true;
+        goTo(active + dir);
+        setTimeout(() => {
+          scrollCooldown = false;
+          scrollAccum = 0;
+        }, SCROLL_COOLDOWN[mode] || 300);
+      }
+    }, { passive: false });
+  }
+  let touchStartX = 0;
+  let touchStartY = 0;
+  on(scene, "touchstart", (e) => {
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+  }, { passive: true });
+  on(scene, "touchend", (e) => {
+    const dx = touchStartX - e.changedTouches[0].clientX;
+    const dy = touchStartY - e.changedTouches[0].clientY;
+    const ax = Math.abs(dx);
+    const ay = Math.abs(dy);
+    if (Math.max(ax, ay) < 40) return;
+    const dir = ax > ay ? dx > 0 ? 1 : -1 : dy > 0 ? 1 : -1;
+    goTo(active + dir);
+  }, { passive: true });
+  let resizeTimer;
+  on(window, "resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(applyLayout, 150);
+  });
+  applyLayout();
+  return {
+    next: () => goTo(active + 1),
+    prev: () => goTo(active - 1),
+    goTo,
+    setMode,
+    setPeek,
+    getActiveIndex: () => active,
+    getMode: () => mode,
+    destroy: teardown
+  };
+}
+var folder_gallery_default = createFolderGallery;
+
+export {
+  __spreadValues,
+  __objRest,
+  createFolderGallery,
+  folder_gallery_default
+};
+//# sourceMappingURL=chunk-DT6YOBGV.js.map

package/dist/chunk-DT6YOBGV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/folder-gallery.js"],"sourcesContent":["/* ============================================================================\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAM,SAAS;AAGf,IAAM,sBACJ;AAIF,IAAM,WAAW;AAAA,EACf,MAAM;AAAA;AAAA,EACN,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,WAAW;AAAA,EACX,eAAe;AAAA;AAAA,EACf,MAAM;AAAA;AAAA,EACN,oBAAoB;AAAA,EACpB,OAAO;AACT;AAEA,IAAM,aAAa,oBAAI,IAAI,CAAC,SAAS,UAAU,KAAK,CAAC;AAErD,IAAM,cAAc,EAAE,OAAO,KAAK,MAAM,KAAK,UAAU,IAAI;AAC3D,IAAM,mBAAmB;AACzB,IAAM,kBAAkB,EAAE,OAAO,KAAK,UAAU,IAAI;AAEpD,SAAS,SAAS,KAAK;AACrB,QAAM,IAAI,OAAO,GAAG,EAAE,QAAQ,KAAK,EAAE;AACrC,SAAO,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,SAAS,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,SAAS,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC;AAC/F;AAOA,SAAS,aAAa,KAAK;AACzB,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI,SAAS,GAAG;AAC9B,QAAM,KAAK,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC;AACpC,QAAM,KAAK,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,GAAG,GAAG;AACxC,QAAM,KAAK,GAAG,GAAG,EAAE;AACnB,QAAM,KAAK,GAAG,GAAG,EAAE;AACnB,QAAM,KAAK,GAAG,GAAG,EAAE;AACnB,QAAM,OAAO,KAAK,MAAM,KAAK,MAAM,KAAK,OAAO;AAC/C,SAAO;AAAA,IACL,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAAA,IACpC,OAAO,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC;AAAA,IAClD,YAAY,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;AAAA,IACjC,OAAO,OAAO,MAAM,YAAY;AAAA,EAClC;AACF;AAKA,SAAS,uBAAuB,MAAM,MAAoB;AACxD,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,OAAK,YAAY;AAGjB,MAAI,KAAK,WAAW,OAAO,KAAK,YAAY,YAAY,OAAO,KAAK,QAAQ,aAAa,UAAU;AACjG,SAAK,YAAY,KAAK,OAAO;AAAA,EAC/B,WAAW,OAAO,KAAK,YAAY,UAAU;AAC3C,SAAK,YAAY,KAAK;AAAA,EACxB,WAAW,KAAK,KAAK;AACnB,UAAM,MAAM,SAAS,cAAc,KAAK;AACxC,QAAI,YAAY;AAChB,QAAI,MAAM,KAAK;AACf,QAAI,MAAM,KAAK,SAAS;AACxB,QAAI,UAAU;AACd,QAAI,WAAW;AACf,SAAK,YAAY,GAAG;AAAA,EACtB;AACA,OAAK,YAAY,IAAI;AACvB;AAEO,SAAS,oBAAoB,MAAM,UAAU,CAAC,GAAG;AACtD,MAAI,CAAC,QAAQ,CAAC,KAAK,SAAU,OAAM,IAAI,MAAM,iDAAiD;AAE9F,QAAM,OAAO,kCAAK,WAAa;AAC/B,QAAM,QAAQ,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC;AACxD,QAAM,IAAI,MAAM;AAChB,QAAM,gBACJ,OAAO,KAAK,oBAAoB,aAAa,KAAK,kBAAkB;AAEtE,QAAM,UACJ,KAAK,kBAAkB,WACtB,KAAK,kBAAkB,SACtB,OAAO,eAAe,cACtB,WAAW,kCAAkC,EAAE;AAEnD,MAAI,OAAO,YAAY,KAAK,IAAI,IAAI,KAAK,OAAO;AAChD,MAAI,SAAS,KAAK,IAAI,KAAK,IAAI,KAAK,qBAAqB,GAAG,CAAC,GAAG,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC;AAClF,MAAI,iBAAiB;AACrB,MAAI,cAAc;AAGlB,QAAM,WAAW,CAAC;AAClB,QAAM,KAAK,CAAC,IAAI,IAAI,IAAI,MAAM;AAAE,OAAG,iBAAiB,IAAI,IAAI,CAAC;AAAG,aAAS,KAAK,MAAM,GAAG,oBAAoB,IAAI,IAAI,CAAC,CAAC;AAAA,EAAG;AACxH,QAAM,OAAO,CAAC,MAAM,WAAW,KAAK,cAAc,IAAI,YAAY,MAAM,EAAE,QAAQ,SAAS,KAAK,CAAC,CAAC;AAGlG,OAAK,UAAU,IAAI,SAAS;AAC5B,OAAK,aAAa,gBAAgB,IAAI;AACtC,OAAK,aAAa,gBAAgB,WAAW,IAAI,KAAK,IAAI,IAAI,KAAK,OAAO,OAAO;AACjF,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,YAAY;AAClB,QAAM,aAAa,QAAQ,SAAS;AACpC,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,QAAM,aAAa,wBAAwB,gBAAgB;AAC3D,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,SAAO,YAAY;AACnB,SAAO,aAAa,QAAQ,SAAS;AACrC,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,OAAK,YAAY;AACjB,OAAK,aAAa,aAAa,QAAQ;AACvC,OAAK,aAAa,eAAe,MAAM;AACvC,OAAK,OAAO,OAAO,QAAQ,IAAI;AAE/B,WAAS,WAAW;AAClB,aAAS,QAAQ,CAAC,OAAO,GAAG,CAAC;AAC7B,aAAS,SAAS;AAClB,SAAK,gBAAgB;AACrB,SAAK,UAAU,OAAO,SAAS;AAC/B,SAAK,gBAAgB,cAAc;AACnC,SAAK,gBAAgB,cAAc;AAAA,EACrC;AAEA,MAAI,MAAM,GAAG;AACX,WAAO,EAAE,OAAO;AAAA,IAAC,GAAG,OAAO;AAAA,IAAC,GAAG,OAAO;AAAA,IAAC,GAAG,UAAU;AAAA,IAAC,GAAG,UAAU;AAAA,IAAC,GAAG,gBAAgB,MAAM,IAAI,SAAS,MAAM,MAAM,SAAS,SAAS;AAAA,EACzI;AAGA,WAAS,iBAAiB,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,IAAI,GAAG,QAAQ,SAAS,SAAS,GAAG;AACjF,SAAK,MAAM,YAAY,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,gBAAgB,EAAE,cAAc,CAAC;AACvG,SAAK,MAAM,kBAAkB;AAC7B,SAAK,MAAM,SAAS,OAAO,MAAM;AACjC,SAAK,MAAM,UAAU,OAAO,OAAO;AACnC,SAAK,aAAa,iBAAiB,WAAW,SAAS,OAAO;AAC9D,SAAK,UAAU,OAAO,aAAa,QAAQ;AAAA,EAC7C;AAGA,QAAM,UAAU,MAAM,IAAI,CAAC,MAAM,MAAM;AACrC,UAAM,OAAO,SAAS,cAAc,KAAK;AACzC,SAAK,YAAY;AACjB,SAAK,WAAW,MAAM,SAAS,IAAI;AACnC,SAAK,aAAa,QAAQ,QAAQ;AAClC,SAAK,aAAa,cAAc,KAAK,SAAS,QAAQ,IAAI,CAAC,EAAE;AAC7D,QAAI,KAAK,OAAO;AACd,YAAM,IAAI,aAAa,KAAK,KAAK;AACjC,WAAK,MAAM,YAAY,kBAAkB,KAAK,KAAK;AACnD,WAAK,MAAM,YAAY,cAAc,EAAE,KAAK;AAC5C,WAAK,MAAM,YAAY,oBAAoB,EAAE,UAAU;AACvD,WAAK,MAAM,YAAY,uBAAuB,EAAE,KAAK;AAAA,IACvD;AAEA,UAAM,MAAM,SAAS,gBAAgB,QAAQ,KAAK;AAClD,QAAI,aAAa,SAAS,WAAW;AACrC,QAAI,aAAa,WAAW,aAAa;AACzC,QAAI,aAAa,uBAAuB,MAAM;AAC9C,QAAI,aAAa,eAAe,MAAM;AACtC,UAAM,OAAO,SAAS,gBAAgB,QAAQ,MAAM;AACpD,SAAK,aAAa,KAAK,KAAK,UAAU;AACtC,SAAK,aAAa,QAAQ,KAAK,QAAQ,aAAa,KAAK,KAAK,EAAE,OAAO,qBAAqB;AAC5F,QAAI,YAAY,IAAI;AAEpB,SAAK,YAAY,GAAG;AAEpB,kBAAc,MAAM,MAAM,CAAC;AAE3B,UAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,UAAM,YAAY;AAIlB,QAAI,KAAK,OAAO;AACd,WAAK,UAAU,IAAI,gBAAgB;AACnC,YAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,YAAM,YAAY;AAClB,YAAM,MAAM,KAAK;AACjB,YAAM,MAAM;AACZ,YAAM,UAAU;AAChB,YAAM,WAAW;AACjB,YAAM,YAAY,KAAK;AAAA,IACzB;AACA,QAAI,KAAK,OAAO;AACd,YAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,YAAM,YAAY;AAClB,YAAM,cAAc,KAAK;AACzB,YAAM,YAAY,KAAK;AAAA,IACzB;AACA,SAAK,YAAY,KAAK;AAEtB,UAAM,YAAY,IAAI;AACtB,WAAO;AAAA,EACT,CAAC;AAGD,QAAM,OAAO,QAAQ,IAAI,CAAC,GAAG,MAAM;AACjC,UAAM,MAAM,SAAS,cAAc,QAAQ;AAC3C,QAAI,OAAO;AACX,QAAI,YAAY;AAChB,QAAI,aAAa,QAAQ,KAAK;AAC9B,QAAI,aAAa,cAAc,MAAM,CAAC,EAAE,SAAS,SAAS,IAAI,CAAC,EAAE;AACjE,OAAG,KAAK,SAAS,MAAM,KAAK,CAAC,CAAC;AAC9B,WAAO,YAAY,GAAG;AACtB,WAAO;AAAA,EACT,CAAC;AAGD,WAAS,cAAc;AACrB,UAAM,MAAM,SAAS;AACrB,YAAQ,QAAQ,CAAC,MAAM,MAAM;AAC3B,YAAM,UAAU,IAAI,SAAS,KAAK;AAClC,UAAI,WAAW,GAAG;AAChB,yBAAiB,MAAM,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,IAAI,GAAG,SAAS,GAAG,UAAU,KAAK,CAAC;AAC7G;AAAA,MACF;AACA,YAAM,QAAQ,KAAK,IAAI,IAAI,GAAG,CAAC;AAC/B,YAAM,KAAK,CAAC,SAAS,KAAK,SAAS,SAAS;AAC5C,YAAM,KAAK,UAAU,IAAI,CAAC,SAAS;AACnC,YAAM,KAAK,MAAM,SAAS,KAAK,SAAS,SAAS;AACjD,YAAM,KAAK,IAAI,SAAS,OAAQ,SAAS,SAAU,SAAS,SAAS;AACrE,uBAAiB,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,GAAG,KAAK,IAAI,IAAI,GAAG,GAAG,QAAQ,IAAI,QAAQ,SAAS,IAAI,SAAS,MAAM,UAAU,MAAM,CAAC;AAAA,IACjJ,CAAC;AAAA,EACH;AACA,WAAS,aAAa;AACpB,UAAM,SAAS,MAAM,eAAe,YAAY;AAEhD,UAAM,OAAO,SAAS,MAAM,IAAI,KAAK,IAAI,IAAI;AAC7C,UAAM,MAAM;AACZ,UAAM,QAAQ;AACd,UAAM,QAAQ,UAAU,IAAI;AAC5B,UAAM,MAAM,UAAU,OAAO,KAAK,QAAQ,OAAO;AACjD,UAAM,UAAU,QAAQ;AACxB,UAAM,UAAU,QAAQ;AACxB,UAAM,YAAY,KAAK;AACvB,UAAM,OAAO,KAAK,KAAK,IAAI,IAAI;AAC/B,YAAQ,QAAQ,CAAC,MAAM,MAAM;AAC3B,YAAM,MAAM,IAAI;AAChB,YAAM,MAAM,KAAK,MAAM,IAAI,IAAI;AAC/B,YAAM,aAAa,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI;AAChD,YAAM,OAAO,aAAa,WAAW,aAAa,KAAK;AACvD,YAAM,aAAa,SAAS,QAAQ;AACpC,YAAM,WAAW,YAAY,OAAO,UAAU;AAC9C,YAAM,UAAU,OAAO,UAAU,YAAY,OAAO;AACpD,YAAM,KAAK,WAAW,UAAU,IAAI,QAAQ;AAC5C,YAAM,KAAK,UAAU,UAAU;AAC/B,uBAAiB,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,IAAI,QAAQ,MAAM,SAAS,IAAI,GAAG,SAAS,GAAG,UAAU,MAAM,OAAO,CAAC;AAAA,IACtI,CAAC;AACD,UAAM,MAAM,SAAS,QAAQ,UAAU,YAAY,OAAO,KAAK;AAAA,EACjE;AACA,WAAS,iBAAiB;AACxB,UAAM,SAAS,MAAM,eAAe,YAAY;AAChD,UAAM,QAAQ;AACd,UAAM,QAAQ,SAAS,IAAI;AAC3B,UAAM,WAAW;AACjB,UAAM,UAAU,QAAQ;AACxB,UAAM,SAAS,KAAK,IAAI,QAAQ,WAAW,IAAI,GAAG;AAClD,UAAM,MAAM,SAAS,SAAS;AAC9B,UAAM,aAAa,KAAK,IAAI,MAAM,SAAS,WAAW,CAAC;AACvD,YAAQ,QAAQ,CAAC,MAAM,MAAM;AAC3B,UAAI,SAAS,IAAI;AACjB,UAAI,IAAI,KAAK,SAAS,KAAK,MAAM,IAAI,CAAC,EAAG,WAAU;AACnD,UAAI,IAAI,KAAK,SAAS,CAAC,KAAK,MAAM,IAAI,CAAC,EAAG,WAAU;AACpD,YAAM,KAAK,KAAK,IAAI,WAAW,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI;AAC5D,YAAM,IAAI,CAAC,KAAK,IAAI,MAAM,IAAI;AAC9B,YAAM,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI;AACrD,YAAM,KAAK,SAAS,IAAI,SAAS,aAAa,QAAQ;AACtD,YAAM,KAAK,SAAS,KAAK;AACzB,uBAAiB,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,IAAI,QAAQ,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,IAAI,UAAU,WAAW,EAAE,CAAC;AAAA,IACpI,CAAC;AAAA,EACH;AAIA,WAAS,YAAY;AACnB,UAAM,MAAM,QAAQ,OAAO,YAAY,IAAI,CAAC;AAAA,EAC9C;AACA,WAAS,cAAc;AACrB,cAAU;AACV,KAAC,SAAS,SAAS,aAAa,SAAS,aAAa,iBAAiB,aAAa;AACpF,SAAK,QAAQ,CAAC,GAAG,MAAM;AACrB,QAAE,UAAU,OAAO,aAAa,MAAM,MAAM;AAC5C,QAAE,aAAa,iBAAiB,MAAM,SAAS,SAAS,OAAO;AAAA,IACjE,CAAC;AACD,YAAQ,QAAQ,CAAC,GAAG,MAAM;AAAE,QAAE,WAAW,MAAM,SAAS,IAAI;AAAA,IAAI,CAAC;AACjE,UAAM,MAAM,MAAM,MAAM;AACxB,SAAK,cAAc,OAAO,IAAI,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC;AAAA,EACrG;AAGA,WAAS,KAAK,GAAG;AACf,UAAM,OAAO,KAAK,QAAS,IAAI,IAAK,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AAC3E,QAAI,SAAS,OAAQ;AACrB,aAAS;AACT,gBAAY;AACZ,SAAK,mBAAmB,EAAE,OAAO,QAAQ,MAAM,MAAM,MAAM,EAAE,CAAC;AAAA,EAChE;AACA,WAAS,OAAO,GAAG;AACjB,SAAK,aAAa,EAAE,OAAO,GAAG,MAAM,MAAM,CAAC,EAAE,CAAC;AAC9C,QAAI,OAAO,KAAK,aAAa,WAAY,MAAK,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,EACpE;AACA,WAAS,QAAQ,GAAG;AAClB,QAAI,MAAM,QAAQ,CAAC,YAAY,CAAC,EAAG;AACnC,WAAO;AACP,SAAK,aAAa,gBAAgB,IAAI;AACtC,gBAAY;AACZ,SAAK,iBAAiB,EAAE,KAAK,CAAC;AAAA,EAChC;AACA,WAAS,QAAQ,GAAG;AAClB,QAAI,CAAC,WAAW,IAAI,CAAC,EAAG;AACxB,SAAK,aAAa,gBAAgB,CAAC;AAAA,EACrC;AAGA,UAAQ,QAAQ,CAAC,MAAM,MAAM;AAC3B,OAAG,MAAM,SAAS,MAAM;AAAE,YAAM,SAAS,OAAO,CAAC,IAAI,KAAK,CAAC;AAAA,IAAG,CAAC;AAC/D,OAAG,MAAM,WAAW,CAAC,MAAM;AACzB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,UAAE,eAAe;AAAG,eAAO,CAAC;AAAA,MAAG;AAAA,IAC3E,CAAC;AAAA,EACH,CAAC;AAUD,WAAS,gBAAgB,GAAG;AAC1B,QAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;AAAE,QAAE,eAAe;AAAG,WAAK,SAAS,CAAC;AAAG,aAAO;AAAA,IAAM;AAC1G,QAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAAE,QAAE,eAAe;AAAG,WAAK,SAAS,CAAC;AAAG,aAAO;AAAA,IAAM;AACvG,QAAI,EAAE,QAAQ,QAAQ;AAAE,QAAE,eAAe;AAAG,WAAK,CAAC;AAAG,aAAO;AAAA,IAAM;AAClE,QAAI,EAAE,QAAQ,OAAO;AAAE,QAAE,eAAe;AAAG,WAAK,IAAI,CAAC;AAAG,aAAO;AAAA,IAAM;AACrE,WAAO;AAAA,EACT;AACA,KAAG,OAAO,WAAW,CAAC,MAAM;AAAE,QAAI,gBAAgB,CAAC,EAAG,SAAQ,MAAM,EAAE,MAAM;AAAA,EAAG,CAAC;AAChF,KAAG,QAAQ,WAAW,CAAC,MAAM;AAAE,QAAI,gBAAgB,CAAC,EAAG,SAAQ,MAAM,EAAE,MAAM;AAAA,EAAG,CAAC;AAEjF,MAAI,UAAU;AACd,KAAG,MAAM,cAAc,MAAM;AAAE,cAAU;AAAA,EAAM,CAAC;AAChD,KAAG,MAAM,cAAc,MAAM;AAAE,cAAU;AAAA,EAAO,CAAC;AACjD,KAAG,UAAU,WAAW,CAAC,MAAM;AAC7B,QAAI,CAAC,QAAS;AAGd,UAAM,KAAK,SAAS;AACpB,QAAI,MAAM,OAAO,SAAS,QAAQ,CAAC,KAAK,SAAS,EAAE,EAAG;AACtD,oBAAgB,CAAC;AAAA,EACnB,CAAC;AAED,MAAI,KAAK,WAAW;AAKlB,OAAG,MAAM,SAAS,CAAC,MAAM;AACvB,UAAI,SAAS,OAAQ;AACrB,YAAM,UAAU,CAAC,KAAK,QAAQ,WAAW,KAAK,EAAE,SAAS;AACzD,YAAM,QAAQ,CAAC,KAAK,QAAQ,WAAW,IAAI,KAAK,EAAE,SAAS;AAC3D,UAAI,WAAW,MAAO;AACtB,QAAE,eAAe;AACjB,UAAI,eAAgB;AACpB,qBAAe,EAAE;AACjB,UAAI,KAAK,IAAI,WAAW,KAAK,kBAAkB;AAC7C,cAAM,MAAM,cAAc,IAAI,IAAI;AAClC,sBAAc;AACd,yBAAiB;AACjB,aAAK,SAAS,GAAG;AACjB,mBAAW,MAAM;AAAE,2BAAiB;AAAO,wBAAc;AAAA,QAAG,GAAG,gBAAgB,IAAI,KAAK,GAAG;AAAA,MAC7F;AAAA,IACF,GAAG,EAAE,SAAS,MAAM,CAAC;AAAA,EACvB;AAKA,MAAI,cAAc;AAClB,MAAI,cAAc;AAClB,KAAG,OAAO,cAAc,CAAC,MAAM;AAC7B,kBAAc,EAAE,QAAQ,CAAC,EAAE;AAC3B,kBAAc,EAAE,QAAQ,CAAC,EAAE;AAAA,EAC7B,GAAG,EAAE,SAAS,KAAK,CAAC;AACpB,KAAG,OAAO,YAAY,CAAC,MAAM;AAC3B,UAAM,KAAK,cAAc,EAAE,eAAe,CAAC,EAAE;AAC7C,UAAM,KAAK,cAAc,EAAE,eAAe,CAAC,EAAE;AAC7C,UAAM,KAAK,KAAK,IAAI,EAAE;AACtB,UAAM,KAAK,KAAK,IAAI,EAAE;AACtB,QAAI,KAAK,IAAI,IAAI,EAAE,IAAI,GAAI;AAC3B,UAAM,MAAM,KAAK,KAAM,KAAK,IAAI,IAAI,KAAO,KAAK,IAAI,IAAI;AACxD,SAAK,SAAS,GAAG;AAAA,EACnB,GAAG,EAAE,SAAS,KAAK,CAAC;AAEpB,MAAI;AACJ,KAAG,QAAQ,UAAU,MAAM;AAAE,iBAAa,WAAW;AAAG,kBAAc,WAAW,aAAa,GAAG;AAAA,EAAG,CAAC;AAErG,cAAY;AAGZ,SAAO;AAAA,IACL,MAAM,MAAM,KAAK,SAAS,CAAC;AAAA,IAC3B,MAAM,MAAM,KAAK,SAAS,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM;AAAA,IACtB,SAAS,MAAM;AAAA,IACf,SAAS;AAAA,EACX;AACF;AAEA,IAAO,yBAAQ;","names":[]}