@0m0g1/griot 0.1.3 → 0.1.5

package/src/editor/SlashMenu.js

@@ -0,0 +1,197 @@
+// ─── SlashMenu.js ─────────────────────────────────────────────────────────────
+// Slash-command palette. Triggered when '/' is typed at the very start of
+// an empty block editable. Shows a searchable list of block types grouped
+// by category.  Selecting an item calls onSelect(type).
+//
+// Usage (inside Editor):
+//   const menu = new SlashMenu(editorContainerEl, onSelect);
+//   menu.show(anchorEl);   // position near anchorEl
+//   menu.hide();
+//   menu.destroy();
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { getAllTypes, getBlockDef, getTypesByCategory } from '../blocks/BlockSchema.js';
+
+const CATEGORIES = [
+  { key: 'text',      label: 'Text'      },
+  { key: 'media',     label: 'Media'     },
+  { key: 'embed',     label: 'Embed'     },
+  { key: 'structure', label: 'Structure' },
+];
+
+export class SlashMenu {
+  constructor(container, onSelect) {
+    this._container = container;
+    this._onSelect  = onSelect;
+    this._el        = null;
+    this._query     = '';
+    this._idx       = 0;
+    this._items     = [];   // filtered list of type strings
+    this._visible   = false;
+
+    this._build();
+  }
+
+  // ── Public ────────────────────────────────────────────────────────────────
+
+  /** Show menu anchored below anchorEl. */
+  show(anchorEl) {
+    this._query = '';
+    this._refresh();
+    this._visible = true;
+    this._el.style.display = 'block';
+    this._reposition(anchorEl);
+    this._el.querySelector('.griot-slash__search')?.focus();
+  }
+
+  /** Filter list to items matching query string (the text after '/'). */
+  filter(query) {
+    this._query = query;
+    this._refresh();
+    if (!this._items.length) { this.hide(); return; }
+    this._reposition(this._anchorEl);
+  }
+
+  hide() {
+    this._visible = false;
+    if (this._el) this._el.style.display = 'none';
+  }
+
+  get visible() { return this._visible; }
+
+  /** Handle keydown while slash menu is open. Returns true if consumed. */
+  handleKey(e) {
+    if (!this._visible) return false;
+    if (e.key === 'ArrowDown')  { e.preventDefault(); this._move(1);  return true; }
+    if (e.key === 'ArrowUp')    { e.preventDefault(); this._move(-1); return true; }
+    if (e.key === 'Enter')      { e.preventDefault(); this._select(); return true; }
+    if (e.key === 'Escape')     { e.preventDefault(); this.hide();    return true; }
+    return false;
+  }
+
+  destroy() {
+    this._el?.remove();
+    this._el = null;
+  }
+
+  // ── Build ─────────────────────────────────────────────────────────────────
+
+  _build() {
+    const el = document.createElement('div');
+    el.className = 'griot-slash';
+    el.setAttribute('role', 'listbox');
+    el.setAttribute('aria-label', 'Block type');
+
+    const search = document.createElement('input');
+    search.type = 'text';
+    search.className = 'griot-slash__search';
+    search.placeholder = 'Search blocks…';
+    search.addEventListener('input', () => { this._query = search.value; this._refresh(); });
+    search.addEventListener('keydown', e => { this.handleKey(e); });
+
+    const list = document.createElement('div');
+    list.className = 'griot-slash__list';
+
+    el.append(search, list);
+    document.body.appendChild(el);
+    this._el    = el;
+    this._list  = list;
+    this._search = search;
+
+    // Hide on outside click
+    this._onDocClick = (e) => { if (this._visible && !el.contains(e.target)) this.hide(); };
+    document.addEventListener('mousedown', this._onDocClick);
+  }
+
+  _refresh() {
+    const q      = this._query.toLowerCase().trim();
+    this._list.innerHTML = '';
+    this._items  = [];
+    this._idx    = 0;
+
+    const all    = getAllTypes();
+    const filtered = q
+      ? all.filter(t => {
+          const d = getBlockDef(t);
+          return d.slashLabel?.toLowerCase().includes(q) || t.includes(q) || d.label.toLowerCase().includes(q);
+        })
+      : all;
+
+    // Group by category when not searching
+    const groups = q
+      ? [{ key: 'results', label: 'Results', types: filtered }]
+      : CATEGORIES.map(c => ({ ...c, types: filtered.filter(t => getBlockDef(t).category === c.key) })).filter(g => g.types.length);
+
+    for (const group of groups) {
+      const hdr = document.createElement('div');
+      hdr.className = 'griot-slash__group';
+      hdr.textContent = group.label;
+      this._list.appendChild(hdr);
+
+      for (const type of group.types) {
+        const def = getBlockDef(type);
+        const idx = this._items.length;
+        this._items.push(type);
+
+        const item = document.createElement('div');
+        item.className = 'griot-slash__item';
+        item.setAttribute('role', 'option');
+        item.dataset.idx = idx;
+        item.innerHTML = `<span class="griot-slash__item-icon">${def.icon}</span><span class="griot-slash__item-label">${def.slashLabel ?? def.label}</span>`;
+
+        item.addEventListener('mousedown', (e) => {
+          e.preventDefault();
+          this._idx = idx;
+          this._select();
+        });
+        item.addEventListener('mouseover', () => { this._idx = idx; this._highlight(); });
+
+        this._list.appendChild(item);
+      }
+    }
+
+    this._highlight();
+  }
+
+  _highlight() {
+    for (const el of this._list.querySelectorAll('.griot-slash__item')) {
+      el.classList.toggle('is-active', Number(el.dataset.idx) === this._idx);
+    }
+    // Scroll into view
+    const active = this._list.querySelector('.griot-slash__item.is-active');
+    active?.scrollIntoView({ block: 'nearest' });
+  }
+
+  _move(dir) {
+    this._idx = Math.max(0, Math.min(this._items.length - 1, this._idx + dir));
+    this._highlight();
+  }
+
+  _select() {
+    const type = this._items[this._idx];
+    if (type) { this.hide(); this._onSelect(type); }
+  }
+
+  _reposition(anchorEl) {
+    this._anchorEl = anchorEl;
+    if (!anchorEl || !this._el) return;
+
+    requestAnimationFrame(() => {
+      const rect  = anchorEl.getBoundingClientRect();
+      const menuH = this._el.offsetHeight || 280;
+      let top  = rect.bottom + window.scrollY + 4;
+      let left = rect.left   + window.scrollX;
+
+      // Flip above if too close to bottom
+      if (rect.bottom + menuH + 8 > window.innerHeight) {
+        top = rect.top + window.scrollY - menuH - 4;
+      }
+      // Clamp left
+      left = Math.min(left, window.scrollX + window.innerWidth - 280 - 8);
+      left = Math.max(left, window.scrollX + 8);
+
+      this._el.style.top  = `${top}px`;
+      this._el.style.left = `${left}px`;
+    });
+  }
+}

