aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/interactive/GlassImageViewer.js

@@ -0,0 +1,428 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { X, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, RotateCcw, RotateCw, Download, Minimize2, Maximize2, Pause, Play, Home } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { GlassButton } from '../button/GlassButton.js';
+import '../button/GlassFab.js';
+import '../button/GlassMagneticButton.js';
+import { CardContent } from '../card/index.js';
+import { GlassCard } from '../card/GlassCard.js';
+
+/**
+ * GlassImageViewer component
+ * A comprehensive image viewer with zoom, pan, rotation, and slideshow features
+ */
+const GlassImageViewer = ({
+  images,
+  initialIndex = 0,
+  enableZoom = true,
+  enablePan = true,
+  enableRotation = true,
+  enableFullscreen = true,
+  enableNavigation = true,
+  showZoomControls = true,
+  showRotationControls = true,
+  showDownloadButton = true,
+  showImageInfo = true,
+  autoPlay = false,
+  autoPlayInterval = 3000,
+  zoomLevels = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4],
+  minZoom = 0.1,
+  maxZoom = 5,
+  objectFit = "contain",
+  loading = false,
+  error,
+  className,
+  onImageChange,
+  onZoomChange,
+  onFullscreenChange,
+  ...props
+}) => {
+  const prefersReducedMotion = useReducedMotion();
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const [pan, setPan] = useState({
+    x: 0,
+    y: 0
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({
+    x: 0,
+    y: 0
+  });
+  const [isAutoPlaying, setIsAutoPlaying] = useState(autoPlay);
+  const [imageLoading, setImageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+  const containerRef = useRef(null);
+  const imageRef = useRef(null);
+  const autoPlayRef = useRef();
+  const currentImage = images[currentIndex];
+  // Handle image change
+  const handleImageChange = useCallback(index => {
+    if (index < 0 || index >= images.length) return;
+    setCurrentIndex(index);
+    setZoom(1);
+    setRotation(0);
+    setPan({
+      x: 0,
+      y: 0
+    });
+    setImageLoading(true);
+    setImageError(false);
+    onImageChange?.(index);
+  }, [images.length, onImageChange]);
+  // Handle zoom
+  const handleZoom = useCallback(newZoom => {
+    const clampedZoom = Math.max(minZoom, Math.min(maxZoom, newZoom));
+    setZoom(clampedZoom);
+    onZoomChange?.(clampedZoom);
+  }, [minZoom, maxZoom, onZoomChange]);
+  // Handle zoom in/out with levels
+  const handleZoomIn = useCallback(() => {
+    const currentLevelIndex = zoomLevels.findIndex(level => level >= zoom);
+    const nextLevel = zoomLevels[Math.min(currentLevelIndex + 1, zoomLevels.length - 1)];
+    handleZoom(nextLevel);
+  }, [zoom, zoomLevels, handleZoom]);
+  const handleZoomOut = useCallback(() => {
+    const reversedLevels = [...zoomLevels].reverse();
+    const currentLevelIndex = zoomLevels.length - 1 - reversedLevels.findIndex(level => level <= zoom);
+    const prevLevel = zoomLevels[Math.max(currentLevelIndex - 1, 0)];
+    handleZoom(prevLevel);
+  }, [zoom, zoomLevels, handleZoom]);
+  // Handle rotation
+  const handleRotate = useCallback(degrees => {
+    setRotation(prev => (prev + degrees) % 360);
+  }, []);
+  // Handle pan
+  const handleMouseDown = useCallback(e => {
+    if (!enablePan || zoom <= 1) return;
+    setIsDragging(true);
+    setDragStart({
+      x: e.clientX - pan.x,
+      y: e.clientY - pan.y
+    });
+  }, [enablePan, zoom, pan]);
+  const handleMouseMove = useCallback(e => {
+    if (!isDragging || !enablePan) return;
+    setPan({
+      x: e.clientX - dragStart.x,
+      y: e.clientY - dragStart.y
+    });
+  }, [isDragging, enablePan, dragStart]);
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  // Handle wheel zoom
+  const handleWheel = useCallback(e => {
+    if (!enableZoom) return;
+    e.preventDefault();
+    const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+    handleZoom(zoom * zoomFactor);
+  }, [enableZoom, zoom, handleZoom]);
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyPress = e => {
+      switch (e.key) {
+        case "ArrowLeft":
+          if (enableNavigation) {
+            handleImageChange(currentIndex - 1);
+          }
+          break;
+        case "ArrowRight":
+          if (enableNavigation) {
+            handleImageChange(currentIndex + 1);
+          }
+          break;
+        case "Escape":
+          if (isFullscreen) {
+            handleFullscreenToggle();
+          }
+          break;
+        case "+":
+        case "=":
+          if (enableZoom) {
+            handleZoomIn();
+          }
+          break;
+        case "-":
+          if (enableZoom) {
+            handleZoomOut();
+          }
+          break;
+        case "0":
+          handleZoom(1);
+          break;
+        case "r":
+        case "R":
+          if (enableRotation) {
+            handleRotate(90);
+          }
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, [currentIndex, isFullscreen, zoom, enableNavigation, enableZoom, enableRotation, handleImageChange, handleZoom, handleZoomIn, handleZoomOut, handleRotate]);
+  // Handle fullscreen toggle
+  const handleFullscreenToggle = useCallback(() => {
+    const newFullscreen = !isFullscreen;
+    setIsFullscreen(newFullscreen);
+    onFullscreenChange?.(newFullscreen);
+  }, [isFullscreen, onFullscreenChange]);
+  // Handle download
+  const handleDownload = useCallback(() => {
+    if (!currentImage) return;
+    const link = document.createElement("a");
+    link.href = currentImage.src;
+    link.download = currentImage.title || `image-${currentIndex + 1}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [currentImage, currentIndex]);
+  // Handle image load
+  const handleImageLoad = useCallback(() => {
+    setImageLoading(false);
+    setImageError(false);
+  }, []);
+  const handleImageError = useCallback(() => {
+    setImageLoading(false);
+    setImageError(true);
+  }, []);
+  // Auto-play functionality
+  useEffect(() => {
+    if (isAutoPlaying && images && images.length > 1) {
+      autoPlayRef.current = setInterval(() => {
+        setCurrentIndex(prev => (prev + 1) % images.length);
+      }, autoPlayInterval);
+    } else {
+      if (autoPlayRef.current) {
+        clearInterval(autoPlayRef.current);
+      }
+    }
+    return () => {
+      if (autoPlayRef.current) {
+        clearInterval(autoPlayRef.current);
+      }
+    };
+  }, [isAutoPlaying, images.length, autoPlayInterval]);
+  // Reset zoom and pan when image changes
+  useEffect(() => {
+    setZoom(1);
+    setRotation(0);
+    setPan({
+      x: 0,
+      y: 0
+    });
+  }, [currentIndex]);
+  if (!currentImage) {
+    return jsx(GlassCard, {
+      "data-glass-component": true,
+      className: cn("p-8", className),
+      children: jsx("div", {
+        className: 'text-center text-primary/60',
+        children: "No image to display"
+      })
+    });
+  }
+  return jsx(MotionFramer, {
+    preset: "fadeIn",
+    className: "glass-w-full",
+    children: jsx(GlassCard, {
+      className: cn("overflow-hidden relative", isFullscreen && "fixed inset-0 z-50 rounded-none", className),
+      ...props,
+      children: jsxs(CardContent, {
+        className: "glass-p-0",
+        children: [jsxs("div", {
+          ref: containerRef,
+          className: cn("relative bg-black/20 overflow-hidden", isFullscreen ? "h-screen" : "aspect-video"),
+          onMouseDown: handleMouseDown,
+          onMouseMove: handleMouseMove,
+          onMouseUp: handleMouseUp,
+          onMouseLeave: handleMouseUp,
+          onWheel: handleWheel,
+          style: {
+            cursor: isDragging ? "grabbing" : enablePan && zoom > 1 ? "grab" : "default"
+          },
+          children: [imageLoading && jsx("div", {
+            className: 'absolute inset-0 glass-flex glass-items-center glass-justify-center',
+            children: jsx("div", {
+              className: cn("glass-radius-full h-8 w-8 border-2 border-white/20 border-t-white/60", !prefersReducedMotion && "animate-spin")
+            })
+          }), imageError && jsxs("div", {
+            className: 'absolute inset-0 glass-flex glass-flex-col glass-items-center glass-justify-center text-primary/60',
+            children: [jsx(X, {
+              className: 'w-12 h-12 mb-4'
+            }), jsx("p", {
+              children: "Failed to load image"
+            })]
+          }), !imageError && jsx("img", {
+            ref: imageRef,
+            src: currentImage.src,
+            alt: currentImage.alt || currentImage.title || `Image ${currentIndex + 1}`,
+            className: cn("w-full h-full transition-transform duration-200", objectFit === "contain" && "object-contain", objectFit === "cover" && "object-cover", objectFit === "fill" && "object-fill", objectFit === "none" && "object-none", objectFit === "scale-down" && "object-scale-down"),
+            style: {
+              transform: `scale(${zoom}) rotate(${rotation}deg) translate(${pan.x}px, ${pan.y}px)`,
+              transformOrigin: "center center"
+            },
+            onLoad: handleImageLoad,
+            onError: handleImageError,
+            draggable: false
+          }), showImageInfo && currentImage.title && jsxs("div", {
+            className: 'absolute bottom-0 left-0 right-0 glass-surface-dark/50 glass-glass-glass-backdrop-blur-md glass-contrast-guard glass-p-4 glass-contrast-guard',
+            children: [jsx("h3", {
+              className: 'text-primary font-medium',
+              children: currentImage.title
+            }), currentImage.description && jsx("p", {
+              className: 'text-primary/80 glass-text-sm glass-mt-1',
+              children: currentImage.description
+            })]
+          })]
+        }), jsxs("div", {
+          className: 'absolute top-4 left-4 right-4 glass-flex glass-justify-between glass-items-start',
+          children: [jsx("div", {
+            className: "glass-flex glass-items-center glass-gap-2",
+            children: enableNavigation && images.length > 1 && jsxs(Fragment, {
+              children: [jsx(GlassButton, {
+                variant: "secondary",
+                size: "sm",
+                onClick: e => handleImageChange(currentIndex - 1),
+                disabled: currentIndex === 0,
+                className: "glass-p-2 glass-focus glass-touch-target",
+                children: jsx(ChevronLeft, {
+                  className: 'w-4 h-4'
+                })
+              }), jsx(GlassButton, {
+                variant: "secondary",
+                size: "sm",
+                onClick: e => handleImageChange(currentIndex + 1),
+                disabled: currentIndex === images.length - 1,
+                className: "glass-p-2 glass-focus glass-touch-target",
+                children: jsx(ChevronRight, {
+                  className: 'w-4 h-4'
+                })
+              }), jsxs("span", {
+                className: 'text-primary/80 glass-text-sm glass-px-2',
+                children: [currentIndex + 1, " / ", images.length]
+              })]
+            })
+          }), jsxs("div", {
+            className: "glass-flex glass-items-center glass-gap-2",
+            children: [enableZoom && showZoomControls && jsxs(Fragment, {
+              children: [jsx(GlassButton, {
+                variant: "secondary",
+                size: "sm",
+                onClick: handleZoomOut,
+                disabled: zoom <= minZoom,
+                className: "glass-p-2 glass-focus glass-touch-target",
+                children: jsx(ZoomOut, {
+                  className: 'w-4 h-4'
+                })
+              }), jsxs("span", {
+                className: 'text-primary/80 glass-text-sm glass-px-2 min-w-16 text-center',
+                children: [Math.round(zoom * 100), "%"]
+              }), jsx(GlassButton, {
+                variant: "secondary",
+                size: "sm",
+                onClick: handleZoomIn,
+                disabled: zoom >= maxZoom,
+                className: "glass-p-2 glass-focus glass-touch-target",
+                children: jsx(ZoomIn, {
+                  className: 'w-4 h-4'
+                })
+              })]
+            }), enableRotation && showRotationControls && jsxs(Fragment, {
+              children: [jsx(GlassButton, {
+                variant: "secondary",
+                size: "sm",
+                onClick: e => handleRotate(-90),
+                className: "glass-p-2 glass-focus glass-touch-target",
+                children: jsx(RotateCcw, {
+                  className: 'w-4 h-4'
+                })
+              }), jsx(GlassButton, {
+                variant: "secondary",
+                size: "sm",
+                onClick: e => handleRotate(90),
+                className: "glass-p-2 glass-focus glass-touch-target",
+                children: jsx(RotateCw, {
+                  className: 'w-4 h-4'
+                })
+              })]
+            }), showDownloadButton && jsx(GlassButton, {
+              variant: "secondary",
+              size: "sm",
+              onClick: handleDownload,
+              className: "glass-p-2 glass-focus glass-touch-target",
+              children: jsx(Download, {
+                className: 'w-4 h-4'
+              })
+            }), enableFullscreen && jsx(GlassButton, {
+              variant: "secondary",
+              size: "sm",
+              onClick: handleFullscreenToggle,
+              className: "glass-p-2 glass-focus glass-touch-target",
+              children: isFullscreen ? jsx(Minimize2, {
+                className: 'w-4 h-4'
+              }) : jsx(Maximize2, {
+                className: 'w-4 h-4'
+              })
+            })]
+          })]
+        }), enableNavigation && images.length > 1 && jsx("div", {
+          className: 'absolute bottom-4 left-1/2 transform -translate-x-1/2',
+          children: jsxs("div", {
+            className: "glass-flex glass-items-center glass-gap-2 glass-surface-dark/50 glass-glass-glass-backdrop-blur-md glass-contrast-guard glass-radius-full glass-px-4 glass-py-2 glass-contrast-guard",
+            children: [jsx(GlassButton, {
+              variant: "ghost",
+              size: "sm",
+              onClick: e => setIsAutoPlaying(!isAutoPlaying),
+              className: "glass-p-1 glass-focus glass-touch-target",
+              children: isAutoPlaying ? jsx(Pause, {
+                className: 'w-4 h-4'
+              }) : jsx(Play, {
+                className: 'w-4 h-4'
+              })
+            }), jsx("div", {
+              className: "glass-flex glass-gap-1",
+              children: images.map((_, index) => jsx("button", {
+                onClick: e => handleImageChange(index),
+                className: cn("w-2 h-2 glass-radius-full transition-all duration-200 glass-focus glass-touch-target glass-contrast-guard", index === currentIndex ? "bg-white" : "bg-white/40")
+              }, index))
+            })]
+          })
+        }), (zoom !== 1 || rotation !== 0 || pan.x !== 0 || pan.y !== 0) && jsx("div", {
+          className: 'absolute glass-top-1/2 left-4 transform -translate-y-1/2',
+          children: jsx(GlassButton, {
+            variant: "secondary",
+            size: "sm",
+            onClick: e => {
+              setZoom(1);
+              setRotation(0);
+              setPan({
+                x: 0,
+                y: 0
+              });
+            },
+            className: "glass-p-2 glass-focus glass-touch-target",
+            children: jsx(Home, {
+              className: 'w-4 h-4'
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+
+export { GlassImageViewer, GlassImageViewer as default };
+//# sourceMappingURL=GlassImageViewer.js.map

package/dist/esm/components/interactive/GlassImageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassImageViewer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/interactive/GlassInfiniteScroll.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { Loader2, AlertCircle, RefreshCw } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+
+/**
+ * GlassInfiniteScroll component
+ * Infinite scrolling container with loading states and error handling
+ */
+const GlassInfiniteScroll = ({
+  children,
+  onLoadMore,
+  hasMore,
+  loading = false,
+  error = null,
+  threshold = 100,
+  loadingIndicator,
+  errorIndicator,
+  endMessage,
+  className,
+  reverse = false,
+  autoScroll = false,
+  ...props
+}) => {
+  const [isLoading, setIsLoading] = useState(loading);
+  const [loadError, setLoadError] = useState(error);
+  const [hasReachedEnd, setHasReachedEnd] = useState(false);
+  const containerRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const observerRef = useRef(null);
+  const isLoadingMoreRef = useRef(false);
+  // Handle intersection observer
+  const handleIntersection = useCallback(async entries => {
+    const [entry] = entries;
+    if (entry.isIntersecting && hasMore && !isLoadingMoreRef.current && !loadError) {
+      isLoadingMoreRef.current = true;
+      setIsLoading(true);
+      setLoadError(null);
+      try {
+        await onLoadMore();
+      } catch (err) {
+        console.error("Error loading more items:", err);
+        setLoadError("Failed to load more items");
+      } finally {
+        setIsLoading(false);
+        isLoadingMoreRef.current = false;
+      }
+    }
+    if (!hasMore && entry.isIntersecting) {
+      setHasReachedEnd(true);
+    }
+  }, [hasMore, onLoadMore, loadError]);
+  // Setup intersection observer
+  useEffect(() => {
+    if (!sentinelRef.current) return;
+    observerRef.current = new IntersectionObserver(handleIntersection, {
+      root: containerRef.current,
+      rootMargin: `${threshold}px`,
+      threshold: 0.1
+    });
+    observerRef.current.observe(sentinelRef.current);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [handleIntersection, threshold]);
+  // Update loading state when prop changes
+  useEffect(() => {
+    setIsLoading(loading);
+  }, [loading]);
+  // Update error state when prop changes
+  useEffect(() => {
+    setLoadError(error);
+  }, [error]);
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (autoScroll && containerRef.current && reverse) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [children, autoScroll, reverse]);
+  // Handle retry
+  const handleRetry = useCallback(async () => {
+    setLoadError(null);
+    setIsLoading(true);
+    try {
+      await onLoadMore();
+    } catch (err) {
+      console.error("Error retrying load:", err);
+      setLoadError("Failed to load more items");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onLoadMore]);
+  // Default loading indicator
+  const defaultLoadingIndicator = jsx(MotionFramer, {
+    preset: "fadeIn",
+    className: "glass-flex glass-items-center glass-justify-center glass-py-8",
+    children: jsxs("div", {
+      className: "glass-flex glass-items-center glass-gap-3 glass-px-4 glass-py-2 glass-surface-subtle/10 glass-glass-glass-backdrop-blur-md glass-contrast-guard glass-radius-full glass-contrast-guard",
+      children: [jsx(Loader2, {
+        className: 'w-5 h-5 animate-spin text-primary'
+      }), jsx("span", {
+        className: 'text-primary/80 glass-text-sm',
+        children: "Loading more..."
+      })]
+    })
+  });
+  // Default error indicator
+  const defaultErrorIndicator = jsxs(MotionFramer, {
+    preset: "fadeIn",
+    className: "glass-flex glass-flex-col glass-items-center glass-justify-center glass-py-8 glass-px-4",
+    children: [jsxs("div", {
+      className: 'glass-flex glass-items-center glass-gap-2 text-primary mb-3',
+      children: [jsx(AlertCircle, {
+        className: 'w-5 h-5'
+      }), jsx("span", {
+        className: 'glass-text-sm font-medium',
+        children: "Error loading more items"
+      })]
+    }), jsxs("button", {
+      onClick: handleRetry,
+      className: 'glass-flex glass-items-center glass-gap-2 glass-px-4 glass-py-2 glass-surface-dark/30 hover:glass-surface-dark/40 glass-radius-lg transition-colors glass-border glass-border-white/20 hover:border-white/30 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+      children: [jsx(RefreshCw, {
+        className: 'w-4 h-4'
+      }), jsx("span", {
+        className: "glass-text-sm",
+        children: "Try again"
+      })]
+    })]
+  });
+  // Default end message
+  const defaultEndMessage = jsx(MotionFramer, {
+    preset: "fadeIn",
+    className: 'text-center glass-py-8',
+    children: jsx("div", {
+      className: 'text-primary/60 glass-text-sm',
+      children: "You've reached the end"
+    })
+  });
+  return jsxs("div", {
+    "data-glass-component": true,
+    ref: containerRef,
+    className: cn("overflow-y-auto", reverse && "flex flex-col-reverse", className),
+    ...props,
+    children: [jsx("div", {
+      className: cn(reverse && "flex flex-col-reverse"),
+      children: children
+    }), !reverse && jsx("div", {
+      ref: sentinelRef,
+      className: 'h-4'
+    }), isLoading && !reverse && jsx("div", {
+      className: "glass-py-4",
+      children: loadingIndicator || defaultLoadingIndicator
+    }), loadError && !reverse && jsx("div", {
+      className: "glass-py-4",
+      children: errorIndicator || defaultErrorIndicator
+    }), hasReachedEnd && !hasMore && !isLoading && !loadError && !reverse && jsx("div", {
+      className: "glass-py-4",
+      children: endMessage || defaultEndMessage
+    }), reverse && jsxs("div", {
+      className: "glass-flex glass-flex-col-reverse",
+      children: [jsx("div", {
+        ref: sentinelRef,
+        className: 'h-4'
+      }), isLoading && jsx("div", {
+        className: "glass-py-4",
+        children: loadingIndicator || defaultLoadingIndicator
+      }), loadError && jsx("div", {
+        className: "glass-py-4",
+        children: errorIndicator || defaultErrorIndicator
+      }), hasReachedEnd && !hasMore && !isLoading && !loadError && jsx("div", {
+        className: "glass-py-4",
+        children: endMessage || defaultEndMessage
+      })]
+    })]
+  });
+};
+
+export { GlassInfiniteScroll, GlassInfiniteScroll as default };
+//# sourceMappingURL=GlassInfiniteScroll.js.map

package/dist/esm/components/interactive/GlassInfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassInfiniteScroll.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/interactive/GlassInlineEdit.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { GlassButton } from '../button/GlassButton.js';
+import { cn } from '../../lib/utilsComprehensive.js';
+
+function GlassInlineEdit({
+  value,
+  onChange,
+  placeholder = "Edit…",
+  className
+}) {
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(value);
+  React.useEffect(() => setDraft(value), [value]);
+  return jsx("div", {
+    "data-glass-component": true,
+    className: cn("inline-flex items-center glass-gap-2", className),
+    role: "group",
+    "aria-label": "Inline editable field",
+    children: editing ? jsxs(Fragment, {
+      children: [jsx("input", {
+        autoFocus: true,
+        value: draft,
+        onChange: e => setDraft(e.target.value),
+        onKeyDown: e => {
+          if (e.key === "Enter") {
+            onChange(draft);
+            setEditing(false);
+          }
+          if (e.key === "Escape") {
+            setDraft(value);
+            setEditing(false);
+          }
+        },
+        placeholder: placeholder,
+        "aria-label": placeholder,
+        className: 'bg-transparent glass-border glass-border-white/20 glass-radius-lg glass-px-2 glass-py-1 glass-text-sm outline-none glass-focus glass-touch-target glass-contrast-guard'
+      }), jsx(GlassButton, {
+        size: "sm",
+        variant: "primary",
+        onClick: e => {
+          onChange(draft);
+          setEditing(false);
+        },
+        "aria-label": "Save changes",
+        className: "glass-focus glass-touch-target",
+        children: "Save"
+      }), jsx(GlassButton, {
+        size: "sm",
+        variant: "ghost",
+        onClick: e => {
+          setDraft(value);
+          setEditing(false);
+        },
+        "aria-label": "Cancel editing",
+        className: "glass-focus glass-touch-target",
+        children: "Cancel"
+      })]
+    }) : jsx("button", {
+      className: 'glass-px-2 glass-py-1 glass-radius-lg hover:glass-surface-subtle/10 glass-text-sm glass-focus glass-touch-target glass-contrast-guard',
+      onClick: e => setEditing(true),
+      "aria-label": `Edit ${value || placeholder}`,
+      children: value || jsx("span", {
+        className: 'text-primary/60',
+        children: placeholder
+      })
+    })
+  });
+}
+
+export { GlassInlineEdit, GlassInlineEdit as default };
+//# sourceMappingURL=GlassInlineEdit.js.map