@airoom/nextmin-react 1.4.5 → 2.0.1

package/dist/components/SchemaForm.js

@@ -4,8 +4,7 @@ import { useEffect, useMemo, useState, useId } from 'react';
 import { Form, Input, Textarea, Checkbox, RadioGroup, Radio, Select, SelectItem, Button, DatePicker, DateRangePicker, TimeInput, } from '@heroui/react';
 import { useSelector } from 'react-redux';
 import { inputTypeFor } from '../lib/schemaUtils';
-import { RefMultiSelect } from './RefMultiSelect';
-import { RefSingleSelect } from './RefSingleSelect';
+import { RefSelect } from './RefSelect';
 import { PasswordInput } from './PasswordInput';
 import { PhoneInput } from './PhoneInput';
 import { FileUploader } from './FileUploader';
@@ -259,6 +258,11 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
     const sessionRole = useMemo(() => {
         if (!effectiveUser)
             return [];
+        // 1. Check direct roleName field if backend provided it
+        const rn = effectiveUser.roleName;
+        if (typeof rn === 'string' && rn)
+            return [rn.toLowerCase()];
+        // 2. Fallback to existing logic
         const raw = effectiveUser.roles ?? effectiveUser.role;
         const toName = (r) => {
             if (!r)
@@ -270,10 +274,11 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
             return null;
         };
         if (Array.isArray(raw)) {
-            return raw.map(toName).filter((s) => !!s);
+            return raw.map(toName).filter((s) => !!s).map(s => s.toLowerCase());
         }
         const single = toName(raw);
-        return single ? [single] : [];
+        const result = single ? [single.toLowerCase()] : [];
+        return result;
     }, [effectiveUser]);
     const schema = useMemo(() => schemaOverride ??
         items.find((s) => s.modelName.toLowerCase() === model.toLowerCase()), [items, model, schemaOverride]);
@@ -328,20 +333,72 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
             .map(toName)
             .filter((s) => !!s)
             .map((s) => s.toLowerCase());
-        return configured.length > 0 ? configured : ['admin', 'superadmin'];
+        const result = configured.length > 0 ? configured : ['admin', 'superadmin'];
+        return result;
     }, [schema]);
     const canBypassPrivacy = useMemo(() => {
         const userRolesLC = sessionRole.map((r) => r.toLowerCase());
-        return userRolesLC.some((r) => bypassRoles.includes(r));
+        const result = userRolesLC.some((r) => bypassRoles.includes(r));
+        return result;
     }, [sessionRole, bypassRoles]);