package/src/viewer/GalleryRenderer.js

@@ -0,0 +1,417 @@
+// ─── GalleryRenderer.js ───────────────────────────────────────────────────────
+// Renders a gallery of image items in one of four layouts.
+// All layouts open the shared lightbox singleton on click.
+//
+// Usage:
+//   import { renderGallery } from './GalleryRenderer.js';
+//   const el = renderGallery(items, 'carousel');
+//   container.appendChild(el);
+//
+// items shape: { src?, url?, alt?, alt_text?, caption? }[]
+// layouts: 'grid' | 'masonry' | 'carousel' | 'strip'
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { lightbox } from './Lightbox.js';
+
+const VALID_LAYOUTS = new Set(['grid', 'masonry', 'carousel', 'strip']);
+
+// ── Public ────────────────────────────────────────────────────────────────────
+
+/**
+ * Render a gallery element.
+ * @param {object[]} items
+ * @param {'grid'|'masonry'|'carousel'|'strip'} layout
+ * @returns {HTMLElement}
+ */
+export function renderGallery(items = [], layout = 'grid') {
+  _injectStyles();
+
+  const l    = VALID_LAYOUTS.has(layout) ? layout : 'grid';
+  const wrap = document.createElement('div');
+  wrap.className      = `griot-gallery griot-gallery--${l}`;
+  wrap.dataset.layout = l;
+
+  if (!items.length) {
+    const empty = document.createElement('div');
+    empty.className   = 'griot-gallery__empty';
+    empty.textContent = 'No images yet';
+    wrap.appendChild(empty);
+    return wrap;
+  }
+
+  switch (l) {
+    case 'carousel': return _carousel(items, wrap);
+    case 'masonry':  return _masonry(items, wrap);
+    case 'strip':    return _strip(items, wrap);
+    default:         return _grid(items, wrap);
+  }
+}
+
+// ── Grid ──────────────────────────────────────────────────────────────────────
+
+function _grid(items, wrap) {
+  items.forEach((item, i) => {
+    const el  = _itemEl(item, i, items);
+    el.className = 'griot-gallery__item griot-gallery__item--grid';
+    wrap.appendChild(el);
+  });
+  return wrap;
+}
+
+// ── Masonry ───────────────────────────────────────────────────────────────────
+
+function _masonry(items, wrap) {
+  items.forEach((item, i) => {
+    const el  = _itemEl(item, i, items);
+    el.className = 'griot-gallery__item griot-gallery__item--masonry';
+    wrap.appendChild(el);
+  });
+  return wrap;
+}
+
+// ── Strip ─────────────────────────────────────────────────────────────────────
+
+function _strip(items, wrap) {
+  const inner = document.createElement('div');
+  inner.className = 'griot-gallery__strip-inner';
+
+  items.forEach((item, i) => {
+    const el = _itemEl(item, i, items);
+    el.className = 'griot-gallery__item griot-gallery__item--strip';
+    inner.appendChild(el);
+  });
+
+  wrap.appendChild(inner);
+  return wrap;
+}
+
+// ── Shared item element (grid / masonry / strip) ──────────────────────────────
+
+function _itemEl(item, index, allItems) {
+  const el  = document.createElement('div');
+
+  const img = document.createElement('img');
+  img.src      = item.src  ?? item.url      ?? '';
+  img.alt      = item.alt  ?? item.alt_text ?? item.caption ?? '';
+  img.loading  = index < 6 ? 'eager' : 'lazy';
+  img.decoding = 'async';
+  img.draggable = false;
+
+  img.addEventListener('click', () => lightbox.open(allItems, index));
+
+  el.appendChild(img);
+
+  if (item.caption) {
+    const cap = document.createElement('p');
+    cap.className   = 'griot-gallery__caption';
+    cap.textContent = item.caption;
+    el.appendChild(cap);
+  }
+
+  return el;
+}
+
+// ── Carousel ──────────────────────────────────────────────────────────────────
+
+function _carousel(items, wrap) {
+  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';
+
+  const track = document.createElement('div');
+  track.className = 'griot-carousel__track';
+
+  items.forEach((item, i) => {
+    const slide = document.createElement('div');
+    slide.className = 'griot-carousel__slide';
+
+    const img = document.createElement('img');
+    img.src      = item.src  ?? item.url      ?? '';
+    img.alt      = item.alt  ?? item.alt_text ?? item.caption ?? '';
+    img.loading  = i === 0 ? 'eager' : 'lazy';
+    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);
+
+    if (item.caption) {
+      const cap = document.createElement('p');
+      cap.className   = 'griot-gallery__caption griot-carousel__caption';
+      cap.textContent = item.caption;
+      slide.appendChild(cap);
+    }
+
+    track.appendChild(slide);
+  });
+
+  viewport.appendChild(track);
+
+  // Controls bar
+  const controls = document.createElement('div');
+  controls.className = 'griot-carousel__controls';
+
+  const prevBtn = _carBtn('‹', 'griot-carousel__btn griot-carousel__btn--prev', 'Previous');
+  const nextBtn = _carBtn('›', 'griot-carousel__btn griot-carousel__btn--next', 'Next');
+  const counter = document.createElement('span');
+  counter.className = 'griot-carousel__counter';
+
+  controls.append(prevBtn, counter, nextBtn);
+
+  // Dot strip
+  const dots = document.createElement('div');
+  dots.className = 'griot-carousel__dots';
+
+  const dotEls = items.map((_, i) => {
+    const d = document.createElement('button');
+    d.type = 'button';
+    d.className = 'griot-carousel__dot';
+    d.setAttribute('aria-label', `Image ${i + 1}`);
+    d.addEventListener('click', () => goTo(i));
+    dots.appendChild(d);
+    return d;
+  });
+
+  // ── Navigation logic ──────────────────────────────────────────────────────
+
+  function goTo(n, animate = true) {
+    idx = Math.max(0, Math.min(n, items.length - 1));
+
+    if (!animate) {
+      track.style.transition = 'none';
+      requestAnimationFrame(() => { track.style.transition = ''; });
+    }
+
+    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);
+
+    dotEls.forEach((d, i) => {
+      d.classList.toggle('is-active', i === idx);
+      d.setAttribute('aria-pressed', String(i === idx));
+    });
+  }
+
+  prevBtn.addEventListener('click', () => goTo(idx - 1));
+  nextBtn.addEventListener('click', () => goTo(idx + 1));
+
+  // Touch / swipe on the viewport
+  let touchX = 0, touchY = 0, isScrolling = null;
+
+  viewport.addEventListener('touchstart', e => {
+    touchX = e.touches[0].clientX;
+    touchY = e.touches[0].clientY;
+    isScrolling = null;
+  }, { passive: true });
+
+  viewport.addEventListener('touchmove', e => {
+    if (isScrolling === null) {
+      const dx = Math.abs(e.touches[0].clientX - touchX);
+      const dy = Math.abs(e.touches[0].clientY - touchY);
+      isScrolling = dy > dx;
+    }
+  }, { passive: true });
+
+  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);
+  }, { 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); }
+  });
+
+  // Accessibility
+  wrap.setAttribute('role', 'region');
+  wrap.setAttribute('aria-roledescription', 'carousel');
+  wrap.setAttribute('aria-label', `Gallery, ${items.length} images`);
+  viewport.setAttribute('aria-live', 'polite');
+
+  dots.hidden = items.length < 2 || items.length > 14;
+
+  wrap.append(viewport, controls, dots);
+
+  goTo(0, false); // initial position, no animation
+  return wrap;
+}
+
+function _carBtn(label, className, ariaLabel) {
+  const b = document.createElement('button');
+  b.type = 'button';
+  b.className = className;
+  b.setAttribute('aria-label', ariaLabel);
+  b.textContent = label;
+  return b;
+}
+
+// ── Style injection ───────────────────────────────────────────────────────────
+
+let _stylesInjected = false;
+function _injectStyles() {
+  if (_stylesInjected || typeof document === 'undefined') return;
+  _stylesInjected = true;
+  const s = document.createElement('style');
+  s.id = 'griot-gallery-styles';
+  s.textContent = `
+/* ── Shared gallery wrapper ─────────────────────────────────────────────── */
+.griot-gallery {
+  width: 100%;
+  box-sizing: border-box;
+}
+.griot-gallery__empty {
+  font-size: 13px; color: #64748b;
+  padding: 24px; text-align: center;
+  border: 2px dashed rgba(255,255,255,0.10); border-radius: 10px;
+}
+.griot-gallery__caption {
+  font-size: 12px; color: #64748b;
+  margin: 5px 0 0; text-align: center; line-height: 1.4;
+}
+
+/* ── Grid ───────────────────────────────────────────────────────────────── */
+.griot-gallery--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 8px;
+}
+.griot-gallery__item--grid {
+  cursor: zoom-in;
+  border-radius: 8px; overflow: hidden;
+  background: rgba(255,255,255,0.04);
+}
+.griot-gallery__item--grid img {
+  width: 100%; display: block;
+  aspect-ratio: 4/3; object-fit: cover;
+  transition: transform 0.22s;
+}
+.griot-gallery__item--grid:hover img { transform: scale(1.04); }
+
+/* ── Masonry ────────────────────────────────────────────────────────────── */
+.griot-gallery--masonry {
+  columns: 2 200px; gap: 8px;
+}
+.griot-gallery__item--masonry {
+  break-inside: avoid; margin-bottom: 8px;
+  cursor: zoom-in; border-radius: 8px; overflow: hidden;
+  background: rgba(255,255,255,0.04);
+}
+.griot-gallery__item--masonry img {
+  width: 100%; display: block;
+  transition: transform 0.22s;
+}
+.griot-gallery__item--masonry:hover img { transform: scale(1.02); }
+
+/* ── Strip ──────────────────────────────────────────────────────────────── */
+.griot-gallery--strip { overflow: hidden; }
+
+.griot-gallery__strip-inner {
+  display: flex; gap: 8px;
+  overflow-x: auto; padding-bottom: 6px;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+.griot-gallery__strip-inner::-webkit-scrollbar { height: 4px; }
+.griot-gallery__strip-inner::-webkit-scrollbar-track { background: transparent; }
+.griot-gallery__strip-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
+
+.griot-gallery__item--strip {
+  flex-shrink: 0; scroll-snap-align: start;
+  width: 180px; height: 120px;
+  border-radius: 8px; overflow: hidden; cursor: zoom-in;
+  background: rgba(255,255,255,0.04);
+}
+.griot-gallery__item--strip img {
+  width: 100%; height: 100%; object-fit: cover;
+  transition: transform 0.22s;
+}
+.griot-gallery__item--strip:hover img { transform: scale(1.04); }
+
+/* ── Carousel ───────────────────────────────────────────────────────────── */
+.griot-gallery--carousel { outline: none; }
+
+.griot-carousel__viewport {
+  overflow: hidden; border-radius: 10px;
+  background: rgba(0,0,0,0.15);
+}
+.griot-carousel__track {
+  display: flex;
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+.griot-carousel__slide {
+  flex: 0 0 100%; min-width: 0;
+  display: flex; flex-direction: column; align-items: center;
+}
+.griot-carousel__slide img {
+  width: 100%; max-height: 420px;
+  object-fit: contain; display: block;
+  cursor: zoom-in; user-select: none;
+}
+.griot-carousel__caption {
+  padding: 8px 16px 10px;
+}
+
+/* Controls bar */
+.griot-carousel__controls {
+  display: flex; align-items: center; justify-content: center;
+  gap: 16px; margin-top: 10px;
+}
+.griot-carousel__btn {
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 6px; color: #94a3b8;
+  width: 34px; height: 34px; font-size: 18px; line-height: 1;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  transition: background 0.15s, color 0.15s, opacity 0.15s;
+}
+.griot-carousel__btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.griot-carousel__btn:not(:disabled):hover {
+  background: rgba(99,102,241,0.20); color: #a5b4fc;
+}
+.griot-carousel__btn.is-edge { opacity: 0.45; }
+.griot-carousel__btn.is-edge:hover { opacity: 1; }
+.griot-carousel__counter { font-size: 13px; color: #64748b; min-width: 48px; text-align: center; }
+
+/* Dots */
+.griot-carousel__dots {
+  display: flex; justify-content: center; gap: 6px; margin-top: 10px;
+}
+.griot-carousel__dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: rgba(255,255,255,0.18); border: none; padding: 0;
+  cursor: pointer; transition: background 0.2s, transform 0.2s;
+}
+.griot-carousel__dot:hover { background: rgba(255,255,255,0.40); }
+.griot-carousel__dot.is-active {
+  background: #6366f1; transform: scale(1.3);
+}
+
+@media (max-width: 480px) {
+  .griot-gallery--grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .griot-gallery--masonry { columns: 2; }
+  .griot-gallery__item--strip { width: 140px; height: 96px; }
+}
+  `;
+  document.head.appendChild(s);
+}