@soulbatical/tetra-ui 0.1.13 → 0.1.15

package/dist/components/InfiniteGrid.d.ts

@@ -0,0 +1,62 @@
+import React, { type ReactNode } from "react";
+export interface InfiniteGridProps<TItem> {
+    /** Items to render */
+    items: TItem[];
+    /** Render function for each item */
+    renderItem: (item: TItem, index: number) => ReactNode;
+    /** Number of grid columns (responsive: 1 → sm → lg) */
+    columns?: 1 | 2 | 3 | 4;
+    /** Gap between items (Tailwind gap class number) */
+    gap?: 4 | 6 | 8;
+    /** Show initial loading state */
+    loading?: boolean;
+    /** Show loading-more indicator at bottom */
+    loadingMore?: boolean;
+    /** Whether more items can be loaded */
+    hasMore?: boolean;
+    /** Sentinel ref from useInfiniteScroll */
+    sentinelRef?: React.RefObject<HTMLDivElement> | ((node: HTMLDivElement | null) => void);
+    /** Number of skeleton cards to show during initial load */
+    skeletonCount?: number;
+    /** Custom skeleton element (default: animated gray box) */
+    renderSkeleton?: () => ReactNode;
+    /** Skeleton aspect ratio class (default: "aspect-square") */
+    skeletonAspect?: string;
+    /** Message when no items */
+    emptyMessage?: string;
+    /** Custom empty state */
+    emptyState?: ReactNode;
+    /** Total item count (for "Showing X of Y" text) */
+    totalCount?: number;
+    /** Entity name for display (e.g., "styles", "ads") */
+    entityName?: string;
+    /** Additional CSS class for the grid container */
+    className?: string;
+}
+/**
+ * InfiniteGrid — Responsive grid with built-in infinite scroll, skeletons, and empty state.
+ *
+ * Replaces the pattern of: manual grid + IntersectionObserver + skeleton array + empty div.
+ * Pair with `useInfiniteScroll` or `useInfiniteList` hook.
+ *
+ * @example
+ * ```tsx
+ * import { InfiniteGrid, useInfiniteScroll } from '@soulbatical/tetra-ui';
+ *
+ * const { sentinelRef } = useInfiniteScroll({ onLoadMore: loadMore, hasMore });
+ *
+ * <InfiniteGrid
+ *   items={styles}
+ *   renderItem={(style) => <StyleCard key={style.id} style={style} />}
+ *   columns={3}
+ *   loading={loading}
+ *   loadingMore={loadingMore}
+ *   hasMore={hasMore}
+ *   sentinelRef={sentinelRef}
+ *   totalCount={total}
+ *   entityName="styles"
+ * />
+ * ```
+ */
+export declare function InfiniteGrid<TItem>({ items, renderItem, columns, gap, loading, loadingMore, hasMore, sentinelRef, skeletonCount, renderSkeleton, skeletonAspect, emptyMessage, emptyState, totalCount, entityName, className, }: InfiniteGridProps<TItem>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InfiniteGrid.d.ts.map

package/dist/components/InfiniteGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteGrid.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,iBAAiB,CAAC,KAAK;IACtC,sBAAsB;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IAEf,oCAAoC;IACpC,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAEtD,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAExB,oDAAoD;IACpD,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEhB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC;IAExF,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,SAAS,CAAC;IAEjC,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yBAAyB;IACzB,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,EAClC,KAAK,EACL,UAAU,EACV,OAAW,EACX,GAAO,EACP,OAAe,EACf,WAAmB,EACnB,OAAe,EACf,WAAW,EACX,aAAiB,EACjB,cAAc,EACd,cAAgC,EAChC,YAA+B,EAC/B,UAAU,EACV,UAAU,EACV,UAAoB,EACpB,SAAS,GACV,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CAkD1B"}

package/dist/components/InfiniteGrid.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+// ─── Column class mapping ───────────────────────────────────
+const GRID_COLS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+};
+const GAP_CLASSES = {
+    4: "gap-4",
+    6: "gap-6",
+    8: "gap-8",
+};
+// ─── Default Skeleton ───────────────────────────────────────
+function DefaultSkeleton({ aspect }) {
+    return (_jsx("div", { className: `${aspect} animate-pulse rounded-xl bg-gray-200 dark:bg-gray-800` }));
+}
+// ─── Loading More Indicator ─────────────────────────────────
+function LoadingMoreIndicator({ entityName }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-400", children: [_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-500" }), "Loading more ", entityName, "..."] }));
+}
+// ─── Component ──────────────────────────────────────────────
+/**
+ * InfiniteGrid — Responsive grid with built-in infinite scroll, skeletons, and empty state.
+ *
+ * Replaces the pattern of: manual grid + IntersectionObserver + skeleton array + empty div.
+ * Pair with `useInfiniteScroll` or `useInfiniteList` hook.
+ *
+ * @example
+ * ```tsx
+ * import { InfiniteGrid, useInfiniteScroll } from '@soulbatical/tetra-ui';
+ *
+ * const { sentinelRef } = useInfiniteScroll({ onLoadMore: loadMore, hasMore });
+ *
+ * <InfiniteGrid
+ *   items={styles}
+ *   renderItem={(style) => <StyleCard key={style.id} style={style} />}
+ *   columns={3}
+ *   loading={loading}
+ *   loadingMore={loadingMore}
+ *   hasMore={hasMore}
+ *   sentinelRef={sentinelRef}
+ *   totalCount={total}
+ *   entityName="styles"
+ * />
+ * ```
+ */
+export function InfiniteGrid({ items, renderItem, columns = 3, gap = 6, loading = false, loadingMore = false, hasMore = false, sentinelRef, skeletonCount = 6, renderSkeleton, skeletonAspect = "aspect-square", emptyMessage = "No items found", emptyState, totalCount, entityName = "items", className, }) {
+    const gridClass = `grid ${GRID_COLS[columns]} ${GAP_CLASSES[gap]} ${className ?? ""}`.trim();
+    // ─── Initial Loading ──────────────────────────────
+    if (loading) {
+        return (_jsx("div", { className: gridClass, children: Array.from({ length: skeletonCount }).map((_, i) => renderSkeleton ? (_jsx(React.Fragment, { children: renderSkeleton() }, i)) : (_jsx(DefaultSkeleton, { aspect: skeletonAspect }, i))) }));
+    }
+    // ─── Empty State ──────────────────────────────────
+    if (items.length === 0) {
+        if (emptyState)
+            return _jsx(_Fragment, { children: emptyState });
+        return (_jsx("div", { className: "rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-16 text-center", children: _jsx("p", { className: "text-sm text-gray-500", children: emptyMessage }) }));
+    }
+    // ─── Grid + Sentinel ──────────────────────────────
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: gridClass, children: items.map((item, index) => renderItem(item, index)) }), hasMore && sentinelRef && (_jsx("div", { ref: sentinelRef, className: "mt-8 flex justify-center py-8", children: loadingMore && _jsx(LoadingMoreIndicator, { entityName: entityName }) })), !hasMore && items.length > 0 && totalCount !== undefined && (_jsxs("p", { className: "mt-8 text-center text-xs text-gray-400", children: ["All ", totalCount, " ", entityName, " loaded"] }))] }));
+}
+//# sourceMappingURL=InfiniteGrid.js.map

