flipfolio 0.1.0

package/dist/element.js

@@ -0,0 +1,109 @@
+import {
+  createFolderGallery
+} from "./chunk-DT6YOBGV.js";
+
+// src/folder-gallery-element.js
+var asBool = (v) => v !== null && v !== "false";
+var ElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+var FolderGalleryElement = class extends ElementBase {
+  static get observedAttributes() {
+    return ["mode", "peek", "loop", "scroll-nav", "reduced-motion", "default-active-index", "label", "folder-path"];
+  }
+  constructor() {
+    super();
+    this._handle = null;
+    this._items = [];
+  }
+  /** Items are an array - set via property (attributes can't hold objects). */
+  get items() {
+    return this._items;
+  }
+  set items(value) {
+    this._items = Array.isArray(value) ? value : [];
+    if (this.isConnected) this._render();
+  }
+  connectedCallback() {
+    if (!this._items.length && this.getAttribute("items")) {
+      try {
+        this._items = JSON.parse(this.getAttribute("items"));
+      } catch (_) {
+      }
+    }
+    this._render();
+  }
+  disconnectedCallback() {
+    this._destroy();
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (!this._handle) return;
+    if (name === "mode") {
+      this._handle.setMode(newValue);
+      return;
+    }
+    if (name === "peek") {
+      this._handle.setPeek(newValue);
+      return;
+    }
+    this._render();
+  }
+  _options() {
+    const opts = { items: this._items };
+    if (this.hasAttribute("mode")) opts.mode = this.getAttribute("mode");
+    if (this.hasAttribute("peek")) opts.peek = this.getAttribute("peek");
+    if (this.hasAttribute("loop")) opts.loop = asBool(this.getAttribute("loop"));
+    if (this.hasAttribute("scroll-nav")) opts.scrollNav = asBool(this.getAttribute("scroll-nav"));
+    if (this.hasAttribute("reduced-motion")) opts.reducedMotion = this.getAttribute("reduced-motion");
+    if (this.hasAttribute("default-active-index")) opts.defaultActiveIndex = parseInt(this.getAttribute("default-active-index"), 10) || 0;
+    if (this.hasAttribute("label")) opts.label = this.getAttribute("label");
+    if (this.hasAttribute("folder-path")) opts.folderPath = this.getAttribute("folder-path");
+    if (typeof this.contentRenderer === "function") opts.contentRenderer = this.contentRenderer;
+    if (typeof this.onSelect === "function") opts.onSelect = this.onSelect;
+    return opts;
+  }
+  _render() {
+    this._destroy();
+    this._handle = createFolderGallery(this, this._options());
+  }
+  _destroy() {
+    if (this._handle) {
+      this._handle.destroy();
+      this._handle = null;
+    }
+  }
+  /* Imperative API - delegate to the core handle. */
+  next() {
+    this._handle && this._handle.next();
+  }
+  prev() {
+    this._handle && this._handle.prev();
+  }
+  goTo(i) {
+    this._handle && this._handle.goTo(i);
+  }
+  setMode(m) {
+    this.setAttribute("mode", m);
+  }
+  setPeek(p) {
+    this.setAttribute("peek", p);
+  }
+  getActiveIndex() {
+    return this._handle ? this._handle.getActiveIndex() : -1;
+  }
+  getMode() {
+    return this._handle ? this._handle.getMode() : this.getAttribute("mode") || "stack";
+  }
+};
+function defineFolderGallery(tag = "folder-gallery") {
+  if (typeof customElements !== "undefined" && !customElements.get(tag)) {
+    customElements.define(tag, FolderGalleryElement);
+  }
+  return FolderGalleryElement;
+}
+var folder_gallery_element_default = FolderGalleryElement;
+export {
+  FolderGalleryElement,
+  folder_gallery_element_default as default,
+  defineFolderGallery
+};
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/folder-gallery-element.js"],"sourcesContent":["/* ============================================================================\n * <folder-gallery> - Custom Element wrapper around the framework-agnostic core.\n *\n *   import { defineFolderGallery } from 'folder-gallery/element';\n *   defineFolderGallery();               // registers <folder-gallery>\n *\n *   <folder-gallery mode=\"grid\"></folder-gallery>\n *   el.items = [{ label, color, src }, ...];   // set items via property\n *   el.addEventListener('fg-select', e => ...); // events bubble from the core\n *\n * Uses the element itself as the light-DOM root, so the shared\n * folder-gallery.css styles it. (Shadow-DOM encapsulation is a later option.)\n * ========================================================================== */\n\nimport { createFolderGallery } from './folder-gallery.js';\n\nconst asBool = (v) => v !== null && v !== 'false';\n\n// SSR-safe base: on a server (Next/Nuxt) there is no HTMLElement, and merely\n// evaluating `class extends HTMLElement` at import time would throw. Fall back\n// to a stub there; the real element is only ever registered in the browser via\n// defineFolderGallery (guarded on customElements below).\nconst ElementBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};\n\nexport class FolderGalleryElement extends ElementBase {\n  static get observedAttributes() {\n    return ['mode', 'peek', 'loop', 'scroll-nav', 'reduced-motion', 'default-active-index', 'label', 'folder-path'];\n  }\n\n  constructor() {\n    super();\n    this._handle = null;\n    this._items = [];\n  }\n\n  /** Items are an array - set via property (attributes can't hold objects). */\n  get items() { return this._items; }\n  set items(value) {\n    this._items = Array.isArray(value) ? value : [];\n    if (this.isConnected) this._render();\n  }\n\n  connectedCallback() {\n    // Optional declarative items via a JSON `items` attribute.\n    if (!this._items.length && this.getAttribute('items')) {\n      try { this._items = JSON.parse(this.getAttribute('items')); } catch (_) { /* ignore malformed */ }\n    }\n    this._render();\n  }\n\n  disconnectedCallback() { this._destroy(); }\n\n  attributeChangedCallback(name, _oldValue, newValue) {\n    if (!this._handle) return;\n    if (name === 'mode') { this._handle.setMode(newValue); return; }\n    if (name === 'peek') { this._handle.setPeek(newValue); return; }\n    this._render(); // any other observed attribute → rebuild\n  }\n\n  _options() {\n    const opts = { items: this._items };\n    if (this.hasAttribute('mode')) opts.mode = this.getAttribute('mode');\n    if (this.hasAttribute('peek')) opts.peek = this.getAttribute('peek');\n    if (this.hasAttribute('loop')) opts.loop = asBool(this.getAttribute('loop'));\n    if (this.hasAttribute('scroll-nav')) opts.scrollNav = asBool(this.getAttribute('scroll-nav'));\n    if (this.hasAttribute('reduced-motion')) opts.reducedMotion = this.getAttribute('reduced-motion');\n    if (this.hasAttribute('default-active-index')) opts.defaultActiveIndex = parseInt(this.getAttribute('default-active-index'), 10) || 0;\n    if (this.hasAttribute('label')) opts.label = this.getAttribute('label');\n    if (this.hasAttribute('folder-path')) opts.folderPath = this.getAttribute('folder-path');\n    if (typeof this.contentRenderer === 'function') opts.contentRenderer = this.contentRenderer;\n    if (typeof this.onSelect === 'function') opts.onSelect = this.onSelect;\n    return opts;\n  }\n\n  _render() {\n    this._destroy();\n    this._handle = createFolderGallery(this, this._options());\n  }\n  _destroy() {\n    if (this._handle) { this._handle.destroy(); this._handle = null; }\n  }\n\n  /* Imperative API - delegate to the core handle. */\n  next() { this._handle && this._handle.next(); }\n  prev() { this._handle && this._handle.prev(); }\n  goTo(i) { this._handle && this._handle.goTo(i); }\n  setMode(m) { this.setAttribute('mode', m); }\n  setPeek(p) { this.setAttribute('peek', p); }\n  getActiveIndex() { return this._handle ? this._handle.getActiveIndex() : -1; }\n  getMode() { return this._handle ? this._handle.getMode() : (this.getAttribute('mode') || 'stack'); }\n}\n\nexport function defineFolderGallery(tag = 'folder-gallery') {\n  if (typeof customElements !== 'undefined' && !customElements.get(tag)) {\n    customElements.define(tag, FolderGalleryElement);\n  }\n  return FolderGalleryElement;\n}\n\nexport default FolderGalleryElement;\n"],"mappings":"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","names":[]}

