@thisiscrowd/crowdbox 1.0.0

package/src/react/Lightbox.jsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+import { Crowdbox } from '../core/Crowdbox.js';
+
+/**
+ * Controlled React component wrapper around Crowdbox.
+ *
+ * Props:
+ *   items        GalleryItem[]
+ *   open         boolean
+ *   startIndex   number (default 0)
+ *   onClose      () => void
+ *   + any CrowdboxOptions
+ */
+export function Lightbox({ items = [], open: isOpen, startIndex = 0, onClose, ...rest }) {
+  const galleryRef = useRef(null);
+
+  useEffect(() => {
+    const g = new Crowdbox({ ...rest, selector: null });
+    g.on('close', () => onClose?.());
+    galleryRef.current = g;
+    return () => g.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const g = galleryRef.current;
+    if (!g) return;
+    if (isOpen) {
+      g.open(items, startIndex);
+    } else {
+      g.close();
+    }
+  }, [isOpen, items, startIndex]);
+
+  return null; // renders into document.body via DOM API
+}

package/src/react/useLightbox.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { Crowdbox } from '../core/Crowdbox.js';
+
+/**
+ * Hook that creates and manages a Crowdbox instance.
+ *
+ * @param {import('../../types').CrowdboxOptions} options
+ * @returns {{ open, close, next, prev, goTo, gallery }}
+ */
+export function useLightbox(options = {}) {
+  const galleryRef = useRef(null);
+  const optsRef = useRef(options);
+  optsRef.current = options;
+
+  useEffect(() => {
+    const g = new Crowdbox(optsRef.current);
+    galleryRef.current = g;
+    return () => g.destroy();
+  }, []); // intentionally empty — recreate only on unmount
+
+  const open = useCallback((items, startIndex = 0) => {
+    galleryRef.current?.open(items, startIndex);
+  }, []);
+
+  const close = useCallback(() => {
+    galleryRef.current?.close();
+  }, []);
+
+  const next = useCallback(() => galleryRef.current?.next(), []);
+  const prev = useCallback(() => galleryRef.current?.prev(), []);
+  const goTo = useCallback((i) => galleryRef.current?.goTo(i), []);
+
+  return { open, close, next, prev, goTo, gallery: galleryRef };
+}

package/src/styles/_animations.scss

@@ -0,0 +1,62 @@
+@keyframes lgx-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes lgx-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes lgx-slide-in-right {
+  from { transform: translate3d(32px, 0, 0) scale(0.98); opacity: 0; }
+  to   { transform: translate3d(0, 0, 0) scale(1);        opacity: 1; }
+}
+
+@keyframes lgx-slide-in-left {
+  from { transform: translate3d(-32px, 0, 0) scale(0.98); opacity: 0; }
+  to   { transform: translate3d(0, 0, 0) scale(1);         opacity: 1; }
+}
+
+@keyframes lgx-slide-out-left {
+  from { transform: translate3d(0, 0, 0) scale(1);         opacity: 1; }
+  to   { transform: translate3d(-32px, 0, 0) scale(0.98); opacity: 0; }
+}
+
+@keyframes lgx-slide-out-right {
+  from { transform: translate3d(0, 0, 0) scale(1);        opacity: 1; }
+  to   { transform: translate3d(32px, 0, 0) scale(0.98); opacity: 0; }
+}
+
+@keyframes lgx-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes lgx-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+
+// Slide transition classes applied by JS.
+// All slides are already position:absolute (see .lgx-content in main.scss),
+// so no position override needed here.
+// "both" fill-mode on incoming slides ensures they start at opacity:0
+// before the animation fires — eliminates the 1-frame flash at final position.
+.lgx-slide--in-right,
+.lgx-slide--in-left,
+.lgx-slide--out-left,
+.lgx-slide--out-right {
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.lgx-slide--active {
+  transform: translate3d(0, 0, 0) scale(1);
+  opacity: 1;
+}
+
+.lgx-slide--in-right  { animation: lgx-slide-in-right  var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) both; }
+.lgx-slide--in-left   { animation: lgx-slide-in-left   var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) both; }
+.lgx-slide--out-left  { animation: lgx-slide-out-left  var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards; }
+.lgx-slide--out-right { animation: lgx-slide-out-right var(--lgx-slide-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards; }

package/src/styles/_mosaic.scss

@@ -0,0 +1,46 @@
+// ─── Mosaic tile reveal animation ────────────────────────────────────────────
+//
+// When a high-res image loads, an 8×8 grid of tiles covers it.
+// Tiles wave-dissolve away (diagonal top-left → bottom-right) revealing the image.
+
+.lgx-mosaic {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  pointer-events: none;
+  z-index: 3;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.lgx-mosaic__tile {
+  --lgx-tile-delay: 0ms;
+  will-change: transform, opacity, border-radius;
+  animation: lgx-mosaic-out 420ms cubic-bezier(0.4, 0, 0.6, 1) var(--lgx-tile-delay, 0ms) both;
+}
+
+@keyframes lgx-mosaic-out {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    border-radius: 0;
+  }
+  45% {
+    transform: scale(1.06);
+    border-radius: 4px;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0) rotate(12deg);
+    border-radius: 50%;
+    opacity: 0;
+  }
+}
+
+// Respect reduced-motion — instant removal with no animation
+@media (prefers-reduced-motion: reduce) {
+  .lgx-mosaic__tile {
+    animation: none;
+    opacity: 0;
+  }
+}

