@airoom/nextmin-react 1.4.6 → 2.0.1

package/README.md

@@ -12,9 +12,11 @@ Read the full documentation at: https://nextmin.gscodes.dev/
 
 ## Features
 
-- `<NextMinProvider>`: initializes store, loads schemas, and opens a live socket
+- `<NextMinProvider>`: initializes store, loads schemas, and **automatically** manages live socket connections
 - `<AdminApp>`: full admin shell with auth, sidebar, dashboard, list/create/edit, profile, settings
-- Built‑in router: `<NextMinRouter>` and `<AdminRouteNormalizer>` for admin routes
+- **Realtime Hooks**: Use `useRealtime()` to consume live backend emissions in any custom component
+- **Rich Editor Support**: Native Tiptap integration via `"rich": true` in schemas
+- **Meta Tags & SEO**: Built-in support for metadata fields within auto-generated forms
 - Components: Sidebar, SchemaForm, FileUploader, reference selectors, phone/password inputs, table & filters
 - Hooks/utils: Google address autocomplete, list data helpers, formatters
 - Styling included; no extra CSS import needed
@@ -63,7 +65,31 @@ Wrap only the admin area with the provider and render the AdminApp. Mark these f
 import { NextMinProvider } from '@airoom/nextmin-react';
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
-  return <NextMinProvider>{children}</NextMinProvider>;
+  return (
+    <NextMinProvider 
+      apiUrl={process.env.NEXT_PUBLIC_NEXTMIN_API_URL} 
+      apiKey={process.env.NEXT_PUBLIC_NEXTMIN_API_KEY}
+    >
+      {children}
+    </NextMinProvider>
+  );
+}
+```
+
+### Realtime Hook Example
+
+```tsx
+import { useRealtime } from '@airoom/nextmin-react';
+
+export function MyLiveComponent() {
+    const { isConnected, lastEvent } = useRealtime();
+
+    return (
+        <div>
+            Status: {isConnected ? 'Online' : 'Offline'}
+            {lastEvent && <p>Latest Activity: {lastEvent.event}</p>}
+        </div>
+    );
 }
 ```
 

package/dist/auth/SignInForm.js

@@ -5,6 +5,8 @@ import { Card, CardHeader, CardBody, Input, Button, Link, Form, } from '@heroui/
 import { useDispatch } from 'react-redux';
 import { setSession } from '../state/sessionSlice';
 import { login as loginApi } from '../lib/auth';
+import { AuthClient } from '../lib/AuthClient';
+import { RealtimeClient } from '../lib/RealtimeClient';
 export function SignInForm({ onSuccess }) {
     const [loading, setLoading] = useState(false);
     const [err, setErr] = useState(null);
@@ -22,8 +24,8 @@ export function SignInForm({ onSuccess }) {
                             try {
                                 const { token, user } = await doLogin(email, password);
                                 // persist + redux
-                                localStorage.setItem('nextmin.token', token);
-                                localStorage.setItem('nextmin.user', JSON.stringify(user));
+                                AuthClient.setSession(token, user);
+                                RealtimeClient.getInstance().connect();
                                 dispatch(setSession({ token, user }));
                                 // optional callback
                                 onSuccess?.(token, user);

package/dist/components/AdminApp.js

@@ -10,24 +10,9 @@ import { usePathname, useRouter } from 'next/navigation';
 import { AdminRouteNormalizer } from '../router/AdminRouteNormalizer';
 import { SectionLoader } from './SectionLoader';
 import { api } from '../lib/api';
+import { AuthClient } from '../lib/AuthClient';
+import { RealtimeClient } from '../lib/RealtimeClient';
 import { systemLoading, systemLoaded, systemFailed, } from '../state/nextMinSlice';
-function isJwtValid(token) {
-    if (!token)
-        return false;
-    const parts = token.split('.');
-    if (parts.length !== 3)
-        return true; // non-JWT token: treat as present
-    try {
-        const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
-        if (typeof payload?.exp === 'number') {
-            return payload.exp * 1000 > Date.now();
-        }
-        return true;
-    }
-    catch {
-        return true;
-    }
-}
 export function AdminApp() {
     const dispatch = useDispatch();
     const router = useRouter();
@@ -36,24 +21,18 @@ export function AdminApp() {
     const [hydrated, setHydrated] = useState(false);
     // Hydrate session exactly once
     useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        try {
-            const t = localStorage.getItem('nextmin.token');
-            const u = localStorage.getItem('nextmin.user');
-            if (t && u) {
-                if (isJwtValid(t)) {
-                    dispatch(setSession({ token: t, user: JSON.parse(u) }));
-                }
-                else {
-                    // clear expired
-                    localStorage.removeItem('nextmin.token');
-                    localStorage.removeItem('nextmin.user');
-                    dispatch(clearSession());
-                }
+        const t = AuthClient.getToken();
+        const u = AuthClient.getUser();
+        if (t && u) {
+            if (AuthClient.isValidToken(t)) {
+                dispatch(setSession({ token: t, user: u }));
+                RealtimeClient.getInstance().connect();
+            }
+            else {
+                AuthClient.clearSession();
+                dispatch(clearSession());
             }
         }
-        catch { }
         setHydrated(true);
     }, [dispatch]);
     useEffect(() => {
@@ -64,7 +43,7 @@ export function AdminApp() {
             try {
                 dispatch(systemLoading());
                 // take first Settings row (singleton)
-                const res = await api.list('settings', 0, 1);
+                const res = await api.list('settings', { page: 0, limit: 1 });
                 const first = res?.data?.[0] ?? null;
                 const normalized = first == null
                     ? null
@@ -91,10 +70,8 @@ export function AdminApp() {
         };
     }, [hydrated, dispatch]);
     const localToken = useMemo(() => {
-        if (typeof window === 'undefined')
-            return null;
-        const t = localStorage.getItem('nextmin.token');
-        return isJwtValid(t) ? t : null;
+        const t = AuthClient.getToken();
+        return AuthClient.isValidToken(t) ? t : null;
     }, [hydrated]); // re-read after hydration
     const haveToken = Boolean(token || localToken);
     const onAuthRoute = pathname?.startsWith('/admin/auth') ?? false;

package/dist/components/ArchitectureDemo.d.ts

@@ -0,0 +1 @@
+export declare function ArchitectureDemo(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ArchitectureDemo.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useNextMin } from '../providers/NextMinProvider';
+import { QueryBuilder } from '../lib/QueryBuilder';
+import { useRealtime } from '../hooks/useRealtime';
+export function ArchitectureDemo() {
+    const { client } = useNextMin();
+    const { isConnected, lastEvent } = useRealtime();
+    const [posts, setPosts] = useState([]);
+    const [logs, setLogs] = useState([]);
+    // 1. Demonstrate QueryBuilder (New Architecture)
+    const fetchFilteredPosts = async () => {
+        const qb = new QueryBuilder()
+            .where('title', 'contains', 'NextMin')
+            .orWhere('views', 'gt', 100)
+            .sort('createdAt', 'desc')
+            .limit(5);
+        try {
+            const res = await client.request('/posts', {
+                method: 'GET',
+                query: qb.build(),
+            });
+            setPosts(res.data || []);
+            addLog('Fetched posts using QueryBuilder');
+        }
+        catch (err) {
+            addLog(`Fetch error: ${err}`);
+        }
+    };
+    // 2. Demonstrate Realtime Events (New Architecture)
+    useEffect(() => {
+        if (lastEvent) {
+            addLog(`Realtime Event: ${lastEvent.event} on ${lastEvent.payload.modelName}`);
+            if (lastEvent.event === 'doc:create' && lastEvent.payload.modelName === 'posts') {
+                // Optionally refresh list
+                fetchFilteredPosts();
+            }
+        }
+    }, [lastEvent]);
+    const addLog = (msg) => {
+        setLogs((prev) => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev].slice(0, 10));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6 border rounded-xl bg-white dark:bg-black/20 shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-xl font-bold", children: "New Architecture Demo" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}` }), _jsx("span", { className: "text-sm font-medium", children: isConnected ? 'Realtime Connected' : 'Disconnected' })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "font-semibold text-gray-600 dark:text-gray-400", children: "QueryBuilder & Filtering" }), _jsx("button", { onClick: fetchFilteredPosts, className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors text-sm font-medium w-fit", children: "Fetch Filtered Posts" }), _jsx("div", { className: "flex flex-col gap-2", children: posts.length > 0 ? (posts.map((p, i) => (_jsxs("div", { className: "p-3 border rounded bg-gray-50 dark:bg-white/5 text-sm", children: [_jsx("span", { className: "font-bold", children: p.title }), " \u2014 ", p.views, " views"] }, i)))) : (_jsx("p", { className: "text-sm text-gray-500 italic", children: "No posts found matching filter." })) })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "font-semibold text-gray-600 dark:text-gray-400", children: "Realtime Event Log" }), _jsx("div", { className: "flex flex-col gap-2 h-[200px] overflow-y-auto border rounded bg-black/5 dark:bg-white/5 p-3 font-mono text-xs", children: logs.map((log, i) => (_jsx("div", { className: "border-b last:border-0 pb-1 border-gray-200 dark:border-white/10 uppercase", children: log }, i))) })] })] })] }));
+}

package/dist/components/PhoneInput.d.ts

@@ -19,5 +19,8 @@ export interface PhoneInputProps {
     classNames?: {
         inputWrapper?: string;
     };
+    minLength?: number;
+    maxLength?: number;
+    regex?: string;
 }
 export declare const PhoneInput: React.FC<PhoneInputProps>;

package/dist/components/PhoneInput.js

@@ -6,7 +6,10 @@ const SLOT = 'x';
 const SLOT_PATTERN = /[Xx9#_]/g; // accept these as "digit slot" placeholders
 const normalizeMaskSlots = (m) => m.replace(SLOT_PATTERN, SLOT);
 // handle string | number | null | undefined safely
-const onlyDigits = (s) => String(s ?? '').replace(/\D/g, '');
+const onlyDigits = (s, regex) => {
+    const filter = regex ? new RegExp(regex, 'g') : /\D/g;
+    return String(s ?? '').replace(filter, '');
+};
 const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
 /** Indices in the mask where a digit goes (SLOT) */
 const getSlotIndices = (mask) => {
@@ -55,8 +58,8 @@ const caretPosForDigitCount = (normMask, digitCount) => {
         return slots[0]; // first slot (skip prefix like + or ()
     return clamp(slots[k - 1] + 1, 0, normMask.length);
 };
-const digitsBeforeCaret = (maskedValue, caret) => onlyDigits(maskedValue.slice(0, clamp(caret, 0, maskedValue.length))).length;
-export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, required, description, className, classNames, }) => {
+const digitsBeforeCaret = (maskedValue, caret, regex) => onlyDigits(maskedValue.slice(0, clamp(caret, 0, maskedValue.length)), regex).length;
+export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, required, description, className, classNames, minLength, maxLength, regex, }) => {
     const inputRef = useRef(null);
     // Normalize the mask to use lowercase 'x' as slots for internal logic
     const { normMask, maxDigits, placeholder, pattern } = useMemo(() => {
@@ -69,8 +72,8 @@ export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, r
             placeholder: nm.replace(/x/g, 'X'),
             pattern: toRegexFromMask(nm),
         };
-    }, [mask]);
-    const raw = onlyDigits(value).slice(0, maxDigits);
+    }, [mask, minLength]);
+    const raw = onlyDigits(value, regex).slice(0, maxLength ?? maxDigits);
     const masked = formatDisplay(raw, normMask);
     const setCaret = (pos) => {
         const el = inputRef.current;
@@ -86,8 +89,8 @@ export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, r
     const handleChange = (e) => {
         const inputVal = e.currentTarget.value;
         const caret = e.currentTarget.selectionStart ?? inputVal.length;
-        const nextRaw = onlyDigits(inputVal).slice(0, maxDigits);
-        const digitsBefore = digitsBeforeCaret(inputVal, caret);
+        const nextRaw = onlyDigits(inputVal, regex).slice(0, maxLength ?? maxDigits);
+        const digitsBefore = digitsBeforeCaret(inputVal, caret, regex);
         const nextMasked = formatDisplay(nextRaw, normMask);
         const nextCaret = caretPosForDigitCount(normMask, digitsBefore);
         onChange(nextRaw);
@@ -103,14 +106,14 @@ export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, r
             if (selStart <= 0)
                 return;
             const leftChar = el.value[selStart - 1];
-            if (leftChar && /\D/.test(leftChar)) {
+            if (leftChar && (regex ? new RegExp(regex).test(leftChar) : /\D/.test(leftChar))) {
                 e.preventDefault();
-                const currRaw = onlyDigits(el.value);
-                const countBefore = digitsBeforeCaret(el.value, selStart - 1);
+                const currRaw = onlyDigits(el.value, regex);
+                const countBefore = digitsBeforeCaret(el.value, selStart - 1, regex);
                 const idxToRemove = countBefore - 1;
                 if (idxToRemove >= 0) {
                     const nextRaw = currRaw.slice(0, idxToRemove) + currRaw.slice(idxToRemove + 1);
-                    onChange(nextRaw.slice(0, maxDigits));
+                    onChange(nextRaw.slice(0, maxLength ?? maxDigits));
                     const nextCaret = caretPosForDigitCount(normMask, countBefore - 1);
                     setCaret(nextCaret);
                 }
@@ -119,14 +122,14 @@ export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, r
         }
         if (e.key === 'Delete') {
             const rightChar = el.value[selStart];
-            if (rightChar && /\D/.test(rightChar)) {
+            if (rightChar && (regex ? new RegExp(regex).test(rightChar) : /\D/.test(rightChar))) {
                 e.preventDefault();
-                const currRaw = onlyDigits(el.value);
-                const countBefore = digitsBeforeCaret(el.value, selStart);
+                const currRaw = onlyDigits(el.value, regex);
+                const countBefore = digitsBeforeCaret(el.value, selStart, regex);
                 const idxToRemove = countBefore;
                 if (idxToRemove < currRaw.length) {
                     const nextRaw = currRaw.slice(0, idxToRemove) + currRaw.slice(idxToRemove + 1);
-                    onChange(nextRaw.slice(0, maxDigits));
+                    onChange(nextRaw.slice(0, maxLength ?? maxDigits));
                     const nextCaret = caretPosForDigitCount(normMask, countBefore);
                     setCaret(nextCaret);
                 }
@@ -135,13 +138,14 @@ export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, r
     };
     const handlePaste = (e) => {
         const text = e.clipboardData.getData('text') ?? '';
-        const pastedDigits = onlyDigits(text);
+        const pastedDigits = onlyDigits(text, regex);
         if (!pastedDigits)
             return;
         e.preventDefault();
-        onChange(pastedDigits.slice(0, maxDigits));
-        const nextCaret = caretPosForDigitCount(normMask, Math.min(pastedDigits.length, maxDigits));
+        const finalMax = maxLength ?? maxDigits;
+        onChange(pastedDigits.slice(0, finalMax));
+        const nextCaret = caretPosForDigitCount(normMask, Math.min(pastedDigits.length, finalMax));
         setCaret(nextCaret);
     };
-    return (_jsx(Input, { ref: inputRef, variant: "bordered", classNames: classNames, id: id, name: name, label: label, labelPlacement: "outside-top", value: masked, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, isDisabled: disabled, description: description ?? `Format: ${mask}`, className: className ?? 'w-full', isRequired: required, inputMode: "tel", pattern: pattern, maxLength: normMask.length, placeholder: placeholder }));
+    return (_jsx(Input, { ref: inputRef, variant: "bordered", classNames: classNames, id: id, name: name, label: label, labelPlacement: "outside-top", value: masked, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, isDisabled: disabled, description: description ?? `Format: ${mask}`, className: className ?? 'w-full', isRequired: required, inputMode: "tel", pattern: pattern, minLength: minLength, maxLength: normMask.length, placeholder: placeholder }));
 };

package/dist/components/RefSelect.d.ts

@@ -0,0 +1,16 @@
+export type RefSelectProps = {
+    name: string;
+    label: string;
+    refModel: string;
+    showKey?: string;
+    value: string | string[] | null;
+    onChange: (value: string | string[] | null) => void;
+    multiple?: boolean;
+    description?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    pageSize?: number;
+    where?: Record<string, any>;
+};
+export declare function RefSelect({ name, label, refModel, showKey, value, onChange, multiple, description, disabled, required, className, pageSize, where, }: RefSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/RefSelect.js

@@ -0,0 +1,225 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Select, SelectItem, Chip, Spinner, Input } from '@heroui/react';
+import { useInfiniteScroll } from '@heroui/use-infinite-scroll';
+import { api } from '../lib/api';
+export function RefSelect({ name, label, refModel, showKey = 'name', value, onChange, multiple = false, description, disabled, required, className, pageSize = 20, where, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [items, setItems] = useState([]);
+    const [hasMore, setHasMore] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+    const [offset, setOffset] = useState(0);
+    const [searchFilter, setSearchFilter] = useState('');
+    const [allSeenItems, setAllSeenItems] = useState({});
+    const refModelLC = useMemo(() => refModel.toLowerCase(), [refModel]);
+    // Normalize IDs to strings
+    const normalizeId = (it) => {
+        if (it == null)
+            return '';
+        if (typeof it === 'string')
+            return it;
+        if (typeof it === 'number')
+            return String(it);
+        // Handle objects like MongoDB ObjectIds
+        const id = it?.id ?? it?._id ?? it;
+        if (id == null)
+            return '';
+        if (typeof id === 'string')
+            return id;
+        if (typeof id.toHexString === 'function')
+            return id.toHexString();
+        if (typeof id.toString === 'function' && id !== it)
+            return id.toString();
+        return String(id);
+    };
+    const getLabel = useCallback((it) => {
+        return String(it?.[showKey] ?? it?.name ?? it?.title ?? normalizeId(it));
+    }, [showKey]);
+    // Hydration: Fetch labels for initial values if not in list
+    useEffect(() => {
+        const fetchLabels = async () => {
+            const ids = Array.isArray(value) ? value : value ? [value] : [];
+            if (ids.length === 0)
+                return;
+            // Filter out IDs we already have labels for
+            const missingIds = ids.filter(id => !items.some(it => it.id === id));
+            if (missingIds.length === 0)
+                return;
+            try {
+                const res = await api.list(refModelLC, {
+                    where: { id: { $in: missingIds } },
+                    limit: missingIds.length,
+                });
+                const docs = (res?.data ?? res);
+                if (Array.isArray(docs)) {
+                    const newItems = docs.map(d => ({ id: normalizeId(d), label: getLabel(d), ...d }));
+                    setAllSeenItems(prev => {
+                        const next = { ...prev };
+                        for (const item of newItems) {
+                            next[item.id] = item;
+                        }
+                        return next;
+                    });
+                    setItems(prev => {
+                        const existingIds = new Set(prev.map(i => i.id));
+                        const uniqueNew = newItems.filter(i => !existingIds.has(i.id));
+                        return [...prev, ...uniqueNew];
+                    });
+                }
+            }
+            catch (err) {
+                console.error('Failed to hydrate RefSelect labels', err);
+            }
+        };
+        if (refModelLC) {
+            fetchLabels();
+        }
+    }, [value, refModelLC, getLabel]); // Run once on value change if items missing
+    const loadMore = useCallback(async (isSearch = false) => {
+        if (isLoading || (!hasMore && !isSearch))
+            return;
+        setIsLoading(true);
+        try {
+            const effectivePageSize = Number(pageSize) || 20;
+            const currentOffset = isSearch ? 0 : offset;
+            const params = {
+                limit: effectivePageSize,
+                page: Math.floor(currentOffset / effectivePageSize) + 1,
+                sort: showKey,
+                sortType: 'asc',
+            };
+            if (searchFilter.length >= 1) {
+                params.where = {
+                    ...(params.where || {}),
+                    [showKey]: { $regex: `^${searchFilter}`, $options: 'i' }
+                };
+            }
+            if (where) {
+                params.where = { ...(params.where || {}), ...where };
+            }
+            const res = await api.list(refModelLC, params);
+            const docs = (res?.data ?? res);
+            const normalized = Array.isArray(docs)
+                ? docs.map(d => ({ id: normalizeId(d), label: getLabel(d), ...d }))
+                : [];
+            setAllSeenItems(prev => {
+                const next = { ...prev };
+                for (const item of normalized) {
+                    next[item.id] = item;
+                }
+                return next;
+            });
+            setItems(prev => {
+                if (isSearch)
+                    return normalized;
+                const existingIds = new Set(prev.map(i => i.id));
+                const uniqueNew = normalized.filter(i => !existingIds.has(i.id));
+                return [...prev, ...uniqueNew];
+            });
+            setHasMore(normalized.length === effectivePageSize);
+            setOffset(prev => isSearch ? effectivePageSize : prev + effectivePageSize);
+        }
+        catch (err) {
+            console.error('Failed to load RefSelect items', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [isLoading, hasMore, offset, pageSize, searchFilter, refModelLC, showKey, getLabel]);
+    const [, scrollerRef] = useInfiniteScroll({
+        hasMore,
+        isEnabled: isOpen,
+        shouldUseLoader: true,
+        onLoadMore: () => loadMore(false),
+    });
+    const onOpenChange = (open) => {
+        setIsOpen(open);
+        if (open && items.length === 0) {
+            loadMore(true);
+        }
+    };
+    const onInputChange = (e) => {
+        setSearchFilter(e.target.value);
+    };
+    // Debounced search
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const timer = setTimeout(() => {
+            loadMore(true);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchFilter, isOpen]);
+    const onSelectionChange = (keys) => {
+        if (keys === 'all')
+            return;
+        const selectedIds = Array.from(keys).map(String);
+        if (multiple) {
+            onChange(selectedIds);
+        }
+        else {
+            onChange(selectedIds[0] || null);
+        }
+    };
+    const removeValue = (idToRemove) => {
+        if (Array.isArray(value)) {
+            onChange(value.filter(id => id !== idToRemove));
+        }
+    };
+    const selectedKeys = useMemo(() => {
+        if (multiple) {
+            return new Set(Array.isArray(value) ? value.map(String) : []);
+        }
+        return (value ? new Set([String(value)]) : new Set());
+    }, [value, multiple]);
+    const selectedItems = useMemo(() => {
+        const ids = Array.isArray(value) ? value : value ? [value] : [];
+        return ids.map(id => {
+            const found = items.find(it => it.id === id);
+            if (found)
+                return found;
+            return { id: String(id), label: String(id) };
+        });
+    }, [value, items]);
+    const isValueEmpty = useMemo(() => {
+        if (multiple)
+            return !Array.isArray(value) || value.length === 0;
+        return !value;
+    }, [value, multiple]);
+    // Merge current search/paginated items with already selected items to ensure labels persist
+    const mergedDisplayItems = useMemo(() => {
+        const itemMap = new Map();
+        // 1. Add currently selected items (from allSeenItems cache)
+        const selectedIds = Array.isArray(value) ? value : value ? [value] : [];
+        for (const id of selectedIds) {
+            const stringId = String(id);
+            if (allSeenItems[stringId]) {
+                itemMap.set(stringId, allSeenItems[stringId]);
+            }
+            else {
+                // Fallback for cases where label isn't loaded yet
+                itemMap.set(stringId, { id: stringId, label: stringId });
+            }
+        }
+        // 2. Add current results (highest priority for labels/data)
+        for (const item of items) {
+            itemMap.set(item.id, item);
+        }
+        return Array.from(itemMap.values());
+    }, [items, value, allSeenItems]);
+    return (_jsx("div", { className: `flex flex-col gap-2 ${className}`, children: _jsx(Select, { label: label, placeholder: `Select ${refModel}...`, variant: "bordered", labelPlacement: "outside", isMultiline: multiple, items: mergedDisplayItems, isLoading: isLoading, scrollRef: scrollerRef, selectionMode: multiple ? 'multiple' : 'single', selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, onOpenChange: onOpenChange, isDisabled: disabled, isRequired: required, isInvalid: required && isValueEmpty, validationBehavior: "aria", description: description, className: "w-full", classNames: {
+                trigger: 'min-h-12 py-2',
+            }, scrollShadowProps: {
+                isEnabled: false,
+            }, listboxProps: {
+                topContent: (_jsx("div", { className: "px-2 pt-2 pb-1 sticky top-0 z-20 bg-content1 shadow-sm pb-2 -mt-2 -mx-1", children: _jsx(Input, { placeholder: "Search...", size: "sm", variant: "bordered", value: searchFilter, onChange: onInputChange, onClear: () => setSearchFilter(''), isClearable: true, 
+                        // Prevent closing when clicking search
+                        onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), endContent: isLoading ? _jsx(Spinner, { size: "sm" }) : null }) })),
+            }, renderValue: (items) => {
+                if (multiple) {
+                    return (_jsx("div", { className: "flex flex-wrap gap-1", children: items.map((item) => (_jsx(Chip, { size: "sm", variant: "flat", children: item.textValue }, item.key))) }));
+                }
+                return items[0].textValue;
+            }, children: (item) => (_jsx(SelectItem, { textValue: item.label, children: item.label }, item.id)) }) }));
+}