package/dist/folder-gallery.css

@@ -0,0 +1,265 @@
+/* folder-gallery - default stylesheet (v0.1.0, WIP)
+ * Themeable via the custom properties on .fg-root. Light and dark are both
+ * first-class: `prefers-color-scheme` picks the default, and an explicit
+ * `data-fg-theme="light" | "dark"` on .fg-root always wins.
+ * Scoped to .fg-* classes; ships no global selectors. */
+
+.fg-root {
+  /* ── structural tokens ── */
+  --fg-radius: 18px;
+  --fg-perspective: 1200px;
+  --fg-ease: cubic-bezier(0.2, 0, 0, 1);
+  --fg-transition-transform: 700ms;
+  --fg-transition-fade: 300ms;
+  --fg-active-blur: 12px;
+
+  /* ── surface tokens (LIGHT is the base; dark overrides below) ──
+     --fg-front / --fg-front-solid are normally set PER CARD by the engine,
+     derived from each item's color. These are the no-color fallbacks. */
+  --fg-folder-bg: #e8c96a;
+  --fg-front: rgba(255, 255, 255, 0.55);
+  --fg-front-solid: rgb(240, 236, 224);
+  --fg-label: #1c1c1a;
+  --fg-dot: #8a8a86;
+  --fg-dot-active: #1c1c1a;
+  --fg-shadow: 0 12px 32px rgba(30, 30, 30, 0.16), 0 4px 12px rgba(30, 30, 30, 0.08);
+  --fg-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+  --fg-inset-highlight-active: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+  /* peek: how far contents slide out of the folder */
+  --fg-peek-shift: -46%;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  .fg-root {
+    --fg-folder-bg: #2a3a3a;
+    --fg-front: rgba(90, 90, 90, 0.55);
+    --fg-front-solid: rgb(115, 115, 115);
+    --fg-label: #ffffff;
+    --fg-dot: #9a9a9a;
+    --fg-dot-active: #f4f4f2;
+    --fg-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12);
+    --fg-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
+    --fg-inset-highlight-active: inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  }
+}
+/* Explicit theme attribute beats the media query in BOTH directions. */
+.fg-root[data-fg-theme='light'] {
+  --fg-folder-bg: #e8c96a;
+  --fg-front: rgba(255, 255, 255, 0.55);
+  --fg-front-solid: rgb(240, 236, 224);
+  --fg-label: #1c1c1a;
+  --fg-dot: #8a8a86;
+  --fg-dot-active: #1c1c1a;
+  --fg-shadow: 0 12px 32px rgba(30, 30, 30, 0.16), 0 4px 12px rgba(30, 30, 30, 0.08);
+  --fg-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+  --fg-inset-highlight-active: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+}
+.fg-root[data-fg-theme='dark'] {
+  --fg-folder-bg: #2a3a3a;
+  --fg-front: rgba(90, 90, 90, 0.55);
+  --fg-front-solid: rgb(115, 115, 115);
+  --fg-label: #ffffff;
+  --fg-dot: #9a9a9a;
+  --fg-dot-active: #f4f4f2;
+  --fg-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12);
+  --fg-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  --fg-inset-highlight-active: inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.fg-scene {
+  position: relative;
+  width: min(480px, 92vw); /* JS overrides per mode; this is the stack default */
+  height: 440px;
+  perspective: var(--fg-perspective);
+  transform-style: preserve-3d;
+}
+
+.fg-card {
+  position: absolute;
+  inset: 0 0 auto 0;
+  width: 100%;
+  /* 3/2 matches the engine's layout math (cardH = cardW * 2/3); the folder
+     SVG stretches to fit via preserveAspectRatio="none". */
+  aspect-ratio: 3 / 2;
+  transition:
+    transform var(--fg-transition-transform) var(--fg-ease),
+    opacity var(--fg-transition-fade) var(--fg-ease);
+  transform-origin: center bottom;
+  backface-visibility: hidden;
+  will-change: transform;
+  cursor: pointer;
+  contain: layout;
+  outline: none;
+}
+.fg-card.is-active { cursor: default; }
+.fg-card:focus-visible {
+  outline: 2px solid var(--fg-dot-active);
+  outline-offset: 4px;
+  border-radius: var(--fg-radius);
+}
+
+.fg-folder {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.22));
+}
+
+.fg-content {
+  position: absolute;
+  left: 5%;
+  right: 5%;
+  top: 12%;
+  bottom: 30%;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: calc(var(--fg-radius) - 6px);
+  transition:
+    transform var(--fg-transition-fade) var(--fg-ease),
+    opacity var(--fg-transition-fade) var(--fg-ease),
+    box-shadow var(--fg-transition-fade) var(--fg-ease);
+  z-index: 1;
+}
+.fg-image { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* ── peek: contents slide out of the folder ──
+   data-fg-peek on the root: 'hover' (default), 'always', or 'off'.
+   'off' keeps a subtle lift so hover still gives feedback. */
+/* Empty interiors are inert: no box to lift, no shadow to cast. */
+.fg-content:empty { display: none; }
+
+[data-fg-peek='off'] .fg-card.is-active:hover .fg-content { transform: translateY(-8px); }
+/* Peek moves the ACTIVE card's contents only. In 'hover' mode the pointer
+   anywhere over the scene peeks the active folder (grid peeks the hovered
+   card instead), and the slide-out is delayed a beat while the retract is
+   instant, so navigating reads as retract, cycle, peek. No shadow on the
+   content box itself: the box is transparent around whatever it holds, so a
+   box shadow reads as a floating empty sheet. Contents bring their own. */
+[data-fg-peek='hover']:not([data-fg-mode='grid']) .fg-scene:hover .fg-card.is-active .fg-content,
+[data-fg-peek='hover'][data-fg-mode='grid'] .fg-card:hover .fg-content,
+[data-fg-peek='always'] .fg-card.is-active .fg-content {
+  transform: translateY(var(--fg-peek-shift));
+  opacity: 1; /* decal cards hide their contents at rest; peek reveals them */
+  transition-delay: 180ms;
+}
+
+/* Front panel - the folder's face. Sits over the lower 3/4 like the original
+   (top 25%, hairline inset), radius 18. */
+.fg-front {
+  position: absolute;
+  top: 25%;
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+  border-radius: var(--fg-radius);
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  padding: 0.9rem 1.1rem;
+  z-index: 2;
+  transition:
+    background var(--fg-transition-fade) var(--fg-ease),
+    box-shadow var(--fg-transition-fade) var(--fg-ease);
+}
+
+/* Behind folders: SOLID opaque front panel - no frosted glass off the active
+   card (both a design rule and a perf rule: backdrop-filter never stacks). */
+.fg-card:not(.is-active) .fg-front {
+  background: var(--fg-front-solid);
+  box-shadow: var(--fg-inset-highlight);
+}
+.fg-card.is-active .fg-front {
+  background: var(--fg-front);
+  backdrop-filter: blur(var(--fg-active-blur));
+  -webkit-backdrop-filter: blur(var(--fg-active-blur));
+  box-shadow: var(--fg-shadow), var(--fg-inset-highlight-active);
+}
+
+/* ── decal: the folder is skinned with an image (item.decal) ──
+   The image is clipped to the silhouette inside the SVG; the front panel
+   becomes a label scrim so the photo shows through and the label stays
+   readable. Overrides both the solid and frosted front treatments. */
+/* ── decal: the photo prints on the folder's front panel ──
+   The back and tab keep their color, so the stack still reads as folders.
+   The print carries its own lighting: a lip hairline where the front edge
+   catches the light, a soft lamination sheen from the top left, and a label
+   scrim along the bottom. */
+.fg-card--decal .fg-front,
+.fg-card--decal:not(.is-active) .fg-front,
+.fg-card--decal.is-active .fg-front {
+  background: var(--fg-front-solid);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
+}
+.fg-card--decal.is-active .fg-front {
+  box-shadow: var(--fg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.30);
+}
+.fg-decal {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+.fg-card--decal .fg-front::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:
+    linear-gradient(115deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0) 52%),
+    linear-gradient(to top, rgba(12, 12, 14, 0.62), rgba(12, 12, 14, 0) 42%);
+}
+.fg-card--decal .fg-label { color: #ffffff; position: relative; z-index: 1; }
+
+.fg-label {
+  /* Falls back to the theme label color when the card has no item.color;
+     otherwise the engine sets --fg-label-on-color per card so the label
+     stays readable against that folder's own front-panel brightness. */
+  color: var(--fg-label-on-color, var(--fg-label));
+  font-weight: 600;
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+}
+
+.fg-dots { display: flex; gap: 0.5rem; }
+.fg-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  background: var(--fg-dot);
+  opacity: 0.5;
+  transition:
+    opacity var(--fg-transition-fade) var(--fg-ease),
+    transform var(--fg-transition-fade) var(--fg-ease),
+    background var(--fg-transition-fade) var(--fg-ease);
+}
+.fg-dot:hover { opacity: 0.85; }
+.fg-dot.is-active { background: var(--fg-dot-active); opacity: 1; transform: scale(1.35); }
+
+.fg-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fg-card, .fg-content, .fg-front, .fg-dot { transition-duration: 1ms; }
+}