package/src/styles/_responsive.scss

@@ -0,0 +1,34 @@
+// ─── Responsive breakpoints ──────────────────────────────────────────────────
+@media (max-width: 640px) {
+  :root {
+    --lgx-btn-size:     38px;
+    --lgx-nav-size:     42px;
+    --lgx-thumb-size:   56px;
+    --lgx-thumb-strip-h: 76px;
+  }
+
+  .lgx-toolbar { padding: 6px 8px; gap: 4px; }
+  .lgx-btn--prev { left: 4px; }
+  .lgx-btn--next { right: 4px; }
+  .lgx-caption { font-size: 12px; padding: 8px 16px; }
+}
+
+@media (hover: none) {
+  // Always show nav on touch devices
+  .lgx-btn--nav { opacity: 1 !important; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// High contrast
+@media (prefers-color-scheme: dark) {
+  :root {
+    --lgx-btn-bg: rgba(255, 255, 255, 0.15);
+  }
+}

package/src/styles/_thumbnails.scss

@@ -0,0 +1,66 @@
+// ─── Thumbnail strip ─────────────────────────────────────────────────────────
+.lgx-thumbs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lgx-thumb-gap);
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 8px 12px;
+  height: var(--lgx-thumb-strip-h);
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,.3) transparent;
+  flex-shrink: 0;
+
+  &::-webkit-scrollbar       { height: 4px; }
+  &::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 2px; }
+}
+
+.lgx-thumb {
+  flex-shrink: 0;
+  width: var(--lgx-thumb-size);
+  height: calc(var(--lgx-thumb-strip-h) - 20px);
+  border: 2px solid transparent;
+  border-radius: var(--lgx-radius);
+  overflow: hidden;
+  cursor: pointer;
+  padding: 0;
+  background: rgba(255,255,255,.08);
+  transition: border-color 0.2s var(--lgx-ease), opacity 0.2s var(--lgx-ease), transform 0.2s var(--lgx-ease);
+  opacity: 0.55;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    pointer-events: none;
+  }
+
+  &:hover {
+    opacity: 0.85;
+    transform: scale(1.05);
+  }
+
+  &--active {
+    border-color: var(--lgx-accent);
+    opacity: 1;
+    transform: scale(1.08);
+  }
+
+  &--no-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--lgx-text-muted);
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--lgx-accent);
+    outline-offset: 2px;
+  }
+}

package/src/styles/_toolbar.scss

