@0m0g1/griot 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0m0g1/griot",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "A self-contained block-based rich text editor and renderer built for historical document authoring.",
   "type": "module",
   "main": "./src/Griot.js",

package/src/blocks/GalleryRenderer.js

@@ -4,11 +4,14 @@
 //
 // Usage:
 //   import { renderGallery } from './GalleryRenderer.js';
-//   const el = renderGallery(items, 'carousel');
+//   const el = renderGallery(items, 'carousel');               // loops by default
+//   const el = renderGallery(items, 'carousel', { loop: false }); // no loop
 //   container.appendChild(el);
 //
 // items shape: { src?, url?, alt?, alt_text?, caption? }[]
 // layouts: 'grid' | 'masonry' | 'carousel' | 'strip'
+// options:
+//   loop  boolean  (carousel only) whether prev/next wraps around. default: true
 // ─────────────────────────────────────────────────────────────────────────────
 
 import { lightbox } from './Lightbox.js';
@@ -21,12 +24,15 @@ const VALID_LAYOUTS = new Set(['grid', 'masonry', 'carousel', 'strip']);
  * Render a gallery element.
  * @param {object[]} items
  * @param {'grid'|'masonry'|'carousel'|'strip'} layout
+ * @param {{ loop?: boolean }} [options]
  * @returns {HTMLElement}
  */