package/dist/components/InfiniteGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteGrid.js","sourceRoot":"","sources":["../../src/components/InfiniteGrid.tsx"],"names":[],"mappings":"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"}

package/dist/components/ListDetailLayout.d.ts

@@ -0,0 +1,85 @@
+import React, { type ReactNode } from "react";
+export interface ListDetailLayoutProps<TItem> {
+    /** Items to display in the list */
+    items: TItem[];
+    /** Extract unique ID from item */
+    getItemId: (item: TItem) => string;
+    /** Render a single list row */
+    renderListItem: (item: TItem, isSelected: boolean) => ReactNode;
+    /** Render the detail panel for the selected item */
+    renderDetail: (item: TItem) => ReactNode;
+    /** Currently selected item ID (controlled) */
+    selectedId?: string | null;
+    /** Called when an item is selected */
+    onSelect: (id: string | null) => void;
+    /** Action buttons at the bottom of the detail panel */
+    actions?: (item: TItem) => ReactNode;
+    /** Enable keyboard navigation with arrow keys (default: true) */
+    keyboardNav?: boolean;
+    /** Width of the detail panel (Tailwind class, default: "flex-1") */
+    detailWidth?: string;
+    /** Width of the list when detail is open (Tailwind class, default: "w-[320px] min-w-[320px]") */
+    listCompactWidth?: string;
+    /** Title shown above the list */
+    title?: string;
+    /** Subtitle / count indicator */
+    subtitle?: string;
+    /** Header actions (create button, etc.) */
+    headerActions?: ReactNode;
+    /** Show loading state */
+    loading?: boolean;
+    /** Empty state when no items */
+    emptyMessage?: string;
+    /** Infinite scroll sentinel ref */
+    sentinelRef?: React.RefObject<HTMLDivElement> | ((node: HTMLDivElement | null) => void);
+    /** Whether more items can be loaded */
+    hasMore?: boolean;
+    /** Loading more indicator */
+    loadingMore?: boolean;
+    /** Additional CSS class for the outer container */
+    className?: string;
+}
+/**
+ * ListDetailLayout — Master-detail split view (Pipedrive-style).
+ *
+ * Shows a scrollable list on the left. Clicking an item opens a detail
+ * panel on the right with a slide-in animation. Arrow keys navigate
+ * between items while the detail panel stays open.
+ *
+ * @example
+ * ```tsx
+ * import { ListDetailLayout } from '@soulbatical/tetra-ui';
+ *
+ * const [selectedId, setSelectedId] = useState<string | null>(null);
+ *
+ * <ListDetailLayout
+ *   items={leads}
+ *   getItemId={(lead) => lead.id}
+ *   selectedId={selectedId}
+ *   onSelect={setSelectedId}
+ *   renderListItem={(lead, isSelected) => (
+ *     <div className={isSelected ? 'bg-blue-50' : ''}>
+ *       <p className="font-medium">{lead.name}</p>
+ *       <p className="text-sm text-gray-500">{lead.company}</p>
+ *     </div>
+ *   )}
+ *   renderDetail={(lead) => (
+ *     <div>
+ *       <h2>{lead.name}</h2>
+ *       <p>{lead.email}</p>
+ *       <p>{lead.phone}</p>
+ *     </div>
+ *   )}
+ *   actions={(lead) => (
+ *     <>
+ *       <button onClick={() => archive(lead.id)}>Archive</button>
+ *       <button onClick={() => convert(lead.id)}>Convert to Deal</button>
+ *     </>
+ *   )}
+ *   title="Leads Inbox"
+ *   subtitle="198 leads"
+ * />
+ * ```
+ */
+export declare function ListDetailLayout<TItem>({ items, getItemId, renderListItem, renderDetail, selectedId, onSelect, actions, keyboardNav, detailWidth, listCompactWidth, title, subtitle, headerActions, loading, emptyMessage, sentinelRef, hasMore, loadingMore, className, }: ListDetailLayoutProps<TItem>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListDetailLayout.d.ts.map

package/dist/components/ListDetailLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListDetailLayout.d.ts","sourceRoot":"","sources":["../../src/components/ListDetailLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,WAAW,qBAAqB,CAAC,KAAK;IAC1C,mCAAmC;IACnC,KAAK,EAAE,KAAK,EAAE,CAAC;IAEf,kCAAkC;IAClC,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;IAEnC,+BAA+B;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEhE,oDAAoD;IACpD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC;IAEzC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B,sCAAsC;IACtC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEtC,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,SAAS,CAAC;IAErC,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC;IAExF,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,KAAK,EACL,SAAS,EACT,cAAc,EACd,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,OAAO,EACP,WAAkB,EAClB,WAAsB,EACtB,gBAA4C,EAC5C,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,YAA+B,EAC/B,WAAW,EACX,OAAe,EACf,WAAmB,EACnB,SAAS,GACV,EAAE,qBAAqB,CAAC,KAAK,CAAC,2CA6L9B"}

package/dist/components/ListDetailLayout.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useCallback, useRef } from "react";
+// ─── Close Icon ─────────────────────────────────────────────
+function CloseIcon() {
+    return (_jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+}
+function ChevronUpIcon() {
+    return (_jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) }));
+}
+function ChevronDownIcon() {
+    return (_jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) }));
+}
+// ─── Component ──────────────────────────────────────────────
+/**
+ * ListDetailLayout — Master-detail split view (Pipedrive-style).
+ *
+ * Shows a scrollable list on the left. Clicking an item opens a detail
+ * panel on the right with a slide-in animation. Arrow keys navigate
+ * between items while the detail panel stays open.
+ *
+ * @example
+ * ```tsx
+ * import { ListDetailLayout } from '@soulbatical/tetra-ui';
+ *
+ * const [selectedId, setSelectedId] = useState<string | null>(null);
+ *
+ * <ListDetailLayout
+ *   items={leads}
+ *   getItemId={(lead) => lead.id}
+ *   selectedId={selectedId}
+ *   onSelect={setSelectedId}
+ *   renderListItem={(lead, isSelected) => (
+ *     <div className={isSelected ? 'bg-blue-50' : ''}>
+ *       <p className="font-medium">{lead.name}</p>
+ *       <p className="text-sm text-gray-500">{lead.company}</p>
+ *     </div>
+ *   )}
+ *   renderDetail={(lead) => (
+ *     <div>
+ *       <h2>{lead.name}</h2>
+ *       <p>{lead.email}</p>
+ *       <p>{lead.phone}</p>
+ *     </div>
+ *   )}
+ *   actions={(lead) => (
+ *     <>
+ *       <button onClick={() => archive(lead.id)}>Archive</button>
+ *       <button onClick={() => convert(lead.id)}>Convert to Deal</button>
+ *     </>
+ *   )}
+ *   title="Leads Inbox"
+ *   subtitle="198 leads"
+ * />
+ * ```
+ */
+export function ListDetailLayout({ items, getItemId, renderListItem, renderDetail, selectedId, onSelect, actions, keyboardNav = true, detailWidth = "flex-1", listCompactWidth = "w-[320px] min-w-[320px]", title, subtitle, headerActions, loading = false, emptyMessage = "No items found", sentinelRef, hasMore = false, loadingMore = false, className, }) {
+    const listRef = useRef(null);
+    const selectedItem = items.find((item) => getItemId(item) === selectedId);
+    const isDetailOpen = selectedId !== null && selectedItem !== undefined;
+    // ─── Keyboard Navigation ──────────────────────────
+    const navigateToItem = useCallback((direction) => {
+        if (!selectedId || items.length === 0)
+            return;
+        const currentIndex = items.findIndex((item) => getItemId(item) === selectedId);
+        if (currentIndex === -1)
+            return;
+        const nextIndex = direction === "up"
+            ? Math.max(0, currentIndex - 1)
+            : Math.min(items.length - 1, currentIndex + 1);
+        if (nextIndex !== currentIndex) {
+            onSelect(getItemId(items[nextIndex]));
+            // Scroll the selected item into view in the list
+            const listEl = listRef.current;
+            if (listEl) {
+                const itemEl = listEl.querySelector(`[data-item-id="${getItemId(items[nextIndex])}"]`);
+                itemEl?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+            }
+        }
+    }, [items, selectedId, getItemId, onSelect]);
+    useEffect(() => {
+        if (!keyboardNav || !isDetailOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                navigateToItem("up");
+            }
+            else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                navigateToItem("down");
+            }
+            else if (e.key === "Escape") {
+                e.preventDefault();
+                onSelect(null);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [keyboardNav, isDetailOpen, navigateToItem, onSelect]);
+    // ─── Loading State ────────────────────────────────
+    if (loading) {
+        return (_jsx("div", { className: `flex h-full ${className ?? ""}`, children: _jsx("div", { className: "flex-1 p-6", children: _jsx("div", { className: "space-y-3", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-16 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800" }, i))) }) }) }));
+    }
+    return (_jsxs("div", { className: `flex h-full overflow-hidden ${className ?? ""}`, children: [_jsxs("div", { ref: listRef, className: `flex flex-col border-r border-gray-200 dark:border-gray-700 overflow-y-auto transition-all duration-300 ${isDetailOpen ? listCompactWidth : "flex-1"}`, children: [(title || headerActions) && (_jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3", children: [_jsxs("div", { children: [title && (_jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: title })), subtitle && (_jsx("p", { className: "text-xs text-gray-500", children: subtitle }))] }), headerActions] })), items.length === 0 ? (_jsx("div", { className: "flex-1 flex items-center justify-center p-8", children: _jsx("p", { className: "text-sm text-gray-500", children: emptyMessage }) })) : (_jsxs("div", { className: "flex-1", children: [items.map((item) => {
+                                const id = getItemId(item);
+                                const isSelected = id === selectedId;
+                                return (_jsx("button", { type: "button", "data-item-id": id, onClick: () => onSelect(isSelected ? null : id), className: `w-full text-left px-4 py-3 border-b border-gray-100 dark:border-gray-800 transition-colors ${isSelected
+                                        ? "bg-blue-50 dark:bg-blue-900/30 border-l-[3px] border-l-blue-500 pl-[13px]"
+                                        : "hover:bg-gray-50 dark:hover:bg-gray-800/50"}`, children: renderListItem(item, isSelected) }, id));
+                            }), hasMore && sentinelRef && (_jsx("div", { ref: sentinelRef, className: "py-4 flex justify-center", children: loadingMore && (_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-500" })) }))] }))] }), _jsx("div", { className: `flex flex-col overflow-hidden border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 transition-all duration-300 ${isDetailOpen ? `${detailWidth} opacity-100` : "w-0 border-l-0 opacity-0"}`, children: selectedItem && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 dark:border-gray-700 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => navigateToItem("up"), className: "rounded-md p-1.5 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 disabled:opacity-30 transition-colors", disabled: items.findIndex((item) => getItemId(item) === selectedId) === 0, "aria-label": "Previous item", children: _jsx(ChevronUpIcon, {}) }), _jsx("button", { type: "button", onClick: () => navigateToItem("down"), className: "rounded-md p-1.5 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 disabled:opacity-30 transition-colors", disabled: items.findIndex((item) => getItemId(item) === selectedId) === items.length - 1, "aria-label": "Next item", children: _jsx(ChevronDownIcon, {}) })] }), _jsx("button", { type: "button", onClick: () => onSelect(null), className: "rounded-md p-1.5 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 transition-colors", "aria-label": "Close detail", children: _jsx(CloseIcon, {}) })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: renderDetail(selectedItem) }), actions && (_jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 px-4 py-3 flex items-center gap-3", children: actions(selectedItem) }))] })) })] }));
+}
+//# sourceMappingURL=ListDetailLayout.js.map

package/dist/components/ListDetailLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListDetailLayout.js","sourceRoot":"","sources":["../../src/components/ListDetailLayout.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AA+D9E,+DAA+D;AAE/D,SAAS,SAAS;IAChB,OAAO,CACL,cAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,EAAE,GAAG,EAAE,MAAM,EAAC,cAAc,YAC9F,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAC,sBAAsB,GAAG,GAC1E,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,cAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAC,cAAc,YAC5F,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,GAChF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,CACL,cAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAC,cAAc,YAC5F,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,CAAC,EAAC,6BAA6B,GAAG,GACjF,CACP,CAAC;AACJ,CAAC;AAED,+DAA+D;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,UAAU,gBAAgB,CAAQ,EACtC,KAAK,EACL,SAAS,EACT,cAAc,EACd,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,WAAW,GAAG,QAAQ,EACtB,gBAAgB,GAAG,yBAAyB,EAC5C,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,gBAAgB,EAC/B,WAAW,EACX,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,EACnB,SAAS,GACoB;IAC7B,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,CAAC;IAC1E,MAAM,YAAY,GAAG,UAAU,KAAK,IAAI,IAAI,YAAY,KAAK,SAAS,CAAC;IAEvE,qDAAqD;IACrD,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,SAAwB,EAAE,EAAE;QAC3B,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE9C,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,CAAC;QAC/E,IAAI,YAAY,KAAK,CAAC,CAAC;YAAE,OAAO;QAEhC,MAAM,SAAS,GAAG,SAAS,KAAK,IAAI;YAClC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;QAEjD,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;YAC/B,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YAEtC,iDAAiD;YACjD,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;YAC/B,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,kBAAkB,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;gBACvF,MAAM,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACnE,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC,CACzC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1C,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;YACzC,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBACjC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,cAAc,CAAC,MAAM,CAAC,CAAC;YACzB,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1D,qDAAqD;IACrD,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cAAK,SAAS,EAAE,eAAe,SAAS,IAAI,EAAE,EAAE,YAC9C,cAAK,SAAS,EAAC,YAAY,YACzB,cAAK,SAAS,EAAC,WAAW,YACvB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvC,cAAa,SAAS,EAAC,4DAA4D,IAAzE,CAAC,CAA2E,CACvF,CAAC,GACE,GACF,GACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAE,+BAA+B,SAAS,IAAI,EAAE,EAAE,aAE9D,eACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,2GACT,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QACpC,EAAE,aAGD,CAAC,KAAK,IAAI,aAAa,CAAC,IAAI,CAC3B,eAAK,SAAS,EAAC,uIAAuI,aACpJ,0BACG,KAAK,IAAI,CACR,aAAI,SAAS,EAAC,wDAAwD,YAAE,KAAK,GAAM,CACpF,EACA,QAAQ,IAAI,CACX,YAAG,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAK,CACpD,IACG,EACL,aAAa,IACV,CACP,EAGA,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,cAAK,SAAS,EAAC,6CAA6C,YAC1D,YAAG,SAAS,EAAC,uBAAuB,YAAE,YAAY,GAAK,GACnD,CACP,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAC,QAAQ,aACpB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gCAClB,MAAM,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;gCAC3B,MAAM,UAAU,GAAG,EAAE,KAAK,UAAU,CAAC;gCAErC,OAAO,CACL,iBAEE,IAAI,EAAC,QAAQ,kBACC,EAAE,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,SAAS,EAAE,8FACT,UAAU;wCACR,CAAC,CAAC,2EAA2E;wCAC7E,CAAC,CAAC,4CACN,EAAE,YAED,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,IAV5B,EAAE,CAWA,CACV,CAAC;4BACJ,CAAC,CAAC,EAGD,OAAO,IAAI,WAAW,IAAI,CACzB,cAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,0BAA0B,YACxD,WAAW,IAAI,CACd,cAAK,SAAS,EAAC,8EAA8E,GAAG,CACjG,GACG,CACP,IACG,CACP,IACG,EAGN,cACE,SAAS,EAAE,qIACT,YAAY,CAAC,CAAC,CAAC,GAAG,WAAW,cAAc,CAAC,CAAC,CAAC,0BAChD,EAAE,YAED,YAAY,IAAI,CACf,8BAEE,eAAK,SAAS,EAAC,2FAA2F,aAExG,eAAK,SAAS,EAAC,yBAAyB,aACtC,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,SAAS,EAAC,mIAAmI,EAC7I,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,KAAK,CAAC,gBAC9D,eAAe,YAE1B,KAAC,aAAa,KAAG,GACV,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EACrC,SAAS,EAAC,mIAAmI,EAC7I,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,gBAC7E,WAAW,YAEtB,KAAC,eAAe,KAAG,GACZ,IACL,EAGN,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAC,+GAA+G,gBAC9G,cAAc,YAEzB,KAAC,SAAS,KAAG,GACN,IACL,EAGN,cAAK,SAAS,EAAC,wBAAwB,YACpC,YAAY,CAAC,YAAY,CAAC,GACvB,EAGL,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,gHAAgH,YAC5H,OAAO,CAAC,YAAY,CAAC,GAClB,CACP,IACA,CACJ,GACG,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/hooks/useInfiniteList.d.ts

@@ -0,0 +1,69 @@
+export interface UseInfiniteListOptions<TFilters extends Record<string, string>> {
+    /** API endpoint (e.g., '/api/admin/style-library') */
+    endpoint: string;
+    /** Items per page (default: 30) */
+    limit?: number;
+    /** Filter values — refetches from offset 0 when changed */
+    filters?: TFilters;
+    /** Enable/disable (default: true) */
+    enabled?: boolean;
+    /**
+     * Key in the response data object that holds the items array.
+     * Default: "items". Examples: "styles", "ads", "items"
+     */
+    dataKey?: string;
+    /**
+     * Key in the response data object that holds the total count.
+     * Default: "total"
+     */
+    totalKey?: string;
+}
+export interface UseInfiniteListResult<TItem> {
+    /** Accumulated items across all loaded pages */
+    items: TItem[];
+    /** Total count of items matching filters (from server) */
+    total: number;
+    /** Initial loading (first page) */
+    loading: boolean;
+    /** Loading additional pages */
+    loadingMore: boolean;
+    /** Whether more items can be loaded */
+    hasMore: boolean;
+    /** Sentinel ref to attach to the scroll trigger element */
+    sentinelRef: (node: HTMLDivElement | null) => void;
+    /** Manually trigger a refresh (resets to page 0) */
+    refresh: () => void;
+}
+/**
+ * useInfiniteList — Simple infinite scroll hook for REST API endpoints.
+ *
+ * A lighter alternative to `useGenericList` for pages that don't have a
+ * full FeatureConfig. Just point it at an API endpoint and it handles
+ * pagination, filter resets, and IntersectionObserver automatically.
+ *
+ * @example
+ * ```tsx
+ * import { useInfiniteList, InfiniteGrid } from '@soulbatical/tetra-ui';
+ *
+ * const { items, loading, loadingMore, hasMore, sentinelRef, total } = useInfiniteList<Style>({
+ *   endpoint: '/api/admin/style-library',
+ *   limit: 30,
+ *   filters: { category, search, complexity },
+ *   dataKey: 'styles',
+ * });
+ *
+ * return (
+ *   <InfiniteGrid
+ *     items={items}
+ *     renderItem={(style) => <StyleCard style={style} />}
+ *     loading={loading}
+ *     loadingMore={loadingMore}
+ *     hasMore={hasMore}
+ *     sentinelRef={sentinelRef}
+ *     totalCount={total}
+ *   />
+ * );
+ * ```
+ */
+export declare function useInfiniteList<TItem, TFilters extends Record<string, string> = Record<string, string>>({ endpoint, limit, filters, enabled, dataKey, totalKey, }: UseInfiniteListOptions<TFilters>): UseInfiniteListResult<TItem>;
+//# sourceMappingURL=useInfiniteList.d.ts.map

package/dist/hooks/useInfiniteList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteList.d.ts","sourceRoot":"","sources":["../../src/hooks/useInfiniteList.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAC7E,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAC;IAEjB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2DAA2D;IAC3D,OAAO,CAAC,EAAE,QAAQ,CAAC;IAEnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB,CAAC,KAAK;IAC1C,gDAAgD;IAChD,KAAK,EAAE,KAAK,EAAE,CAAC;IAEf,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IAEd,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IAEjB,+BAA+B;IAC/B,WAAW,EAAE,OAAO,CAAC;IAErB,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IAEjB,2DAA2D;IAC3D,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD,oDAAoD;IACpD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EACL,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChE,EACA,QAAQ,EACR,KAAU,EACV,OAAwB,EACxB,OAAc,EACd,OAAiB,EACjB,QAAkB,GACnB,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG,qBAAqB,CAAC,KAAK,CAAC,CA0GjE"}

package/dist/hooks/useInfiniteList.js

@@ -0,0 +1,131 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { apiClient } from "../services/apiClient.js";
+import { useInfiniteScroll } from "./useInfiniteScroll.js";
+// ─── Hook ───────────────────────────────────────────────────
+/**
+ * useInfiniteList — Simple infinite scroll hook for REST API endpoints.
+ *
+ * A lighter alternative to `useGenericList` for pages that don't have a
+ * full FeatureConfig. Just point it at an API endpoint and it handles
+ * pagination, filter resets, and IntersectionObserver automatically.
+ *
+ * @example
+ * ```tsx
+ * import { useInfiniteList, InfiniteGrid } from '@soulbatical/tetra-ui';
+ *
+ * const { items, loading, loadingMore, hasMore, sentinelRef, total } = useInfiniteList<Style>({
+ *   endpoint: '/api/admin/style-library',
+ *   limit: 30,
+ *   filters: { category, search, complexity },
+ *   dataKey: 'styles',
+ * });
+ *
+ * return (
+ *   <InfiniteGrid
+ *     items={items}
+ *     renderItem={(style) => <StyleCard style={style} />}
+ *     loading={loading}
+ *     loadingMore={loadingMore}
+ *     hasMore={hasMore}
+ *     sentinelRef={sentinelRef}
+ *     totalCount={total}
+ *   />
+ * );
+ * ```
+ */
+export function useInfiniteList({ endpoint, limit = 30, filters = {}, enabled = true, dataKey = "items", totalKey = "total", }) {
+    const [items, setItems] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const offsetRef = useRef(0);
+    const fetchingRef = useRef(false);
+    // Serialize filters for dependency tracking
+    const filterKey = JSON.stringify(filters);
+    // ─── Fetch Function ───────────────────────────────
+    const fetchPage = useCallback(async (offset, append) => {
+        if (fetchingRef.current)
+            return;
+        fetchingRef.current = true;
+        if (offset === 0)
+            setLoading(true);
+        else
+            setLoadingMore(true);
+        try {
+            const params = new URLSearchParams({
+                limit: String(limit),
+                offset: String(offset),
+            });
+            // Add non-empty filters to query
+            for (const [key, value] of Object.entries(filters)) {
+                if (value !== undefined && value !== null && value !== "") {
+                    params.set(key, value);
+                }
+            }
+            const url = `${endpoint}?${params.toString()}`;
+            const res = await apiClient.get(url);
+            if (res.success && res.data) {
+                const newItems = (res.data[dataKey] ?? res.data.items ?? res.data.data ?? []);
+                const serverTotal = res.data[totalKey] ??
+                    res.data.total ??
+                    res.data.meta?.total ??
+                    0;
+                setItems((prev) => (append ? [...prev, ...newItems] : newItems));
+                setTotal(serverTotal);
+                setHasMore(offset + newItems.length < serverTotal);
+                offsetRef.current = offset + newItems.length;
+            }
+        }
+        catch {
+            // API unavailable — keep current state
+        }
+        finally {
+            setLoading(false);
+            setLoadingMore(false);
+            fetchingRef.current = false;
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [endpoint, limit, filterKey, dataKey, totalKey]);
+    // ─── Reset on filter change ───────────────────────
+    useEffect(() => {
+        if (!enabled)
+            return;
+        offsetRef.current = 0;
+        setItems([]);
+        setHasMore(true);
+        fetchPage(0, false);
+    }, [enabled, fetchPage]);
+    // ─── Load More ────────────────────────────────────
+    const loadMore = useCallback(() => {
+        if (!hasMore || loading || loadingMore)
+            return;
+        fetchPage(offsetRef.current, true);
+    }, [hasMore, loading, loadingMore, fetchPage]);
+    // ─── Infinite Scroll ──────────────────────────────
+    const { sentinelRef } = useInfiniteScroll({
+        onLoadMore: loadMore,
+        hasMore,
+        threshold: 300,
+        enabled: enabled && !loading,
+    });
+    // ─── Manual Refresh ───────────────────────────────
+    const refresh = useCallback(() => {
+        offsetRef.current = 0;
+        setItems([]);
+        setHasMore(true);
+        fetchPage(0, false);
+    }, [fetchPage]);
+    return {
+        items,
+        total,
+        loading,
+        loadingMore,
+        hasMore,
+        sentinelRef,
+        refresh,
+    };
+}
+//# sourceMappingURL=useInfiniteList.js.map

package/dist/hooks/useInfiniteList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteList.js","sourceRoot":"","sources":["../../src/hooks/useInfiniteList.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -26,10 +26,13 @@ export { StatusBadge } from "./components/StatusBadge.js";
 export { AutoCard, type CardConfig, type AutoCardProps, type LinkComponent } from "./components/AutoCard.js";
 export { CookieConsent, type CookieConsentProps } from "./components/CookieConsent.js";
 export { OAuthButtons, type OAuthButtonsProps } from "./components/OAuthButtons.js";
+export { InfiniteGrid, type InfiniteGridProps, } from "./components/InfiniteGrid.js";
+export { ListDetailLayout, type ListDetailLayoutProps, } from "./components/ListDetailLayout.js";
 export { useDebounce } from "./hooks/useDebounce.js";
 export { useDialog } from "./hooks/useDialog.js";
 export { useIsMobile } from "./hooks/use-mobile.js";
 export { useInfiniteScroll } from "./hooks/useInfiniteScroll.js";
+export { useInfiniteList, type UseInfiniteListOptions, type UseInfiniteListResult, } from "./hooks/useInfiniteList.js";
 export { useCacheInvalidation } from "./hooks/useCacheInvalidation.js";
 export { useFormSubmit } from "./hooks/useFormSubmit.js";
 export { useQueryState } from "./hooks/useQueryState.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EACV,WAAW,EACX,QAAQ,IAAI,aAAa,EACzB,YAAY,IAAI,iBAAiB,EACjC,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,UAAU,GACX,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EACL,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,aAAa,GACd,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,gBAAgB,EAChB,KAAK,YAAY,GAClB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,KAAK,gBAAgB,GACtB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EACL,iBAAiB,EACjB,KAAK,UAAU,EACf,KAAK,sBAAsB,GAC5B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC7G,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGpF,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EACL,sBAAsB,EACtB,wBAAwB,EACxB,mBAAmB,GACpB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,GACtB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,KAAK,WAAW,GACjB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAG/E,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEjF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAGxF,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,WAAW,IAAI,kBAAkB,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,eAAe,IAAI,sBAAsB,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,iBAAiB,IAAI,wBAAwB,EAAE,QAAQ,IAAI,eAAe,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -36,11 +36,15 @@ export { StatusBadge } from "./components/StatusBadge.js";
 export { AutoCard } from "./components/AutoCard.js";
 export { CookieConsent } from "./components/CookieConsent.js";
 export { OAuthButtons } from "./components/OAuthButtons.js";
+// Layout components
+export { InfiniteGrid, } from "./components/InfiniteGrid.js";
+export { ListDetailLayout, } from "./components/ListDetailLayout.js";
 // Hooks — utility
 export { useDebounce } from "./hooks/useDebounce.js";
 export { useDialog } from "./hooks/useDialog.js";
 export { useIsMobile } from "./hooks/use-mobile.js";
 export { useInfiniteScroll } from "./hooks/useInfiniteScroll.js";
+export { useInfiniteList, } from "./hooks/useInfiniteList.js";
 export { useCacheInvalidation } from "./hooks/useCacheInvalidation.js";
 export { useFormSubmit } from "./hooks/useFormSubmit.js";
 // Hooks — query state & filters

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,8CAA8C;AAC9C,+CAA+C;AAiB/C,YAAY;AACZ,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,8DAA8D;AAC9D,OAAO,EAAE,MAAM,EAAE,cAAc,EAAoB,MAAM,2BAA2B,CAAC;AACrF,OAAO,EAAE,KAAK,EAAmB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAsB,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAmB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAmB,MAAM,0BAA0B,CAAC;AACjF,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAEjC,YAAY;AACZ,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO;AACP,OAAO,EACL,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,aAAa,GACd,MAAM,oBAAoB,CAAC;AAE5B,eAAe;AACf,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AAErC,WAAW;AACX,OAAO,EACL,SAAS,EACT,kBAAkB,GAEnB,MAAM,yBAAyB,CAAC;AAEjC,aAAa;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,yDAAyD;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EACL,iBAAiB,GAGlB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAA2D,MAAM,0BAA0B,CAAC;AAC7G,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AAEpF,kBAAkB;AAClB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,gCAAgC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EACL,sBAAsB,EACtB,wBAAwB,EACxB,mBAAmB,GACpB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GAGpB,MAAM,6BAA6B,CAAC;AAErC,mDAAmD;AACnD,OAAO,EACL,cAAc,EACd,mBAAmB,GAEpB,MAAM,2BAA2B,CAAC;AAEnC,uBAAuB;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAE/E,8DAA8D;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGhE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG1D,+DAA+D;AAC/D,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,kCAAkC,CAAC;AAE1C,+DAA+D;AAC/D,OAAO,EAAE,YAAY,EAA0B,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAyB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAgC,MAAM,oBAAoB,CAAC;AACtF,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAyB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "restricted"
   },
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Shared React frontend framework for Tetra platform projects (Soulbatical BV) — config-driven components, hooks, providers, and styling",
   "type": "module",
   "main": "dist/index.js",