@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/ui/components/HorizontalScroller.js

@@ -21,12 +21,74 @@ function resolvePerView(perView, containerWidth) {
     }
     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 = "", }) {
+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, pauseOnHover = false, itemClassName = "", loop = false, }) {
     const [itemWidth, setItemWidth] = useState(undefined);
+    const [isPaused, setIsPaused] = useState(false);
     const internalRef = useRef(null);
     const containerRef = (externalRef ??
         internalRef);
     const autoScrollTimer = useRef(undefined);
+    // Prevents re-entrant teleports during the instantaneous scrollLeft reset
+    const isJumping = useRef(false);
+    // Prevents re-running the initial scroll-to-real-start on every itemWidth update
+    const loopInitialized = useRef(false);
+    const normalizedItems = Array.isArray(items) ? items : [];
+    const itemsMode = Array.isArray(items) && renderItem != null;
+    const itemCount = normalizedItems.length;
+    // Number of clone slots on each side — fixed size, computed once from perView hint.
+    // Using Math.min so tiny lists don't double-render more slots than they have items.
+    const loopCloneCount = loop && itemsMode && itemCount > 0
+        ? Math.min(itemCount, typeof perView === "number" ? perView : 3)
+        : 0;
+    // On first paint after itemWidth resolves, scroll to the first *real* item
+    // (skipping the left clone slots that provide backward-wrap buffer).
+    useEffect(() => {
+        if (!loop || loopCloneCount === 0 || itemWidth === undefined)
+            return;
+        const el = containerRef.current;
+        if (!el || loopInitialized.current)
+            return;
+        loopInitialized.current = true;
+        el.style.scrollBehavior = "auto";
+        el.scrollLeft = loopCloneCount * (itemWidth + gap);
+        requestAnimationFrame(() => {
+            el.style.scrollBehavior = "";
+        });
+    }, [loop, loopCloneCount, itemWidth, gap, containerRef]);
+    // Circular teleporter: when scroll enters a clone zone, jump by exactly one
+    // full cycle so the viewport content is unchanged but we're back in real territory.
+    const handleScrollLoop = useCallback(() => {
+        if (!loop || loopCloneCount === 0 || itemWidth === undefined)
+            return;
+        const el = containerRef.current;
+        if (!el || isJumping.current)
+            return;
+        const stride = itemWidth + gap;
+        const cycleWidth = itemCount * stride;
+        // scrollLeft where real items start and end
+        const realStart = loopCloneCount * stride;
+        const realEnd = realStart + cycleWidth;
+        if (el.scrollLeft < realStart - stride * 0.5) {
+            // Entered left clone zone — jump forward one cycle
+            isJumping.current = true;
+            el.style.scrollBehavior = "auto";
+            el.scrollLeft += cycleWidth;
+            requestAnimationFrame(() => {
+                isJumping.current = false;
+                el.style.scrollBehavior = "";
+            });
+        }
+        else if (el.scrollLeft > realEnd - el.clientWidth + stride * 0.5) {
+            // Entered right clone zone — jump backward one cycle
+            isJumping.current = true;
+            el.style.scrollBehavior = "auto";
+            el.scrollLeft -= cycleWidth;
+            requestAnimationFrame(() => {
+                isJumping.current = false;
+                el.style.scrollBehavior = "";
+            });
+        }
+    }, [loop, loopCloneCount, itemWidth, gap, itemCount, containerRef]);
     const scrollBy = useCallback((direction) => {
         const el = containerRef.current;
         if (!el)
@@ -34,12 +96,28 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         const width = el.clientWidth;
         el.scrollBy({ left: direction * width * 0.8, behavior: "smooth" });
     }, [containerRef]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "ArrowRight") {
+            e.preventDefault();
+            scrollBy(1);
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            scrollBy(-1);
+        }
+    }, [scrollBy]);
     useEffect(() => {
-        if (!autoScroll)
+        if (!autoScroll || isPaused)
             return;
-        autoScrollTimer.current = setInterval(() => scrollBy(1), autoScrollInterval);
+        autoScrollTimer.current = setInterval(() => {
+            const el = containerRef.current;
+            if (!el)
+                return;
+            // Always advance; handleScrollLoop teleports when clone zone is reached
+            el.scrollBy({ left: el.clientWidth * 0.8, behavior: "smooth" });
+        }, autoScrollInterval);
         return () => clearInterval(autoScrollTimer.current);
-    }, [autoScroll, autoScrollInterval, scrollBy]);
+    }, [autoScroll, isPaused, autoScrollInterval, containerRef]);
     useEffect(() => {
         if (!perView)
             return;
@@ -56,20 +134,10 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         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" : "",
-        !showScrollbar ? "appkit-hscroller__track--no-scrollbar" : "",
-    ]
-        .filter(Boolean)
-        .join(" ");
     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 cardsPerSlide = 6;
         const slideIndex = Math.floor(i / cardsPerSlide);
         const itemInSlide = i % cardsPerSlide;
         const rowIndex = Math.floor(itemInSlide / 3);
@@ -77,7 +145,6 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         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 ?? [];
@@ -96,8 +163,29 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             });
         }
         return slides;