-export function renderGallery(items = [], layout = 'grid') {
+export function renderGallery(items = [], layout = 'grid', options = {}) {
   _injectStyles();
 
   const l    = VALID_LAYOUTS.has(layout) ? layout : 'grid';
+  const opts = { loop: true, ...options };
+
   const wrap = document.createElement('div');
   wrap.className      = `griot-gallery griot-gallery--${l}`;
   wrap.dataset.layout = l;
@@ -40,7 +46,7 @@ export function renderGallery(items = [], layout = 'grid') {
   }
 
   switch (l) {
-    case 'carousel': return _carousel(items, wrap);
+    case 'carousel': return _carousel(items, wrap, opts);
     case 'masonry':  return _masonry(items, wrap);
     case 'strip':    return _strip(items, wrap);
     default:         return _grid(items, wrap);
@@ -113,16 +119,10 @@ function _itemEl(item, index, allItems) {
 
 // ── Carousel ──────────────────────────────────────────────────────────────────
 
-function _carousel(items, wrap) {
+function _carousel(items, wrap, opts) {
+  const loop = opts.loop !== false; // default true
   let idx = 0;
 
-  // ── DOM structure ────────────────────────────────────────────────────────
-  //  .griot-carousel__viewport  (clips)
-  //    .griot-carousel__track   (slides)
-  //      .griot-carousel__slide × N
-  //  .griot-carousel__controls  (prev · counter · next)
-  //  .griot-carousel__dots      (dot buttons, hidden if > 12 items)
-
   const viewport = document.createElement('div');
   viewport.className = 'griot-carousel__viewport';
 
@@ -140,8 +140,6 @@ function _carousel(items, wrap) {
     img.decoding = 'async';
     img.draggable = false;
 
-    // Click on carousel image → open lightbox at CURRENT idx (not i, since user
-    // may have navigated away from the first image)
     img.addEventListener('click', () => lightbox.open(items, idx));
 
     slide.appendChild(img);
@@ -185,8 +183,17 @@ function _carousel(items, wrap) {
 
   // ── Navigation logic ──────────────────────────────────────────────────────
 
+  function canGoPrev() { return loop || idx > 0; }
+  function canGoNext() { return loop || idx < items.length - 1; }
+
   function goTo(n, animate = true) {
-    idx = Math.max(0, Math.min(n, items.length - 1));
+    if (loop) {
+      // wrap around in both directions
+      idx = ((n % items.length) + items.length) % items.length;
+    } else {
+      // clamp to valid range
+      idx = Math.max(0, Math.min(n, items.length - 1));
+    }
 
     if (!animate) {
       track.style.transition = 'none';
@@ -196,10 +203,13 @@ function _carousel(items, wrap) {
     track.style.transform = `translateX(-${idx * 100}%)`;
     counter.textContent   = `${idx + 1} / ${items.length}`;
 
-    prevBtn.disabled = items.length <= 1;
-    nextBtn.disabled = items.length <= 1;
-    prevBtn.classList.toggle('is-edge', idx === 0);
-    nextBtn.classList.toggle('is-edge', idx === items.length - 1);
+    // In loop mode buttons are always enabled (single-item galleries still hide them)
+    prevBtn.disabled = items.length <= 1 || (!loop && idx === 0);
+    nextBtn.disabled = items.length <= 1 || (!loop && idx === items.length - 1);
+
+    // edge class only meaningful when not looping
+    prevBtn.classList.toggle('is-edge', !loop && idx === 0);
+    nextBtn.classList.toggle('is-edge', !loop && idx === items.length - 1);
 
     dotEls.forEach((d, i) => {
       d.classList.toggle('is-active', i === idx);
@@ -207,10 +217,10 @@ function _carousel(items, wrap) {
     });
   }
 
-  prevBtn.addEventListener('click', () => goTo(idx - 1));
-  nextBtn.addEventListener('click', () => goTo(idx + 1));
+  prevBtn.addEventListener('click', () => { if (canGoPrev()) goTo(idx - 1); });
+  nextBtn.addEventListener('click', () => { if (canGoNext()) goTo(idx + 1); });
 
-  // Touch / swipe on the viewport
+  // Touch / swipe
   let touchX = 0, touchY = 0, isScrolling = null;
 
   viewport.addEventListener('touchstart', e => {
@@ -230,14 +240,18 @@ function _carousel(items, wrap) {
   viewport.addEventListener('touchend', e => {
     if (isScrolling) return;
     const dx = e.changedTouches[0].clientX - touchX;
-    if (Math.abs(dx) > 40) goTo(dx < 0 ? idx + 1 : idx - 1);
+    if (Math.abs(dx) > 40) {
+      const dir = dx < 0 ? 1 : -1;
+      if (dir === -1 && canGoPrev()) goTo(idx - 1);
+      if (dir ===  1 && canGoNext()) goTo(idx + 1);
+    }
   }, { passive: true });
 
   // Keyboard when carousel has focus
   wrap.tabIndex = 0;
   wrap.addEventListener('keydown', e => {
-    if (e.key === 'ArrowLeft')  { e.preventDefault(); goTo(idx - 1); }
-    if (e.key === 'ArrowRight') { e.preventDefault(); goTo(idx + 1); }
+    if (e.key === 'ArrowLeft'  && canGoPrev()) { e.preventDefault(); goTo(idx - 1); }
+    if (e.key === 'ArrowRight' && canGoNext()) { e.preventDefault(); goTo(idx + 1); }
   });
 
   // Accessibility
@@ -250,7 +264,7 @@ function _carousel(items, wrap) {
 
   wrap.append(viewport, controls, dots);
 
-  goTo(0, false); // initial position, no animation
+  goTo(0, false);
   return wrap;
 }
 

package/src/blocks/Lightbox.js

@@ -7,6 +7,13 @@
 //
 // items shape: { src?, url?, alt?, alt_text?, caption? }[]
 // Keyboard: ← → Escape  |  Touch: swipe left/right  |  Click backdrop: close
+//
+// Fix: the singleton is stored on globalThis.__griot_lightbox so that even if
+// this module is evaluated more than once (e.g. two different import paths
+// resolving to separate webpack module cache entries — one via Griot.js facade,
+// one via direct ./Lightbox.js import), all callers share the exact same
+// instance. Without this, clicking outside one overlay closed it but left the
+// second overlay (from the other instance) stuck on screen.
 // ─────────────────────────────────────────────────────────────────────────────
 
 export class Lightbox {
@@ -41,7 +48,6 @@ export class Lightbox {
     this._el.classList.remove('griot-lb--open');
     document.body.style.overflow = '';
     this._isOpen = false;
-    // Wait for CSS fade-out before hiding from layout
     setTimeout(() => {
       if (!this._isOpen && this._el) this._el.hidden = true;
     }, 270);
@@ -57,20 +63,16 @@ export class Lightbox {
     el.setAttribute('aria-modal', 'true');
     el.setAttribute('aria-label', 'Image viewer');
 
-    // Backdrop click
     el.addEventListener('click', e => { if (e.target === el) this.close(); });
 
-    // Close button
     const close = _mkBtn('✕', 'griot-lb__close', 'Close');
     close.addEventListener('click', () => this.close());
 
-    // Prev / Next
     const prev = _mkBtn('‹', 'griot-lb__nav griot-lb__nav--prev', 'Previous image');
     const next = _mkBtn('›', 'griot-lb__nav griot-lb__nav--next', 'Next image');
     prev.addEventListener('click', e => { e.stopPropagation(); this._move(-1); });
     next.addEventListener('click', e => { e.stopPropagation(); this._move(1);  });
 
-    // Stage: image + caption
     const stage = document.createElement('div');
     stage.className = 'griot-lb__stage';
     stage.addEventListener('click', e => e.stopPropagation());
@@ -85,17 +87,14 @@ export class Lightbox {
 
     stage.append(img, cap);
 
-    // Counter
     const ctr = document.createElement('div');
     ctr.className = 'griot-lb__counter';
 
-    // Thumbnail strip (hidden until > 1 item)
     const strip = document.createElement('div');
     strip.className = 'griot-lb__strip';
 
     el.append(close, prev, next, stage, ctr, strip);
 
-    // Touch swipe
     el.addEventListener('touchstart', e => {
       this._touchStartX = e.touches[0].clientX;
     }, { passive: true });
@@ -114,7 +113,6 @@ export class Lightbox {
     this._next  = next;
     this._strip = strip;
 
-    // Inject styles once
     _injectStyles();
   }
 
@@ -126,7 +124,6 @@ export class Lightbox {
     document.body.style.overflow = 'hidden';
     document.addEventListener('keydown', this._onKey);
 
-    // Double rAF ensures the hidden→visible transition actually runs
     requestAnimationFrame(() =>
       requestAnimationFrame(() => this._el.classList.add('griot-lb--open'))
     );
@@ -153,7 +150,6 @@ export class Lightbox {
     const alt = item.alt ?? item.alt_text ?? '';
     const cap = item.caption ?? '';
 
-    // Fade-swap: fade out → preload → set src → fade in
     this._img.style.opacity = '0';
     this._img.alt = alt;
 
@@ -171,13 +167,12 @@ export class Lightbox {
     this._next.hidden = single;
     this._ctr.textContent = single ? '' : `${this._idx + 1} / ${this._items.length}`;
 
-    // Sync strip active thumb
     this._strip.querySelectorAll('.griot-lb__thumb').forEach((th, i) => {
       th.classList.toggle('is-active', i === this._idx);
     });
   }
 
-  // ── Thumbnail strip (built once per open() call) ────────────────────────────
+  // ── Thumbnail strip ─────────────────────────────────────────────────────────
 
   _buildStrip() {
     this._strip.innerHTML = '';
@@ -232,7 +227,6 @@ function _injectStyles() {
   const s = document.createElement('style');
   s.id = 'griot-lightbox-styles';
   s.textContent = `
-/* ── Lightbox overlay ───────────────────────────────────────────────────── */
 .griot-lb {
   position: fixed; inset: 0; z-index: 9000;
   background: rgba(0,0,0,0);
@@ -242,8 +236,6 @@ function _injectStyles() {
   overscroll-behavior: none;
 }
 .griot-lb--open { background: rgba(0,0,0,0.92); }
-
-/* Stage */
 .griot-lb__stage {
   position: relative; display: flex; flex-direction: column;
   align-items: center; max-width: 92vw; max-height: 80vh;
@@ -259,8 +251,6 @@ function _injectStyles() {
   margin: 10px 0 0; text-align: center;
   max-width: 70ch; line-height: 1.5;
 }
-
-/* Nav buttons */
 .griot-lb__nav {
   position: fixed; top: 50%; transform: translateY(-50%);
   background: rgba(255,255,255,0.10); border: none;
@@ -272,8 +262,6 @@ function _injectStyles() {
 .griot-lb__nav:hover { background: rgba(255,255,255,0.22); }
 .griot-lb__nav--prev { left: 0; border-radius: 0 8px 8px 0; }
 .griot-lb__nav--next { right: 0; border-radius: 8px 0 0 8px; }
-
-/* Close */
 .griot-lb__close {
   position: fixed; top: 14px; right: 18px;
   background: rgba(255,255,255,0.10); border: none;
@@ -283,15 +271,11 @@ function _injectStyles() {
   transition: background 0.15s; z-index: 2;
 }
 .griot-lb__close:hover { background: rgba(255,255,255,0.22); }
-
-/* Counter */
 .griot-lb__counter {
   position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
   font-size: 13px; color: #64748b; letter-spacing: 0.04em;
   pointer-events: none;
 }
-
-/* Thumbnail strip */
 .griot-lb__strip {
   position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
   display: flex; gap: 6px; max-width: 90vw;
@@ -307,7 +291,6 @@ function _injectStyles() {
 .griot-lb__thumb:hover { opacity: 0.85; }
 .griot-lb__thumb.is-active { border-color: #6366f1; opacity: 1; }
 .griot-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
-
 @media (max-width: 600px) {
   .griot-lb__nav { width: 40px; height: 64px; font-size: 24px; }
   .griot-lb__strip { display: none; }
@@ -316,5 +299,18 @@ function _injectStyles() {
   document.head.appendChild(s);
 }
 
+// ── Singleton ─────────────────────────────────────────────────────────────────
+// Store on globalThis so all module instances (regardless of import path or
+// webpack chunk) share the exact same object. This prevents two overlays being
+// appended to document.body when the module is evaluated more than once.
+
+const GLOBAL_KEY = '__griot_lightbox__';
+
+if (typeof globalThis !== 'undefined' && !globalThis[GLOBAL_KEY]) {
+  globalThis[GLOBAL_KEY] = new Lightbox();
+}
+
 /** Shared singleton — import and use directly everywhere. */
-export const lightbox = new Lightbox();
+export const lightbox = (typeof globalThis !== 'undefined' && globalThis[GLOBAL_KEY])
+  ? globalThis[GLOBAL_KEY]
+  : new Lightbox();