@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/ui/components/HorizontalScroller.js

@@ -1,9 +1,28 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useCallback, } from "react";
+import { useRef, useState, useEffect, useCallback, cloneElement, } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+const BREAKPOINTS = [
+    ["2xl", 1536],
+    ["xl", 1280],
+    ["lg", 1024],
+    ["md", 768],
+    ["sm", 640],
+    ["xs", 480],
+    ["base", 0],
+];
+function resolvePerView(perView, containerWidth) {
+    if (typeof perView === "number")
+        return perView;
+    for (const [key, minWidth] of BREAKPOINTS) {
+        if (containerWidth >= minWidth && perView[key] !== undefined) {
+            return perView[key];
+        }
+    }
+    return 1;
+}
 export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, itemClassName = "", }) {
-    void perView;
-    void rows;
+    const [itemWidth, setItemWidth] = useState(undefined);
     const internalRef = useRef(null);
     const containerRef = (externalRef ??
         internalRef);
@@ -21,7 +40,24 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         autoScrollTimer.current = setInterval(() => scrollBy(1), autoScrollInterval);
         return () => clearInterval(autoScrollTimer.current);
     }, [autoScroll, autoScrollInterval, scrollBy]);
-    const itemsMode = items != null && renderItem != null;
+    useEffect(() => {
+        if (!perView)
+            return;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            const w = entry.contentRect.width;
+            const count = resolvePerView(perView, w);
+            if (count > 0) {
+                setItemWidth((w - (count - 1) * gap) / count);
+            }
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [perView, gap, containerRef]);
+    const normalizedItems = Array.isArray(items) ? items : [];
+    const itemsMode = Array.isArray(items) && renderItem != null;
     const scrollerCls = [
         "appkit-hscroller__track",
         snapToItems ? "appkit-hscroller__track--snap" : "",
@@ -29,19 +65,54 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
     ]
         .filter(Boolean)
         .join(" ");
-    const content = itemsMode
-        ? items.map((item, i) => (_jsx("div", { className: [
-                "appkit-hscroller__item",
-                snapToItems ? "appkit-hscroller__item--snap" : "",
-                itemClassName,
-            ]
-                .filter(Boolean)
-                .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i)))
-        : children;
+    const content = itemsMode ? (rows > 1 ? (
+    // Grid mode: group items into slides with rows x cols
+    // On mobile: 1 card centered, on larger screens: 2x3 grid
+    normalizedItems.reduce((slides, item, i) => {
+        const cardsPerSlide = 6; // Always 6 cards per slide (2x3 grid)
+        const slideIndex = Math.floor(i / cardsPerSlide);
+        const itemInSlide = i % cardsPerSlide;
+        const rowIndex = Math.floor(itemInSlide / 3);
+        const colIndex = itemInSlide % 3;
+        if (!slides[slideIndex]) {
+            slides[slideIndex] = (_jsx("div", { className: "appkit-hscroller__slide grid grid-cols-1 sm:grid-cols-3 gap-4 place-items-center sm:place-items-start", style: { gap: `${gap}px`, width: "100%", flexShrink: 0 }, children: Array.from({ length: 6 }, (_, idx) => (_jsx("div", { className: "appkit-hscroller__item-placeholder w-full sm:w-auto" }, `placeholder-${idx}`))) }, `slide-${slideIndex}`));
+        }
+        // Replace placeholder with actual item
+        const slideElement = slides[slideIndex];
+        const gridIndex = rowIndex * 3 + colIndex;
+        const childrenArr = slideElement.props.children ?? [];
+        if (childrenArr[gridIndex]) {
+            const newChildren = [...childrenArr];
+            newChildren[gridIndex] = (_jsx("div", { className: [
+                    "appkit-hscroller__item",
+                    snapToItems ? "appkit-hscroller__item--snap" : "",
+                    itemClassName,
+                    "w-full sm:w-auto",
+                ]
+                    .filter(Boolean)
+                    .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i));
+            slides[slideIndex] = cloneElement(slideElement, {
+                children: newChildren,
+            });
+        }
+        return slides;
+    }, [])) : (
+    // Single row mode
+    normalizedItems.map((item, i) => (_jsx("div", { className: [
+            "appkit-hscroller__item",
+            snapToItems ? "appkit-hscroller__item--snap" : "",
+            itemClassName,
+        ]
+            .filter(Boolean)
+            .join(" "), style: itemWidth !== undefined
+            ? { width: itemWidth, flexShrink: 0 }
+            : minItemWidth
+                ? { minWidth: minItemWidth }
+                : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i))))) : children;
     if (showArrows) {
         return (_jsxs("div", { className: ["appkit-hscroller appkit-hscroller--with-arrows", className]
                 .filter(Boolean)
-                .join(" "), children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize}`, children: "<" }), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, children: content }), _jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize}`, children: ">" })] }));
+                .join(" "), "data-section": "horizontalscroller-div-511", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), _jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] }));
     }