-    }, [])) : (
-    // Single row mode
+    }, [])) : loop && itemCount > 0 ? (
+    // Circular loop: fixed (itemCount + 2×loopCloneCount) DOM slots.
+    // Each slot maps to a real item via modulo — no array cloning, no list growth.
+    // Left slots  [0 .. loopCloneCount-1]              → tail of real list (left buffer)
+    // Real slots  [loopCloneCount .. loopCloneCount+n-1] → items[0..n-1]
+    // Right slots [loopCloneCount+n .. end]             → head of real list (right buffer)
+    Array.from({ length: itemCount + 2 * loopCloneCount }, (_, i) => {
+        const realIndex = ((i - loopCloneCount) % itemCount + itemCount) % itemCount;
+        const item = normalizedItems[realIndex];
+        const isClone = i < loopCloneCount || i >= loopCloneCount + itemCount;
+        return (_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, "aria-hidden": isClone ? true : undefined, children: renderItem(item, realIndex) }, `loop-slot-${i}`));
+    })) : (
+    // Normal single row (no loop)
     normalizedItems.map((item, i) => (_jsx("div", { className: [
             "appkit-hscroller__item",
             snapToItems ? "appkit-hscroller__item--snap" : "",
@@ -108,11 +196,32 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             ? { width: itemWidth, flexShrink: 0 }
             : minItemWidth
                 ? { minWidth: minItemWidth }
-                : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i))))) : children;
+                : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i))))) : (children);
+    const hoverHandlers = pauseOnHover
+        ? {
+            onMouseEnter: () => setIsPaused(true),
+            onMouseLeave: () => setIsPaused(false),
+        }
+        : {};
+    const combinedOnScroll = loop
+        ? () => {
+            handleScrollLoop();
+            onScroll?.();
+        }
+        : onScroll;
     if (showArrows) {
         return (_jsxs("div", { className: ["appkit-hscroller appkit-hscroller--with-arrows", className]
                 .filter(Boolean)
-                .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" }) })] }));
+                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...hoverHandlers, "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: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), 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(" "), "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 })] }));
+    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...hoverHandlers, "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: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content })] }));
+}
+function scrollerCls(snapToItems, showScrollbar) {
+    return [
+        "appkit-hscroller__track",
+        snapToItems ? "appkit-hscroller__track--snap" : "",
+        !showScrollbar ? "appkit-hscroller__track--no-scrollbar" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
 }

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

@@ -98,8 +98,8 @@
 }
 
 .dark .appkit-hscroller__fade--left {
-  background: linear-gradient(to right, #111827, transparent); /* gray-900 */
+  background: linear-gradient(to right, #0f172a, transparent); /* slate-900 — matches surface dark */
 }
 .dark .appkit-hscroller__fade--right {
-  background: linear-gradient(to left, #111827, transparent);
+  background: linear-gradient(to left, #0f172a, transparent);
 }

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

@@ -1,13 +1,4 @@
 import React from "react";
-/**
- * ImageLightbox — full-screen image overlay with keyboard navigation.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Navigation: ← / → arrow keys, Esc to close. Displays item counter.
- *
- * Uses a standard <img> tag for framework portability.
- * In a Next.js app, callers may swap src with a blurDataURL if desired.
- */
 export interface LightboxImage {
     src: string;
     alt?: string;

package/dist/ui/components/ImageLightbox.js

@@ -2,16 +2,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { ChevronLeft, ChevronRight, X, ZoomIn } from "lucide-react";
+import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut, RotateCw, Maximize2 } from "lucide-react";
 import { Button } from "./Button";
 import { Text, Span } from "./Typography";
+const MIN_ZOOM = 10;
+const MAX_ZOOM = 300;
+const ZOOM_STEP = 20;
 export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
     const [currentIndex, setCurrentIndex] = useState(activeIndex ?? 0);
+    const [zoom, setZoom] = useState(100);
+    const [rotation, setRotation] = useState(0);
     const overlayRef = useRef(null);
-    // Sync external activeIndex
+    // Sync external activeIndex and reset transforms
     useEffect(() => {
         if (activeIndex !== null && activeIndex >= 0) {
             setCurrentIndex(activeIndex);
+            setZoom(100);
+            setRotation(0);
         }
     }, [activeIndex]);
     const isOpen = activeIndex !== null && activeIndex >= 0 && images.length > 0;
@@ -21,9 +28,7 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
             return;
         const prev = document.body.style.overflow;
         document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = prev;
-        };
+        return () => { document.body.style.overflow = prev; };
     }, [isOpen]);
     const navigate = useCallback((dir) => {
         setCurrentIndex((prev) => {
@@ -31,7 +36,16 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
             onNavigate?.(next);
             return next;
         });
+        setZoom(100);
+        setRotation(0);
     }, [images.length, onNavigate]);
+    const adjustZoom = useCallback((delta) => {
+        setZoom((z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z + delta)));
+    }, []);
+    const handleWheel = useCallback((e) => {
+        e.preventDefault();
+        adjustZoom(e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
+    }, [adjustZoom]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === "Escape") {
             onClose();
@@ -45,16 +59,36 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
             navigate(1);
             return;
         }
-    }, [onClose, navigate]);
+        if (e.key === "+") {
+            adjustZoom(ZOOM_STEP);
+            return;
+        }
+        if (e.key === "-") {
+            adjustZoom(-ZOOM_STEP);
+            return;
+        }
+        if (e.key === "r" || e.key === "R") {
+            setRotation((r) => (r + 90) % 360);
+            return;
+        }
+        if (e.key === "0") {
+            setZoom(100);
+            setRotation(0);
+            return;
+        }
+    }, [onClose, navigate, adjustZoom]);
     // Focus overlay on open for keyboard to work
     useEffect(() => {
-        if (isOpen) {
+        if (isOpen)
             requestAnimationFrame(() => overlayRef.current?.focus());
-        }
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined")
         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, "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);
+    const iconBtnClass = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white flex items-center justify-center";
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { className: "text-white/70 text-sm font-medium", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/60 text-white flex items-center justify-center", "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), 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" }) })), _jsx("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: _jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, style: {
+                        transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
+                        transition: "transform 0.2s ease",
+                    } }) }), 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" }) })), _jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-white/30 text-[11px] flex gap-4", children: [_jsx("span", { children: "\u2190 \u2192 navigate" }), _jsx("span", { children: "scroll to zoom" }), _jsx("span", { children: "R to rotate" }), _jsx("span", { children: "0 to reset" })] })] }), document.body);
 }

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

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import type { DynamicSelectOption, DynamicSelectProps } from "./DynamicSelect";
+export interface InlineCreateSelectProps<V = string> extends DynamicSelectProps<V> {
+    /** Label for the "+ Create new …" button shown at the bottom of the dropdown. */
+    createLabel?: string;
+    /** Title shown in the SideDrawer header. Defaults to `createLabel`. */
+    drawerTitle?: string;
+    /**
+     * Render prop for the create form inside the SideDrawer.
+     * Call `onCreated` with the new option to close the drawer and auto-select it.
+     * Call `onCancel` to discard and close.
+     */
+    renderCreateForm?: (props: {
+        onCreated: (option: DynamicSelectOption<V>) => void;
+        onCancel: () => void;
+    }) => ReactNode;
+}
+/**
+ * InlineCreateSelect — extends DynamicSelect with a "+ Create new" button
+ * that opens a SideDrawer containing an inline create form.
+ *
+ * @example
+ * ```tsx
+ * <InlineCreateSelect
+ *   value={categoryId}
+ *   onChange={(v) => setCategoryId(v)}
+ *   loadOptions={loadCategoryOptions}
+ *   createLabel="Category"
+ *   renderCreateForm={({ onCreated, onCancel }) => (
+ *     <CategoryForm
+ *       onSuccess={(cat) => onCreated({ value: cat.id, label: cat.name })}
+ *       onCancel={onCancel}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare function InlineCreateSelect<V = string>({ createLabel, drawerTitle, renderCreateForm, onChange, options, loadOptions, ...selectProps }: InlineCreateSelectProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/InlineCreateSelect.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DynamicSelect } from "./DynamicSelect";
+import { SideDrawer } from "./SideDrawer";
+import { Button } from "./Button";
+/**
+ * InlineCreateSelect — extends DynamicSelect with a "+ Create new" button
+ * that opens a SideDrawer containing an inline create form.
+ *
+ * @example
+ * ```tsx
+ * <InlineCreateSelect
+ *   value={categoryId}
+ *   onChange={(v) => setCategoryId(v)}
+ *   loadOptions={loadCategoryOptions}
+ *   createLabel="Category"
+ *   renderCreateForm={({ onCreated, onCancel }) => (
+ *     <CategoryForm
+ *       onSuccess={(cat) => onCreated({ value: cat.id, label: cat.name })}
+ *       onCancel={onCancel}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCreateForm, onChange, options, loadOptions, ...selectProps }) {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    function handleCreated(option) {
+        setDrawerOpen(false);
+        onChange?.(option.value, option);
+    }
+    function handleCancel() {
+        setDrawerOpen(false);
+    }
+    // Inject a synthetic "+ Create new" sentinel option at the end of the static list.
+    // For async (loadOptions) mode we append the action after the list via a wrapper.
+    const CREATE_SENTINEL = "__inline_create__";
+    const augmentedOptions = renderCreateForm
+        ? [
+            ...(options ?? []),
+            {
+                value: CREATE_SENTINEL,
+                label: `+ Create new ${createLabel}`,
+            },
+        ]
+        : options;
+    // For async mode, wrap loadOptions to append the sentinel after each page.
+    const augmentedLoadOptions = renderCreateForm && loadOptions
+        ? async (query, page) => {
+            const result = await loadOptions(query, page);
+            const sentinel = {
+                value: CREATE_SENTINEL,
+                label: `+ Create new ${createLabel}`,
+            };
+            return {
+                ...result,
+                items: [...result.items, sentinel],
+            };
+        }
+        : loadOptions;
+    function handleChange(value, option) {
+        if (value === CREATE_SENTINEL) {
+            setDrawerOpen(true);
+            return;
+        }
+        onChange?.(value, option);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicSelect, { ...selectProps, options: augmentedOptions, loadOptions: augmentedLoadOptions, onChange: handleChange }), renderCreateForm ? (_jsx(SideDrawer, { isOpen: drawerOpen, onClose: handleCancel, title: drawerTitle ?? `Create ${createLabel}`, mode: "create", footer: _jsx(Button, { variant: "ghost", onClick: handleCancel, children: "Cancel" }), children: renderCreateForm({ onCreated: handleCreated, onCancel: handleCancel }) })) : null] }));
+}