@@ -0,0 +1,150 @@
+// ─── Toolbar ─────────────────────────────────────────────────────────────────
+.lgx-toolbar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
+  border-radius: 0 0 0 var(--lgx-radius);
+}
+
+// ─── Buttons ─────────────────────────────────────────────────────────────────
+.lgx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lgx-btn-size);
+  height: var(--lgx-btn-size);
+  border: none;
+  border-radius: var(--lgx-btn-radius);
+  background: var(--lgx-btn-bg);
+  color: var(--lgx-text);
+  cursor: pointer;
+  transition: background 0.18s ease, transform 0.15s ease, opacity 0.15s ease;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+
+  svg { width: 20px; height: 20px; }
+
+  &:hover:not(:disabled) {
+    background: var(--lgx-btn-hover);
+    transform: scale(1.08);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--lgx-accent);
+    outline-offset: 2px;
+  }
+
+  &--close {
+    background: rgba(255,255,255,.15);
+    &:hover { background: rgba(220,60,60,.7); }
+  }
+
+  &--active,
+  &--autoplay[aria-pressed='true'] {
+    background: #F5DA2E;
+    color: #000;
+  }
+}
+
+// ─── Navigation arrows ────────────────────────────────────────────────────────
+// Buttons live inside .lgx-stage so top:50% is relative to the image area only.
+.lgx-btn--nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--lgx-nav-size);
+  height: var(--lgx-nav-size);
+  border-radius: var(--lgx-btn-radius);
+  z-index: 10;
+  transition: background 0.18s ease, transform 0.15s ease, opacity 0.2s ease;
+
+  svg { width: 26px; height: 26px; }
+
+  &:hover:not(:disabled) { transform: translateY(-50%) scale(1.1); }
+}
+
+.lgx-btn--prev { left: 12px; }
+.lgx-btn--next { right: 12px; }
+
+// ─── Counter & caption ────────────────────────────────────────────────────────
+.lgx-counter {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--lgx-text-muted);
+  letter-spacing: 0.5px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.lgx-caption {
+  // Normal flex child — sits between .lgx-stage and .lgx-thumbs naturally.
+  // No z-index fighting, no fragile bottom offset calculation.
+  flex-shrink: 0;
+  padding: 10px 24px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--lgx-text);
+  background: rgba(0, 0, 0, 0.55);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+// ─── Spinner ─────────────────────────────────────────────────────────────────
+.lgx-spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  &__ring {
+    width: 44px;
+    height: 44px;
+    border: 3px solid rgba(255,255,255,.15);
+    border-top-color: var(--lgx-text);
+    border-radius: 50%;
+    animation: lgx-spin 0.75s linear infinite;
+  }
+}
+
+// Hide spinner once any descendant of the container has loaded.
+// :has() is supported in all modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+).
+.lgx-container:has(.lgx-content--loaded) .lgx-spinner {
+  display: none;
+}
+
+// ─── Toast ───────────────────────────────────────────────────────────────────
+.lgx-toast {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 18px;
+  background: rgba(0,0,0,.75);
+  color: #fff;
+  font-size: 13px;
+  border-radius: 20px;
+  pointer-events: none;
+  animation: lgx-fade-in 0.2s ease, lgx-fade-out 0.3s 2.2s ease forwards;
+  white-space: nowrap;
+}

package/src/styles/_variables.scss

@@ -0,0 +1,23 @@
+// ─── Design tokens ───────────────────────────────────────────────────────────
+:root {
+  --lgx-backdrop:        rgba(0, 0, 0, 0.92);
+  --lgx-bg:              #111;
+  --lgx-text:            #fff;
+  --lgx-text-muted:      rgba(255, 255, 255, 0.6);
+  --lgx-accent:          #4f8ef7;
+  --lgx-btn-bg:          rgba(255, 255, 255, 0.12);
+  --lgx-btn-hover:       rgba(255, 255, 255, 0.22);
+  --lgx-btn-size:        44px;
+  --lgx-btn-radius:      50%;
+  --lgx-nav-size:        54px;
+  --lgx-thumb-size:      72px;
+  --lgx-thumb-gap:       6px;
+  --lgx-toolbar-height:  56px;
+  --lgx-caption-height:  48px;
+  --lgx-thumb-strip-h:   90px;
+  --lgx-radius:          8px;
+  --lgx-z:               9999;
+  --lgx-duration:        300ms;
+  --lgx-ease:            cubic-bezier(0.4, 0, 0.2, 1);
+  --lgx-slide-duration:  360ms;
+}