-    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px` }, children: content })] }));
+    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), "data-section": "horizontalscroller-div-513", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("div", { ref: containerRef, onScroll: onScroll, className: scrollerCls, style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content })] }));
 }

package/dist/ui/components/HorizontalScroller.style.css

@@ -1,109 +1,105 @@
-/* appkit/src/ui/components/HorizontalScroller.style.css */
-
-.appkit-hscroller {
-  position: relative;
-}
-
-/* ── Track ─────────────────────────────────────────── */
-
-.appkit-hscroller__track {
-  display: flex;
-  height: 100%;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  padding-bottom: 4px;
-}
-
-.appkit-hscroller__track--snap {
-  scroll-snap-type: x mandatory;
-}
-
-.appkit-hscroller__track--no-scrollbar {
-  scrollbar-width: none;
-}
-.appkit-hscroller__track--no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* ── Items ─────────────────────────────────────────── */
-
-.appkit-hscroller__item {
-  flex: none;
-}
-
-.appkit-hscroller__item--snap {
-  scroll-snap-align: start;
-}
-
-/* ── Arrows ────────────────────────────────────────── */
-
-.appkit-hscroller--with-arrows .appkit-hscroller__track {
-  padding-left: 36px;
-  padding-right: 36px;
-}
-
-.appkit-hscroller__arrow {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 20;
-  border-radius: 9999px;
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid #e5e7eb; /* gray-200 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 150ms;
-  cursor: pointer;
-}
-.appkit-hscroller__arrow:hover {
-  background: #ffffff;
-}
-
-.appkit-hscroller__arrow--prev { left: 0; }
-.appkit-hscroller__arrow--next { right: 0; }
-
-.appkit-hscroller__arrow--sm { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; }
-.appkit-hscroller__arrow--md { width: 2.25rem;  height: 2.25rem;  font-size: 1rem; }
-.appkit-hscroller__arrow--lg { width: 2.75rem;  height: 2.75rem;  font-size: 1.125rem; }
-
-@media (prefers-color-scheme: dark) {
-  .appkit-hscroller__arrow {
-    background: rgba(31, 41, 55, 0.9); /* gray-800/90 */
-    border-color: #374151; /* gray-700 */
-  }
-  .appkit-hscroller__arrow:hover {
-    background: #374151;
-  }
-}
-
-/* ── Fade edges ────────────────────────────────────── */
-
-.appkit-hscroller__fade {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 2rem;
-  z-index: 10;
-  pointer-events: none;
-}
-
-.appkit-hscroller__fade--left {
-  left: 0;
-  background: linear-gradient(to right, white, transparent);
-}
-
-.appkit-hscroller__fade--right {
-  right: 0;
-  background: linear-gradient(to left, white, transparent);
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-hscroller__fade--left {
-    background: linear-gradient(to right, #111827, transparent); /* gray-900 */
-  }
-  .appkit-hscroller__fade--right {
-    background: linear-gradient(to left, #111827, transparent);
-  }
-}
+/* appkit/src/ui/components/HorizontalScroller.style.css */
+
+.appkit-hscroller {
+  position: relative;
+}
+
+/* -- Track ------------------------------------------- */
+
+.appkit-hscroller__track {
+  display: flex;
+  height: 100%;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  padding-bottom: 4px;
+}
+
+.appkit-hscroller__track--snap {
+  scroll-snap-type: x mandatory;
+}
+
+.appkit-hscroller__track--no-scrollbar {
+  scrollbar-width: none;
+}
+.appkit-hscroller__track--no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* -- Items ------------------------------------------- */
+
+.appkit-hscroller__item {
+  flex: none;
+}
+
+.appkit-hscroller__item--snap {
+  scroll-snap-align: start;
+}
+
+/* -- Arrows ------------------------------------------ */
+
+.appkit-hscroller--with-arrows .appkit-hscroller__track {
+  padding-left: 36px;
+  padding-right: 36px;
+}
+
+.appkit-hscroller__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 20;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #e5e7eb; /* gray-200 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 150ms;
+  cursor: pointer;
+}
+.appkit-hscroller__arrow:hover {
+  background: #ffffff;
+}
+
+.appkit-hscroller__arrow--prev { left: 0; }
+.appkit-hscroller__arrow--next { right: 0; }
+
+.appkit-hscroller__arrow--sm { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; }
+.appkit-hscroller__arrow--md { width: 2.25rem;  height: 2.25rem;  font-size: 1rem; }
+.appkit-hscroller__arrow--lg { width: 2.75rem;  height: 2.75rem;  font-size: 1.125rem; }
+
+.dark .appkit-hscroller__arrow {
+  background: rgba(31, 41, 55, 0.9); /* gray-800/90 */
+  border-color: #374151; /* gray-700 */
+}
+.dark .appkit-hscroller__arrow:hover {
+  background: #374151;
+}
+
+/* -- Fade edges -------------------------------------- */
+
+.appkit-hscroller__fade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2rem;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.appkit-hscroller__fade--left {
+  left: 0;
+  background: linear-gradient(to right, white, transparent);
+}
+
+.appkit-hscroller__fade--right {
+  right: 0;
+  background: linear-gradient(to left, white, transparent);
+}
+
+.dark .appkit-hscroller__fade--left {
+  background: linear-gradient(to right, #111827, transparent); /* gray-900 */
+}
+.dark .appkit-hscroller__fade--right {
+  background: linear-gradient(to left, #111827, transparent);
+}

package/dist/ui/components/ImageGallery.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 export interface GalleryImage {
     src: string;
     alt: string;

package/dist/ui/components/ImageGallery.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useState, useRef, useEffect } from "react";
 import { Text } from "./Typography";
 import { Button } from "./Button";
@@ -90,9 +89,9 @@ export default function ImageGallery({ images, initialIndex = 0, showThumbnails
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentIndex, isZoomed]);
     if (images.length === 0) {
-        return (_jsx("div", { className: `appkit-image-gallery ${flex.center} p-8 ${themed.bgTertiary} rounded-lg ${className}`, children: _jsx(Text, { className: themed.textMuted, children: "No images to display" }) }));
+        return (_jsx("div", { className: `appkit-image-gallery ${flex.center} p-8 ${themed.bgTertiary} rounded-lg ${className}`, "data-section": "imagegallery-div-515", children: _jsx(Text, { className: themed.textMuted, children: "No images to display" }) }));
     }
-    return (_jsxs("div", { className: `appkit-image-gallery ${className}`, children: [_jsxs("div", { ref: imageContainerRef, className: `appkit-image-gallery__viewport ${themed.bgSecondary}`, children: [_jsxs("div", { className: "appkit-image-gallery__image-frame", children: [_jsx("div", { role: "img", "aria-label": currentImage.alt, className: "appkit-image-gallery__image", style: {
+    return (_jsxs("div", { className: `appkit-image-gallery ${className}`, "data-section": "imagegallery-div-516", children: [_jsxs("div", { ref: imageContainerRef, className: `appkit-image-gallery__viewport ${themed.bgSecondary}`, "data-section": "imagegallery-div-517", children: [_jsxs("div", { className: "appkit-image-gallery__image-frame", "data-section": "imagegallery-div-518", children: [_jsx("div", { role: "img", "aria-label": currentImage.alt, className: "appkit-image-gallery__image", style: {
                                     backgroundImage: `url(${currentImage.src})`,
                                     transform: `scale(${scale})`,
                                     cursor: allowZoom
@@ -100,9 +99,9 @@ export default function ImageGallery({ images, initialIndex = 0, showThumbnails
                                             ? "zoom-out"
                                             : "zoom-in"
                                         : "default",
-                                } }), images.length > 1 && !isZoomed && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: goToPrevious, disabled: currentIndex === 0, className: `appkit-image-gallery__nav-btn appkit-image-gallery__nav-btn--prev ${themed.bgSecondary} ${themed.textPrimary}`, "aria-label": "Previous image", children: _jsx("svg", { className: "w-5 h-5 md:w-6 md:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", onClick: goToNext, disabled: currentIndex === images.length - 1, className: `appkit-image-gallery__nav-btn appkit-image-gallery__nav-btn--next ${themed.bgSecondary} ${themed.textPrimary}`, "aria-label": "Next image", children: _jsx("svg", { className: "w-5 h-5 md:w-6 md:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] })), images.length > 1 && (_jsxs("div", { className: `appkit-image-gallery__counter ${themed.bgSecondary} ${themed.textPrimary}`, children: [currentIndex + 1, " / ", images.length] })), allowZoom && isZoomed && (_jsxs("div", { className: `appkit-image-gallery__zoom-indicator ${themed.bgSecondary} ${themed.textPrimary}`, children: [Math.round(scale * 100), "%"] }))] }), showCaptions && currentImage.caption && (_jsx("div", { className: `appkit-image-gallery__caption ${themed.border}`, children: _jsx(Text, { className: themed.textSecondary, children: currentImage.caption }) }))] }), showThumbnails && images.length > 1 && (_jsx(HorizontalScroller, { snapToItems: true, className: "mt-4 pb-2", children: images.map((image, index) => (_jsx(Button, { variant: "ghost", onClick: () => goToIndex(index), className: `appkit-image-gallery__thumbnail ${index === currentIndex
+                                } }), images.length > 1 && !isZoomed && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: goToPrevious, disabled: currentIndex === 0, className: `appkit-image-gallery__nav-btn appkit-image-gallery__nav-btn--prev ${themed.bgSecondary} ${themed.textPrimary}`, "aria-label": "Previous image", children: _jsx("svg", { className: "w-5 h-5 md:w-6 md:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", onClick: goToNext, disabled: currentIndex === images.length - 1, className: `appkit-image-gallery__nav-btn appkit-image-gallery__nav-btn--next ${themed.bgSecondary} ${themed.textPrimary}`, "aria-label": "Next image", children: _jsx("svg", { className: "w-5 h-5 md:w-6 md:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] })), images.length > 1 && (_jsxs("div", { className: `appkit-image-gallery__counter ${themed.bgSecondary} ${themed.textPrimary}`, "data-section": "imagegallery-div-519", children: [currentIndex + 1, " / ", images.length] })), allowZoom && isZoomed && (_jsxs("div", { className: `appkit-image-gallery__zoom-indicator ${themed.bgSecondary} ${themed.textPrimary}`, "data-section": "imagegallery-div-520", children: [Math.round(scale * 100), "%"] }))] }), showCaptions && currentImage.caption && (_jsx("div", { className: `appkit-image-gallery__caption ${themed.border}`, "data-section": "imagegallery-div-521", children: _jsx(Text, { className: themed.textSecondary, children: currentImage.caption }) }))] }), showThumbnails && images.length > 1 && (_jsx(HorizontalScroller, { snapToItems: true, className: "mt-4 pb-2", children: images.map((image, index) => (_jsx(Button, { variant: "ghost", onClick: () => goToIndex(index), className: `appkit-image-gallery__thumbnail ${index === currentIndex
                         ? "appkit-image-gallery__thumbnail--active"
-                        : themed.border}`, "aria-label": `View image ${index + 1}`, children: _jsx(MediaImage, { src: image.thumbnail || image.src, alt: image.alt, size: "thumbnail", className: "w-full h-full object-cover" }) }, index))) })), _jsx("div", { className: `appkit-image-gallery__help ${themed.textMuted}`, children: allowZoom
+                        : themed.border}`, "aria-label": `View image ${index + 1}`, children: _jsx(MediaImage, { src: image.thumbnail || image.src, alt: image.alt, size: "thumbnail", className: "w-full h-full object-cover" }) }, index))) })), _jsx("div", { className: `appkit-image-gallery__help ${themed.textMuted}`, "data-section": "imagegallery-div-522", children: allowZoom
                     ? "Swipe to navigate • Double tap to zoom"
                     : "Swipe to navigate" })] }));
 }