-    const fields = useMemo(() => Object.entries(schema.attributes)
-        .filter(([name]) => !AUDIT_FIELDS.has(name))
-        // Force-hide any linkage field named "baseId"
-        .filter(([name]) => name !== 'baseId' && name !== 'exId')
-        .filter(([, attr]) => canBypassPrivacy ? true : !attr?.private)
-        .filter(([, attr]) => !isHiddenAttr(attr, isEdit))
-        .filter(([name, attr]) => !(isEdit && isPasswordAttr(name, attr)))
-        .map(([name, attr]) => ({ name, attr })), [schema, canBypassPrivacy, isEdit]);
+    const fields = useMemo(() => {
+        const allFields = Object.entries(schema.attributes);
+        const afterAudit = allFields.filter(([name]) => !AUDIT_FIELDS.has(name));
+        const afterBaseId = afterAudit.filter(([name]) => name !== 'exId');
+        const afterPrivate = afterBaseId.filter(([name, attr]) => {
+            const head = Array.isArray(attr) ? attr[0] : attr;
+            // Always show password fields in create mode for users with bypass privacy
+            if (!isEdit && isPasswordAttr(name, attr) && canBypassPrivacy) {
+                return true;
+            }
+            // Otherwise apply normal private field filtering
+            const keep = canBypassPrivacy ? true : !head?.private;
+            return keep;
+        });
+        const afterHidden = afterPrivate.filter(([, attr]) => !isHiddenAttr(attr, isEdit));
+        const isUserExt = schema.extends?.toLowerCase() === 'users';
+        const afterInherited = afterHidden.filter(([name, attr]) => {
+            const head = Array.isArray(attr) ? attr[0] : attr;
+            // Specifically for User extensions, hide inherited fields unless they are explicitly not marked inherited
+            if (isUserExt && name !== 'baseId') {
+                return !head?.inherited;
+            }
+            return true;
+        });
+        const afterPassword = afterInherited.filter(([name, attr]) => {
+            const isPass = isPasswordAttr(name, attr);
+            const keep = !(isEdit && isPass && !canBypassPrivacy);
+            return keep;
+        });
+        let finalFields = afterPassword.map(([name, attr]) => ({ name, attr }));
+        // If it's a User extension, move baseId to the top and inject the role filter
+        if (isUserExt) {
+            const baseIdIndex = finalFields.findIndex(f => f.name === 'baseId');
+            if (baseIdIndex !== -1) {
+                const [baseIdField] = finalFields.splice(baseIdIndex, 1);
+                // Inject the filter into baseId attribute (clone to avoid "not extensible" error)
+                const baseIdFieldClone = {
+                    ...baseIdField,
+                    attr: { ...baseIdField.attr }
+                };
+                const baseIdAttr = baseIdFieldClone.attr;
+                if (baseIdAttr) {
+                    baseIdAttr.where = {
+                        role: {
+                            $nestedSearch: {
+                                ref: 'Roles',
+                                show: 'name',
+                                value: ['admin', 'superadmin', 'manager'],
+                                operator: '$nin'
+                            }
+                        }
+                    };
+                }
+                finalFields.unshift(baseIdFieldClone);
+            }
+        }
+        return finalFields;
+    }, [schema, canBypassPrivacy, isEdit]);
     const gridClass = 'grid gap-4 grid-cols-2';
     const handleChange = (name, value) => {
         setForm((f) => {
@@ -385,7 +442,7 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
         e.preventDefault();
         setError(undefined);
         try {
-            const { createdAt, updatedAt, baseId, exId, __childId, ...rest } = form;
+            const { createdAt, updatedAt, __childId, ...rest } = form;
             const payload = { ...rest };
             if (schema) {
                 for (const [fname, fattr] of Object.entries(schema.attributes)) {
@@ -427,14 +484,17 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                     const canRemove = spec.minItems == null || items.length > spec.minItems;
                     return (_jsxs("div", { className: "col-span-2", children: [_jsxs("label", { className: "text-sm font-medium", children: [attr?.label || spec.label || formatLabel(name), attr?.required ? ' *' : ''] }), _jsxs("div", { className: "flex flex-col gap-4 mt-2", children: [items.map((it, idx) => (_jsxs("div", { className: "grid grid-cols-2 gap-3 p-3 rounded-lg border border-default-200", children: [_jsxs("div", { className: "col-span-2 font-medium text-default-600", children: [(attr?.label ||
                                                         spec.label ||
-                                                        formatLabel(name)).replace(/s$/, ''), ' ', idx + 1] }), Object.entries(itemSchema).map(([k, a]) => (_jsx(Input, { variant: "bordered", classNames: inputClassNames, id: `${name}-${idx}-${k}`, name: `${name}.${idx}.${k}`, label: a?.label ?? formatLabel(k), labelPlacement: "outside-top", type: "text", value: typeof it?.[k] === 'string' ? it[k] : '', onChange: (e) => {
-                                                    const next = items.slice();
-                                                    next[idx] = {
-                                                        ...(next[idx] || {}),
-                                                        [k]: e.target.value,
-                                                    };
-                                                    handleChange(name, next);
-                                                }, isDisabled: busy, description: a?.description, className: "w-full", isRequired: !!a?.required }, `${name}-${idx}-${k}`))), _jsx("div", { className: "col-span-2 flex justify-between", children: _jsx(Button, { size: "sm", variant: "flat", color: "danger", isDisabled: !canRemove, onPress: () => {
+                                                        formatLabel(name)).replace(/s$/, ''), ' ', idx + 1] }), Object.entries(itemSchema).map(([k, a]) => {
+                                                const isRich = a?.rich === true;
+                                                return (_jsx("div", { className: isRich ? 'col-span-2' : 'col-span-1', children: _jsx(SchemaField, { uid: `${formUid}-${name}-${idx}`, name: k, attr: a, value: it?.[k], onChange: (fieldName, fieldValue) => {
+                                                            const next = items.slice();
+                                                            next[idx] = {
+                                                                ...(next[idx] || {}),
+                                                                [fieldName]: fieldValue,
+                                                            };
+                                                            handleChange(name, next);
+                                                        }, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey, availableSchemas: items, formState: it }) }, `${name}-${idx}-${k}`));
+                                            }), _jsx("div", { className: "col-span-2 flex justify-between", children: _jsx(Button, { size: "sm", variant: "flat", color: "danger", isDisabled: !canRemove, onPress: () => {
                                                         const next = items.slice();
                                                         next.splice(idx, 1);
                                                         handleChange(name, next);
@@ -448,23 +508,13 @@ export function SchemaForm({ model, schemaOverride, initialValues, submitLabel =
                         !Array.isArray(form[name])
                         ? form[name]
                         : parseJsonGroupValue(form[name], 'single');
-                    return (_jsxs("div", { className: "col-span-2", children: [_jsxs("label", { className: "text-sm font-medium", children: [attr?.label || spec.label || formatLabel(name), attr?.required ? ' *' : ''] }), _jsx("div", { className: "grid grid-cols-2 gap-3 p-3 rounded-lg border border-default-200 mt-2", children: Object.entries(itemSchema).map(([k, a]) => a?.format === 'textarea' ? (_jsx(Textarea, { variant: "bordered", classNames: inputClassNames, id: `${name}-${k}`, name: `${name}.${k}`, label: a?.label ?? formatLabel(k), labelPlacement: "outside", value: typeof obj?.[k] === 'string' ? obj[k] : '', onChange: (e) => {
-                                        const next = { ...(obj || {}), [k]: e.target.value };
-                                        handleChange(name, next);
-                                    }, minRows: 3, maxRows: 20, isDisabled: busy, description: a?.description, className: "w-full col-span-2", isRequired: !!a?.required }, `${name}-${k}`)) : (_jsx(Input, { variant: "bordered", classNames: inputClassNames, id: `${name}-${k}`, name: `${name}.${k}`, label: a?.label ?? formatLabel(k), labelPlacement: "outside-top", type: "text", value: typeof obj?.[k] === 'string' ? obj[k] : '', onChange: (e) => {
-                                        const next = { ...(obj || {}), [k]: e.target.value };
-                                        handleChange(name, next);
-                                    }, isDisabled: busy, description: a?.description, className: "w-full", isRequired: !!a?.required }, `${name}-${k}`))) })] }, name));
-                }
-                // --- 1) Array of references → multi select (1 column)
-                const refArray = getRefArraySpec(attr);
-                if (refArray) {
-                    return (_jsx("div", { className: colClass, children: _jsx(RefMultiSelect, { name: name, label: attr[0]?.label ?? formatLabel(name), refModel: refArray.ref, showKey: refArray.show ?? 'name', description: attr?.description, value: form[name], onChange: (ids) => handleChange(name, ids), disabled: busy, required: attr[0]?.required, pageSize: attr[0]?.pageSize }) }, name));
-                }
-                // --- 2) Single reference → single select (1 column)
-                const refSingle = getRefSingleSpec(attr);
-                if (refSingle) {
-                    return (_jsx("div", { className: colClass, children: _jsx(RefSingleSelect, { name: name, label: attr?.label ?? formatLabel(name), refModel: refSingle.ref, showKey: refSingle.show ?? 'name', description: attr?.description, value: normalizeId(form[name]), onChange: (id) => handleChange(name, id), disabled: busy, required: !!attr?.required, classNames: selectClassNames, pageSize: attr?.pageSize }) }, name));
+                    return (_jsxs("div", { className: "col-span-2", children: [_jsxs("label", { className: "text-sm font-medium", children: [attr?.label || spec.label || formatLabel(name), attr?.required ? ' *' : ''] }), _jsx("div", { className: "grid grid-cols-2 gap-3 p-3 rounded-lg border border-default-200 mt-2", children: Object.entries(itemSchema).map(([k, a]) => {
+                                    const isRich = a?.rich === true;
+                                    return (_jsx("div", { className: isRich ? 'col-span-2' : 'col-span-1', children: _jsx(SchemaField, { uid: `${formUid}-${name}`, name: k, attr: a, value: obj?.[k], onChange: (fieldName, fieldValue) => {
+                                                const next = { ...(obj || {}), [fieldName]: fieldValue };
+                                                handleChange(name, next);
+                                            }, disabled: busy, inputClassNames: inputClassNames, selectClassNames: selectClassNames, mapsKey: mapsKey, availableSchemas: items, formState: obj }) }, `${name}-${k}`));
+                                }) })] }, name));
                 }
                 // let password reflect local state, but never prefill
                 const baseValue = name.toLowerCase() === 'password'
@@ -500,8 +550,19 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
         const specialitySlug = formState?.speciality?.slug || formState?.slug || '';
         return (_jsx(TiptapEditor, { value: value, onChange: (html) => onChange(name, html), placeholder: label, availableSchemas: availableSchemas, currentSpeciality: specialitySlug }));
     }
+    // --- 1) Array of references → multi select
+    const refArray = getRefArraySpec(attr);
+    if (refArray) {
+        return (_jsx(RefSelect, { name: name, label: attr[0]?.label ?? label, refModel: refArray.ref, showKey: refArray.show ?? 'name', description: attr?.description, value: normalizeIdsArray(value), onChange: (ids) => onChange(name, ids), multiple: true, disabled: disabled, required: attr[0]?.required, pageSize: attr[0]?.pageSize, where: attr[0]?.where || attr?.where }));
+    }
+    // --- 2) Single reference → single select
+    const refSingle = getRefSingleSpec(attr);
+    if (refSingle) {
+        return (_jsx(RefSelect, { name: name, label: label, refModel: refSingle.ref, showKey: refSingle.show ?? 'name', description: attr?.description, value: normalizeId(value), onChange: (id) => onChange(name, id), multiple: false, disabled: disabled, required: required, pageSize: attr?.pageSize, where: attr?.where }));
+    }
+    const head = Array.isArray(attr) ? (attr?.[0] ?? {}) : (attr ?? {});
     const isPhoneField = isPhoneAttr(name, attr);
-    const rawMask = typeof attr?.mask === 'string' ? attr.mask : '';
+    const rawMask = typeof head?.mask === 'string' ? head.mask : '';
     const hasSlots = /[Xx9#_]/.test(rawMask);
     const phoneMask = hasSlots ? rawMask : 'xxx-xxxx-xxxx';
     const isFileField = String(attr?.format || '').toLowerCase() === 'file' ||
@@ -534,7 +595,7 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
         const rawDigits = typeof value === 'string' || typeof value === 'number'
             ? String(value).replace(/\D/g, '')
             : '';
-        return (_jsx(PhoneInput, { id: id, name: name, label: label, mask: phoneMask, value: rawDigits, onChange: (raw) => onChange(name, raw), disabled: disabled, required: required, description: description, className: "w-full", classNames: inputClassNames }));
+        return (_jsx(PhoneInput, { id: id, name: name, label: label, mask: phoneMask, value: rawDigits, onChange: (raw) => onChange(name, raw), disabled: disabled, required: required, description: description, className: "w-full", classNames: inputClassNames, minLength: head?.minLength, maxLength: head?.maxLength, regex: head?.pattern }));
     }
     const populateField = getPopulateTarget(attr);
     // Address → Autocomplete
@@ -606,7 +667,19 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
         if (!currentUser)
             return false;
         const o = normalize(opt);
-        const roles = currentUser.role ?? currentUser.roles ?? [];
+        // Handle roleName field (preferred for SQL databases)
+        const roleName = currentUser?.roleName;
+        if (typeof roleName === 'string') {
+            const normalized = normalize(roleName);
+            if (normalized === 'superadmin')
+                return true;
+            if (o === 'system')
+                return false;
+            return true;
+        }
+        // Fallback: handle role/roles arrays
+        const roleField = currentUser.role ?? currentUser.roles;
+        const roles = Array.isArray(roleField) ? roleField : [];
         const roleNames = new Set(roles.map((r) => normalize(r.name)));
         if (roleNames.has('superadmin'))
             return true;
@@ -670,7 +743,7 @@ function SchemaField({ uid, name, attr, value, onChange, disabled, inputClassNam
     const inputType = pickInputType(inputTypeFor(attr), name);
     return (_jsx(Input, { variant: "bordered", classNames: inputClassNames, id: id, name: name, label: label, isReadOnly: attr.readOnly, labelPlacement: "outside-top", type: inputType, value: value ?? '', onChange: (e) => onChange(name, inputType === 'number'
             ? numberOrEmpty(e.target.value)
-            : e.target.value), isDisabled: disabled, description: description, className: "w-full", isRequired: required, autoComplete: name.toLowerCase() === 'password' ? 'new-password' : undefined }));
+            : e.target.value), isDisabled: disabled, description: description, className: "w-full", isRequired: required, minLength: head?.minLength, maxLength: head?.maxLength, pattern: head?.pattern, autoComplete: name.toLowerCase() === 'password' ? 'new-password' : undefined }));
 }
 function isHiddenAttr(attr, isEdit) {
     const head = Array.isArray(attr) ? (attr?.[0] ?? {}) : (attr ?? {});
@@ -683,10 +756,15 @@ function isHiddenAttr(attr, isEdit) {
     return false;
 }
 function isPhoneAttr(name, attr) {
+    const head = Array.isArray(attr) ? (attr?.[0] ?? {}) : (attr ?? {});
+    const fmt = String(head.format || attr?.format || '').toLowerCase();
+    // Explicit "text" format bypasses automatic phone detection
+    if (fmt === 'text')
+        return false;
     const byName = /phone/i.test(name);
-    const byFormat = String(attr?.format || '').toLowerCase() === 'phone';
-    const byType = String(attr?.type || '').toLowerCase() === 'phone';
-    const byMask = typeof attr?.mask === 'string' && attr.mask.includes('x');
+    const byFormat = fmt === 'phone';
+    const byType = String(head.type || attr?.type || '').toLowerCase() === 'phone';
+    const byMask = typeof head.mask === 'string' && head.mask.includes('x');
     return byName || byFormat || byType || byMask;
 }
 function isPasswordAttr(name, attr) {
@@ -721,7 +799,8 @@ function normalizeIdsArray(raw) {
     if (!raw)
         return [];
     if (Array.isArray(raw)) {
-        return raw.map((v) => {
+        return raw
+            .map((v) => {
             if (typeof v === 'string')
                 return v;
             if (v && typeof v === 'object') {
@@ -732,7 +811,8 @@ function normalizeIdsArray(raw) {
                     null);
             }
             return null;
-        });
+        })
+            .filter((v) => !!v);
     }
     return [];
 }
@@ -769,7 +849,7 @@ function numberOrEmpty(v) {
 }
 function isAddressAttr(name, attr) {
     const fname = String(name || '').toLowerCase();
-    const byName = /(address|location)/i.test(fname);
+    const byName = /address/i.test(fname);
     const byFormat = String(attr?.format || '').toLowerCase() === 'address';
     const byPopulate = typeof attr?.populate === 'string' &&
         attr.populate.length > 0;
@@ -797,7 +877,7 @@ async function findUniqueSlug(model, baseSlug, currentId) {
         const checkSlug = attempt === 0 ? baseSlug : `${baseSlug}-${attempt}`;
         try {
             // Check if slug exists in the model
-            const res = await api.list(model, 0, 1, { slug: checkSlug });
+            const res = await api.list(model, { page: 0, limit: 1, where: { slug: checkSlug } });
             const existing = res.data?.[0];
             if (!existing ||
                 (currentId && String(existing.id || existing._id) === String(currentId))) {

package/dist/components/Sidebar.js

@@ -5,6 +5,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useRouter } from 'next/navigation';
 import { clearSession } from '../state/sessionSlice';
 import { Button } from '@heroui/react';
+import { AuthClient } from '../lib/AuthClient';
+import { RealtimeClient } from '../lib/RealtimeClient';
 import Link from 'next/link';
 export function Sidebar() {
     const router = useRouter();
@@ -13,11 +15,8 @@ export function Sidebar() {
     const systemStatus = useSelector((s) => s.nextMin.status);
     const { items, status, error } = useSelector((s) => s.schemas);
     const logout = React.useCallback(() => {
-        try {
-            localStorage.removeItem('nextmin.token');
-            localStorage.removeItem('nextmin.user');
-        }
-        catch { }
+        AuthClient.clearSession();
+        RealtimeClient.getInstance().disconnect();
         dispatch(clearSession());
         router.replace('/admin/auth/sign-in');
     }, [dispatch, router]);
@@ -59,14 +58,8 @@ export function Sidebar() {
     // Read user info from localStorage (client only)
     const [user, setUser] = React.useState(null);
     React.useEffect(() => {
-        try {
-            const raw = localStorage.getItem('nextmin.user');
-            if (raw)
-                setUser(JSON.parse(raw));
-        }
-        catch {
-            setUser(null);
-        }
+        const u = AuthClient.getUser();
+        setUser(u);
     }, []);
     // —— Brand (logo/name) ——
     const siteName = React.useMemo(() => (system?.siteName && system.siteName.trim()) || 'NextMin', [system]);

package/dist/components/TableFilters.js

@@ -51,6 +51,8 @@ export function TableFilters({ model, value, onChange, busy, columns, visibleCol
                                 if (keys === 'all')
                                     return;
                                 onVisibleColumnsChange(keys);
+                            }, classNames: {
+                                list: 'max-h-[300px] overflow-y-auto',
                             }, children: columns.map((col) => (_jsx(DropdownItem, { className: "capitalize", children: formatLabel(col) }, col))) })] }) })] }));
 }
 /** tiny inline chevron (no icon pkg) */

package/dist/components/editor/TiptapEditor.js

@@ -128,7 +128,7 @@ export const TiptapEditor = ({ value, onChange, className, placeholder = 'Start
             }
             else {
                 // Fallback to latest 6
-                const res = await api.list(selectedSchema.modelName, 0, 6);
+                const res = await api.list(selectedSchema.modelName, { page: 0, limit: 6 });
                 const payload = res?.data ?? res;
                 items =
                     payload?.items ??

package/dist/components/editor/Toolbar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { Bold, Italic, Underline as UnderlineIcon, List, ListOrdered, Quote, Code, Undo, Redo, Image as ImageIcon, LayoutTemplate, LayoutPanelLeft, AlignLeft, AlignCenter, AlignRight, Square, Table as TableIcon, Palette, PaintBucket, Type, MapPin } from 'lucide-react';
+import { Bold, Italic, Underline as UnderlineIcon, List, ListOrdered, Quote, Code, Undo, Redo, Image as ImageIcon, LayoutTemplate, LayoutPanelLeft, AlignLeft, AlignCenter, AlignRight, Square, Table as TableIcon, Palette, PaintBucket, Type, MapPin, AlignJustify, Link as LinkIcon } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { uploadFile } from '../../lib/upload';
 export const Toolbar = ({ editor, onDistrictGridClick }) => {
@@ -32,7 +32,18 @@ export const Toolbar = ({ editor, onDistrictGridClick }) => {
         fileInputRef.current?.click();
     };
     const ToolbarButton = ({ onClick, isActive = false, children, disabled = false }) => (_jsx("button", { onClick: onClick, disabled: disabled, className: cn("p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", isActive && "bg-gray-200 dark:bg-gray-700 text-blue-500", disabled && "opacity-50 cursor-not-allowed"), type: "button", children: children }));
-    return (_jsxs("div", { className: "border-b border-gray-200 dark:border-gray-800 p-2 flex flex-wrap gap-1 sticky top-0 bg-white dark:bg-zinc-950 z-10 items-center", children: [_jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive('bold'), children: _jsx(Bold, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive('italic'), children: _jsx(Italic, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: editor.isActive('underline'), children: _jsx(UnderlineIcon, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('left').run(), isActive: editor.isActive({ textAlign: 'left' }), children: _jsx(AlignLeft, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('center').run(), isActive: editor.isActive({ textAlign: 'center' }), children: _jsx(AlignCenter, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('right').run(), isActive: editor.isActive({ textAlign: 'right' }), children: _jsx(AlignRight, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isActive: editor.isActive('heading', { level: 1 }), children: _jsx("span", { className: "font-bold text-sm", children: "H1" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isActive: editor.isActive('heading', { level: 2 }), children: _jsx("span", { className: "font-bold text-sm", children: "H2" }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive('bulletList'), children: _jsx(List, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive('orderedList'), children: _jsx(ListOrdered, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), isActive: editor.isActive('blockquote'), children: _jsx(Quote, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), isActive: editor.isActive('codeBlock'), children: _jsx(Code, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => {
+    return (_jsxs("div", { className: "border-b border-gray-200 dark:border-gray-800 p-2 flex flex-wrap gap-1 sticky top-0 bg-white dark:bg-zinc-950 z-10 items-center", children: [_jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive('bold'), children: _jsx(Bold, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive('italic'), children: _jsx(Italic, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: editor.isActive('underline'), children: _jsx(UnderlineIcon, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => {
+                    const previousUrl = editor.getAttributes('link').href;
+                    const url = window.prompt('URL', previousUrl);
+                    if (url === null) {
+                        return;
+                    }
+                    if (url === '') {
+                        editor.chain().focus().extendMarkRange('link').unsetLink().run();
+                        return;
+                    }
+                    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+                }, isActive: editor.isActive('link'), children: _jsx(LinkIcon, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('left').run(), isActive: editor.isActive({ textAlign: 'left' }), children: _jsx(AlignLeft, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('center').run(), isActive: editor.isActive({ textAlign: 'center' }), children: _jsx(AlignCenter, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('right').run(), isActive: editor.isActive({ textAlign: 'right' }), children: _jsx(AlignRight, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign('justify').run(), isActive: editor.isActive({ textAlign: 'justify' }), children: _jsx(AlignJustify, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isActive: editor.isActive('heading', { level: 1 }), children: _jsx("span", { className: "font-bold text-sm", children: "H1" }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isActive: editor.isActive('heading', { level: 2 }), children: _jsx("span", { className: "font-bold text-sm", children: "H2" }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), isActive: editor.isActive('bulletList'), children: _jsx(List, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), isActive: editor.isActive('orderedList'), children: _jsx(ListOrdered, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), isActive: editor.isActive('blockquote'), children: _jsx(Quote, { size: 18 }) }), _jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), isActive: editor.isActive('codeBlock'), children: _jsx(Code, { size: 18 }) }), _jsx("div", { className: "w-[1px] h-6 bg-gray-300 dark:bg-gray-700 mx-1" }), _jsx(ToolbarButton, { onClick: () => {
                     editor
                         .chain()
                         .focus()

package/dist/components/editor/components/DistrictGridModal.js

@@ -2,8 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, } from '@heroui/react';
-import { RefMultiSelect } from '../../RefMultiSelect';
-import { RefSingleSelect } from '../../RefSingleSelect';
+import { RefSelect } from '../../RefSelect';
 import { cn } from '../../../lib/utils';
 import { api } from '../../../lib/api';
 export const DistrictGridModal = ({ isOpen, onClose, onInsert, currentSpeciality, }) => {
@@ -68,5 +67,5 @@ export const DistrictGridModal = ({ isOpen, onClose, onInsert, currentSpeciality
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
                                                     : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Doctors" }), _jsx("button", { onClick: () => setBaseType('hospitals'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", baseType === 'hospitals'
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
-                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Hospitals" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefMultiSelect, { name: "districts", label: "Search & Select Districts", refModel: "Districts", value: selectedDistricts, onChange: (ids) => setSelectedDistricts(ids), pageSize: 1000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Select one or more districts to create grid items." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefSingleSelect, { name: "speciality", label: "Search & Select Speciality", refModel: "Specialities", showKey: "name", value: selectedSpecialityId, onChange: (id) => setSelectedSpecialityId(id || ''), pageSize: 10000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to create URLs without speciality." }), specialitySlug && (_jsx("div", { className: "mt-1 px-2 py-1 bg-primary-50 dark:bg-primary-900/20 rounded border border-primary-200 dark:border-primary-800", children: _jsxs("p", { className: "text-xs text-primary-700 dark:text-primary-400", children: ["Slug: ", _jsx("code", { className: "font-mono", children: specialitySlug })] }) }))] }), selectedDistricts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "URL Preview" }), _jsxs("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 max-h-32 overflow-y-auto", children: [_jsx("p", { className: "text-xs text-gray-500 mb-2", children: "Example URL pattern (actual district slugs will be used):" }), _jsx("code", { className: "text-xs text-gray-700 dark:text-gray-300", children: getPreviewUrl('[district-slug]') })] })] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, isDisabled: selectedDistricts.length === 0, children: "Insert Grid" })] })] }) }) }));
+                                                    : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900"), children: "Hospitals" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefSelect, { name: "districts", label: "Search & Select Districts", refModel: "Districts", value: selectedDistricts, onChange: (ids) => setSelectedDistricts(ids), multiple: true, pageSize: 1000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Select one or more districts to create grid items." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefSelect, { name: "speciality", label: "Search & Select Speciality", refModel: "Specialities", showKey: "name", value: selectedSpecialityId, onChange: (id) => setSelectedSpecialityId(id || ''), multiple: false, pageSize: 10000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to create URLs without speciality." }), specialitySlug && (_jsx("div", { className: "mt-1 px-2 py-1 bg-primary-50 dark:bg-primary-900/20 rounded border border-primary-200 dark:border-primary-800", children: _jsxs("p", { className: "text-xs text-primary-700 dark:text-primary-400", children: ["Slug: ", _jsx("code", { className: "font-mono", children: specialitySlug })] }) }))] }), selectedDistricts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "URL Preview" }), _jsxs("div", { className: "px-3 py-2 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 max-h-32 overflow-y-auto", children: [_jsx("p", { className: "text-xs text-gray-500 mb-2", children: "Example URL pattern (actual district slugs will be used):" }), _jsx("code", { className: "text-xs text-gray-700 dark:text-gray-300", children: getPreviewUrl('[district-slug]') })] })] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "primary", onPress: handleInsert, isDisabled: selectedDistricts.length === 0, children: "Insert Grid" })] })] }) }) }));
 };

package/dist/components/editor/components/SchemaInsertionModal.js

@@ -5,7 +5,7 @@ import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button,
 // RadioGroup, // Removed
 // Radio, // Removed
 Input, } from '@heroui/react';
-import { RefMultiSelect } from '../../RefMultiSelect';
+import { RefSelect } from '../../RefSelect';
 import { cn } from '../../../lib/utils'; // Assuming cn utility is available
 // Helper to get nested keys with recursion limit
 const getAllKeys = (attributes, allSchemas, prefix = '', depth = 0) => {
@@ -83,7 +83,7 @@ export const SchemaInsertionModal = ({ isOpen, onClose, onInsert, schema, availa
             base: "bg-white dark:bg-zinc-950 border border-gray-200 dark:border-gray-800",
             header: "border-b border-gray-200 dark:border-gray-800",
             footer: "border-t border-gray-200 dark:border-gray-800",
-        }, children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsxs(ModalHeader, { children: ["Insert ", schema.modelName] }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefMultiSelect, { name: "items", label: "Search & Select", refModel: schema.modelName, value: selectedIds, onChange: (ids) => setSelectedIds(ids), pageSize: 10000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to fetch latest items automatically." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "View Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setViewType('grid'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'grid'
+        }, children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsxs(ModalHeader, { children: ["Insert ", schema.modelName] }), _jsxs(ModalBody, { className: "py-6 flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(RefSelect, { name: "items", label: "Search & Select", refModel: schema.modelName, value: selectedIds, onChange: (ids) => setSelectedIds(ids), multiple: true, pageSize: 10000 }), _jsx("p", { className: "text-xs text-gray-400", children: "Leave empty to fetch latest items automatically." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { className: "text-sm font-medium", children: "View Type" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("button", { onClick: () => setViewType('grid'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'grid'
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"
                                                     : "bg-transparent border-gray-200 dark:border-gray-800 hover:bg-gray-50"), children: "Grid (Pills)" }), _jsx("button", { onClick: () => setViewType('list'), className: cn("px-4 py-2 rounded-lg border text-sm font-medium transition-colors", viewType === 'list'
                                                     ? "bg-primary-50 border-primary-500 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400"

package/dist/components/viewer/DynamicViewer.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import DOMPurify from 'dompurify';
 import { formatCell } from '../../views/list/formatters';
 import { summarizeObject } from '../../views/list/jsonSummary';
 // Hide technical keys in the viewer
@@ -32,6 +33,7 @@ function isPasswordByAttr(attr) {
 }
 // --- small helpers (duplicated minimal logic from table) ---
 const IMG_EXT_RE = /(png|jpe?g|gif|webp|bmp|svg|avif|heic|heif)$/i;
+const HTML_TAG_RE = /<([a-z1-6]+)(?:\s+[^>]*?)?>[\s\S]*?<\/\1>|<[a-z1-6]+(?:\s+[^>]*?)?\s*\/>|&[a-z0-9#]+;/i;
 function isUrlLike(s) {
     return /^https?:\/\//i.test(s) || s.startsWith('/') || s.startsWith('data:');
 }
@@ -118,6 +120,34 @@ function formatDateTimeLocal(d) {
         return d.toString();
     }
 }
+/** Detect HH:mm or HH:mm:ss and format to localized time */
+function formatTimeLocal(val) {
+    if (typeof val !== 'string')
+        return null;
+    const s = val.trim();
+    // Match HH:mm or HH:mm:ss (24h format)
+    const timeMatch = s.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+    if (!timeMatch)
+        return null;
+    try {
+        const hours = parseInt(timeMatch[1], 10);
+        const minutes = parseInt(timeMatch[2], 10);
+        const seconds = timeMatch[3] ? parseInt(timeMatch[3], 10) : 0;
+        if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59 || seconds < 0 || seconds > 59) {
+            return null;
+        }
+        const d = new Date();
+        d.setHours(hours, minutes, seconds);
+        return d.toLocaleTimeString(undefined, {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: true,
+        });
+    }
+    catch {
+        return null;
+    }
+}
 function isPrivate(attr) {
     const a = (Array.isArray(attr) ? attr[0] : attr);
     return !!a?.private;
@@ -152,12 +182,23 @@ function toLabel(v) {
     }
     return null;
 }
+function isBadLabel(s) {
+    if (!s)
+        return true;
+    if (s.length > 50)
+        return true;
+    if (s.startsWith('http'))
+        return true;
+    if (/^[a-fA-F0-9]{24}$/.test(s))
+        return true;
+    return false;
+}
 function listLabels(arr) {
     if (!Array.isArray(arr))
         return null;
     const labels = arr
         .map((it) => toLabel(it))
-        .filter((s) => !!s && !!s.trim());
+        .filter((s) => !!s && !!s.trim() && !isBadLabel(s));
     return labels.length ? labels : null;
 }
 function summarizeList(labels, max = 10) {
@@ -210,10 +251,17 @@ function maybeParseJson(val) {
         return val;
     }
 }
-function renderValue(input, key) {
+function renderValue(input, key, attr) {
     const val = maybeParseJson(input);
     if (val == null)
         return _jsx("span", { className: "text-foreground/50", children: "\u2014" });
+    // Detect rich text (explicit or heuristic)
+    const a = Array.isArray(attr) ? attr[0] : attr;
+    const isRich = a?.rich === true;
+    const looksLikeHtml = typeof val === 'string' && HTML_TAG_RE.test(val);
+    if ((isRich || looksLikeHtml) && typeof val === 'string' && val.length > 3) {
+        return (_jsx("div", { className: "prose prose-sm max-w-none dark:prose-invert", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(val) } }));
+    }
     // Only parse dates for known date fields (createdAt, updatedAt, deletedAt)
     if (isDateField(key)) {
         const d = tryParseDate(val);
@@ -222,38 +270,51 @@ function renderValue(input, key) {
             return (_jsx("time", { dateTime: iso, title: iso, className: "whitespace-pre-wrap", children: formatDateTimeLocal(d) }));
         }
     }
+    // Detect and format plain time strings (e.g. "14:00" -> "2:00 PM")
+    const localizedTime = formatTimeLocal(val);
+    if (localizedTime)
+        return _jsx("span", { children: localizedTime });
     // Detect images
     const urls = extractAllImageUrls(val);
     if (urls.length)
         return _jsx(ImageThumbs, { urls: urls });
     // Primitive or simple object/array formatting via shared formatter
     if (Array.isArray(val)) {
+        const head = Array.isArray(attr) ? attr[0] : attr;
+        const showKey = head?.show;
         // Prefer shared summarizer for arrays
         if (val.length && typeof val[0] === 'object') {
             // Show each summarized object on its own line for readability
             const lines = val
-                .map((v) => (v && typeof v === 'object' ? summarizeObject(v)?.text : null))
+                .map((v) => (v && typeof v === 'object' ? summarizeObject(v, showKey)?.text : null))
                 .filter((s) => !!s && !!s.trim());
             if (lines.length) {
                 return (_jsx("div", { className: "grid gap-1", children: lines.map((s, i) => (_jsx("div", { className: "text-foreground/90", children: s }, i))) }));
             }
         }
         // Fallback detailed rendering
-        return (_jsx("div", { className: "grid gap-2", children: val.map((v, i) => (_jsx("div", { className: "rounded-medium border border-default-100 p-2", children: typeof v === 'object' && v !== null ? (_jsx(ObjectView, { obj: v })) : (_jsx("span", { children: formatCell(v, key) })) }, i))) }));
+        return (_jsx("div", { className: "grid gap-2", children: val.map((v, i) => {
+                const head = Array.isArray(attr) ? attr[0] : attr;
+                const subAttributes = head?.attributes;
+                const subShowKey = head?.show;
+                return (_jsx("div", { className: "rounded-medium border border-default-100 p-2", children: typeof v === 'object' && v !== null ? (_jsx(ObjectView, { obj: v, attributes: subAttributes, showKey: subShowKey })) : (_jsx("span", { children: formatCell(v, key) })) }, i));
+            }) }));
     }
     if (typeof val === 'object') {
-        const condensed = summarizeObject(val)?.text || tryCondenseEntity(val);
+        const showKey = (Array.isArray(attr) ? attr[0] : attr)?.show;
+        const condensed = summarizeObject(val, showKey)?.text || tryCondenseEntity(val);
         if (condensed)
             return _jsx("span", { children: condensed });
-        return _jsx(ObjectView, { obj: val });
+        const head = Array.isArray(attr) ? attr[0] : attr;
+        return _jsx(ObjectView, { obj: val, attributes: head?.attributes, showKey: showKey });
     }
     return _jsx("span", { children: formatCell(val, key) });
 }
-function ObjectView({ obj }) {
+function ObjectView({ obj, attributes, showKey }) {
     const entries = Object.entries(obj).filter(([k]) => !HIDDEN_KEYS.has(k) && !isPasswordKeyRaw(k));
     if (!entries.length)
         return _jsx("span", { className: "text-foreground/50", children: '{ }' });
-    return (_jsx("div", { className: "grid gap-1", children: entries.map(([k, v]) => (_jsxs("div", { className: "flex gap-2 items-start", children: [_jsxs("div", { className: "min-w-24 text-foreground/60 text-sm", children: [humanizeLabel(k), ":"] }), _jsx("div", { className: "flex-1", children: renderValue(v, k) })] }, k))) }));
+    return (_jsx("div", { className: "grid gap-1", children: entries.map(([k, v]) => (_jsxs("div", { className: "flex gap-2 items-start", children: [_jsxs("div", { className: "min-w-24 text-foreground/60 text-sm", children: [humanizeLabel(k), ":"] }), _jsx("div", { className: "flex-1", children: renderValue(v, k, attributes?.[k]) })] }, k))) }));
 }
 export function DynamicViewer({ schema, data }) {
     // Use schema order if available, otherwise object keys order
@@ -270,5 +331,5 @@ export function DynamicViewer({ schema, data }) {
             return base;
         return Object.keys(data || {}).filter((k) => !HIDDEN_KEYS.has(k) && !isPasswordKeyRaw(k));
     }, [attributes, data]);
-    return (_jsx("div", { className: "grid gap-1", children: keys.map((key) => (_jsx(FieldRow, { label: humanizeLabel(key), children: renderValue(data?.[key], key) }, key))) }));
+    return (_jsx("div", { className: "grid gap-1", children: keys.map((key) => (_jsx(FieldRow, { label: humanizeLabel(key), children: renderValue(data?.[key], key, attributes[key]) }, key))) }));
 }

package/dist/hooks/useRealtime.d.ts

@@ -0,0 +1,8 @@
+export interface RealtimeEvent {
+    event: string;
+    payload: any;
+}
+export declare function useRealtime(): {
+    isConnected: boolean;
+    lastEvent: RealtimeEvent | null;
+};