package/src/styles/main.scss

@@ -0,0 +1,164 @@
+@use 'variables';
+@use 'animations';
+@use 'toolbar';
+@use 'thumbnails';
+@use 'mosaic';
+@use 'responsive';
+
+// ─── Modal shell ─────────────────────────────────────────────────────────────
+.lgx-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lgx-z);
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  color: var(--lgx-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+.lgx-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--lgx-backdrop);
+}
+
+.lgx-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  outline: none;
+}
+
+// ─── Stage ───────────────────────────────────────────────────────────────────
+.lgx-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+}
+
+.lgx-slide-wrapper {
+  position: relative;      // containing block for all absolutely-positioned slides
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;        // clip slides that are mid-transition
+}
+
+// ─── Slide content ────────────────────────────────────────────────────────────
+// Every slide fills the wrapper absolutely so old + new can overlap during transition.
+.lgx-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+// Image-specific wrapper: needs overflow:hidden to clip mosaic tiles.
+// position:absolute is inherited from .lgx-content.
+.lgx-content--image {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  padding: clamp(16px, 4vh, 42px) clamp(16px, 5vw, 72px);
+  box-sizing: border-box;
+}
+
+.lgx-image {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  margin: auto;
+  object-fit: contain;
+  display: block;
+  border-radius: 2px;
+  transform-origin: center center;
+  will-change: transform;
+  transition: transform 0.1s ease;
+  pointer-events: none;
+}
+
+// ─── Video ───────────────────────────────────────────────────────────────────
+.lgx-video {
+  max-width: 90vw;
+  max-height: calc(90vh - var(--lgx-toolbar-height) - var(--lgx-caption-height) - var(--lgx-thumb-strip-h));
+  border-radius: var(--lgx-radius);
+  background: #000;
+  display: block;
+}
+
+// ─── iframe / embed ──────────────────────────────────────────────────────────
+.lgx-content--iframe {
+  padding: clamp(16px, 4vh, 42px) clamp(16px, 5vw, 72px);
+  box-sizing: border-box;
+  overflow: visible;
+
+  // Loading shimmer before iframe loads
+  &:not(.lgx-content--loaded)::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: min(90vw, 960px);
+    height: min(56.25vw, 540px, calc(90vh - var(--lgx-toolbar-height) - var(--lgx-caption-height) - var(--lgx-thumb-strip-h) - 80px));
+    transform: translate(-50%, -50%);
+    border-radius: var(--lgx-radius);
+    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%);
+    background-size: 200% 100%;
+    animation: lgx-pulse 1.5s ease infinite;
+    pointer-events: none;
+  }
+}
+
+.lgx-iframe {
+  width: min(90vw, 960px);
+  height: min(56.25vw, 540px, calc(90vh - var(--lgx-toolbar-height) - var(--lgx-caption-height) - var(--lgx-thumb-strip-h) - 80px));
+  max-width: 100%;
+  max-height: 100%;
+  border: none;
+  display: block;
+  background: #000;
+  border-radius: var(--lgx-radius);
+  overflow: hidden;
+}
+
+// ─── Error state ─────────────────────────────────────────────────────────────
+.lgx-content--error {
+  color: var(--lgx-text-muted);
+  font-size: 14px;
+  padding: 24px;
+  text-align: center;
+
+  &::before {
+    content: '⚠ Failed to load media';
+    display: block;
+  }
+}
+
+// ─── Fullscreen override ──────────────────────────────────────────────────────
+.lgx-modal--fullscreen {
+  .lgx-image {
+    max-height: 100vh;
+    max-width: 100vw;
+  }
+  .lgx-iframe {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100vh;
+  }
+}