package/dist/ui/components/ImageLightbox.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 /**
  * ImageLightbox — full-screen image overlay with keyboard navigation.

package/dist/ui/components/ImageLightbox.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ChevronLeft, ChevronRight, X, ZoomIn } from "lucide-react";
@@ -57,5 +56,5 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
         return null;
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
-    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "absolute top-4 right-4 z-10 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/50 text-white flex items-center justify-center", "aria-label": "Close lightbox", children: _jsx(X, { className: "w-7 h-7" }) }), hasMultiple && (_jsxs("div", { className: "appkit-lightbox__counter", children: [currentIndex + 1, " / ", images.length] })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false }), _jsxs("div", { className: "appkit-lightbox__zoom-hint", children: [_jsx(ZoomIn, { className: "w-4 h-4" }), _jsx(Span, { className: "text-xs", children: "Scroll to zoom" })] })] }), image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "flex-shrink-0 !text-white/70 text-center px-8 pb-4", children: image.caption })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(1), className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Next image", children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }), document.body);
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, "data-section": "imagelightbox-div-523", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "absolute top-4 right-4 z-10 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/50 text-white flex items-center justify-center", "aria-label": "Close lightbox", children: _jsx(X, { className: "w-7 h-7" }) }), hasMultiple && (_jsxs("div", { className: "appkit-lightbox__counter", "data-section": "imagelightbox-div-524", children: [currentIndex + 1, " / ", images.length] })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", "data-section": "imagelightbox-div-525", children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false }), _jsxs("div", { className: "appkit-lightbox__zoom-hint", "data-section": "imagelightbox-div-526", children: [_jsx(ZoomIn, { className: "w-4 h-4" }), _jsx(Span, { className: "text-xs", children: "Scroll to zoom" })] })] }), image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "flex-shrink-0 !text-white/70 text-center px-8 pb-4", children: image.caption })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(1), className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Next image", children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }), document.body);
 }

package/dist/ui/components/ImageLightbox.style.css

@@ -12,7 +12,7 @@
   outline: none;
 }
 
-/* ── Counter ───────────────────────────────────────── */
+/* -- Counter ----------------------------------------- */
 
 .appkit-lightbox__counter {
   position: absolute;
@@ -24,7 +24,7 @@
   font-weight: 500;
 }
 
-/* ── Image area ────────────────────────────────────── */
+/* -- Image area -------------------------------------- */
 
 .appkit-lightbox__image-wrap {
   flex: 1;
@@ -44,7 +44,7 @@
   user-select: none;
 }
 
-/* ── Zoom hint ─────────────────────────────────────── */
+/* -- Zoom hint --------------------------------------- */
 
 .appkit-lightbox__zoom-hint {
   position: absolute;

package/dist/ui/components/Input.js

@@ -24,6 +24,6 @@ export const Input = React.forwardRef(function Input({ label, error, helperText,
     }
     const adornment = rightIcon ??
         (success && !error ? (_jsx("svg", { className: "h-4 w-4 text-green-600 dark:text-green-400", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.414-1.42l2.493 2.494 6.493-6.494a1 1 0 011.415 0z", clipRule: "evenodd" }) })) : null);
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", children: [icon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-500", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+    return (_jsxs("div", { className: "w-full", "data-section": "input-div-527", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsxs("div", { className: "relative", "data-section": "input-div-528", children: [icon && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "input-div-529", children: icon })), _jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }), adornment && (_jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "input-div-530", children: adornment }))] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "mt-1.5", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
 });
 Input.displayName = "Input";

package/dist/ui/components/Layout.d.ts

@@ -13,10 +13,10 @@ import React from "react";
  * @example
  * ```tsx
  * // Before
- * <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- * <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
- * <div className="flex flex-row items-center justify-between gap-2">
- * <div className="flex flex-col gap-4">
+ * <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-section="layout-div-531">
+ * <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-532">
+ * <div className="flex flex-row items-center justify-between gap-2" data-section="layout-div-533">
+ * <div className="flex flex-col gap-4" data-section="layout-div-534">
  *
  * // After
  * <Container>
@@ -184,7 +184,7 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
 }
 export declare function Container({ size, as, className, children, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Vertical flex column. Use instead of `<div className="flex flex-col gap-4">`.
+ * Vertical flex column. Use instead of `<div className="flex flex-col gap-4" data-section="layout-div-535">`.
  *
  * @example
  * ```tsx
@@ -212,7 +212,7 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement> {
 }
 export declare function Stack({ gap, centered, align, as, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Horizontal flex row. Use instead of `<div className="flex items-center gap-3">`.
+ * Horizontal flex row. Use instead of `<div className="flex items-center gap-3" data-section="layout-div-536">`.
  *
  * @example
  * ```tsx
@@ -244,7 +244,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement> {
 }
 export declare function Row({ gap, centered, align, justify, wrap, as, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">`.
+ * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-537">`.
  *
  * @example
  * ```tsx

package/dist/ui/components/Layout.js

@@ -13,10 +13,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @example
  * ```tsx
  * // Before
- * <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- * <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
- * <div className="flex flex-row items-center justify-between gap-2">
- * <div className="flex flex-col gap-4">
+ * <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-section="layout-div-531">
+ * <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-532">
+ * <div className="flex flex-row items-center justify-between gap-2" data-section="layout-div-533">
+ * <div className="flex flex-col gap-4" data-section="layout-div-534">
  *
  * // After
  * <Container>
@@ -25,7 +25,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * <Stack gap="md">
  * ```
  */
-// ─── Token maps ──────────────────────────────────────────────────────────────
+// --- Token maps --------------------------------------------------------------
 /**
  * Gap tokens — maps to `gap-*` Tailwind classes.
  * Mirrors THEME_CONSTANTS.spacing.gap in the host app.

package/dist/ui/components/ListingLayout.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 /**
  * ListingLayout
  *
@@ -6,17 +5,17 @@ import "client-only";
  * and user. Provides a sticky toolbar with search, sort, view-toggle, filter
  * sidebar (desktop), filter overlay (mobile), and bulk-action bar.
  *
- *  ┌──────────────────────────────────────────────────────────────────┐
+ *  ┌------------------------------------------------------------------┐
  *  │ [headerSlot — PageHeader / Heading + subtitle]                  │
- *  ├──────────────────────────────────────────────────────────────────┤
+ *  ├------------------------------------------------------------------┤
  *  │ [statusTabsSlot — status filter tabs]                           │
- *  ├──────────────────────────────────────────────────────────────────┤
- *  │ STICKY ─────────────────────────────────────────────────────── │
+ *  ├------------------------------------------------------------------┤
+ *  │ STICKY ------------------------------------------------------- │
  *  │ [Filters] [searchSlot] [viewToggle] [sortSlot] [acts] [page]   │
- *  ├──────────┬───────────────────────────────────────────────────────┤
+ *  ├----------┬-------------------------------------------------------┤
  *  │ Filters  │  [activeFiltersSlot — chips]                         │
  *  │ (sidebar)│  [DataTable / ProductGrid / card list — children]    │
- *  └──────────┴───────────────────────────────────────────────────────┘
+ *  └----------┴-------------------------------------------------------┘
  */
 import { ReactNode } from "react";
 import type { BulkActionItem } from "./BulkActionBar";
@@ -45,6 +44,8 @@ export interface ListingLayoutProps {
     selectedCount?: number;
     onClearSelection?: () => void;
     bulkActionItems?: BulkActionItem[];
+    /** "Showing 1-24 of 128" or similar — rendered above content, below active filters. */
+    resultCountSlot?: ReactNode;
     toolbarPaginationSlot?: ReactNode;
     paginationSlot?: ReactNode;
     children: ReactNode;
@@ -52,9 +53,11 @@ export interface ListingLayoutProps {
      *  When false, accounts for a top navbar above (top-14/top-[120px]). */
     isDashboard?: boolean;
     defaultSidebarOpen?: boolean;
+    /** Count of filter changes staged but not yet committed. Shows in Apply button. */
+    filterPendingCount?: number;
     className?: string;
     loading?: boolean;
     errorSlot?: ReactNode;
     labels?: ListingLayoutLabels;
 }
-export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, className, loading, errorSlot, labels, }: ListingLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, filterPendingCount, className, loading, errorSlot, labels, }: ListingLayoutProps): import("react/jsx-runtime").JSX.Element;