@carlonicora/nextjs-jsonapi 1.123.2 → 1.124.1

package/dist/components/index.mjs

@@ -183,6 +183,7 @@ import {
   EmptyState,
   EntityAvatar,
   EntityMultiSelector,
+  EntitySelector,
   ErrorDetails,
   Field,
   FieldContent,
@@ -202,7 +203,9 @@ import {
   ForgotPassword,
   Form,
   FormBlockNote,
+  FormBody,
   FormCheckbox,
+  FormCol,
   FormDate,
   FormDateTime,
   FormFeatures,
@@ -211,6 +214,8 @@ import {
   FormPassword,
   FormPlaceAutocomplete,
   FormRoles,
+  FormRow,
+  FormSection,
   FormSelect,
   FormSlider,
   FormSwitch,
@@ -464,7 +469,7 @@ import {
   useFileUpload,
   useMentionInsert,
   useSidebar
-} from "../chunk-J2ACFNKE.mjs";
+} from "../chunk-NXRUJIU2.mjs";
 import "../chunk-6VNRUTZR.mjs";
 import {
   getIcon,
@@ -664,6 +669,7 @@ export {
   EmptyState,
   EntityAvatar,
   EntityMultiSelector,
+  EntitySelector,
   ErrorDetails,
   Field,
   FieldContent,
@@ -683,7 +689,9 @@ export {
   ForgotPassword,
   Form,
   FormBlockNote,
+  FormBody,
   FormCheckbox,
+  FormCol,
   FormDate,
   FormDateTime,
   FormFeatures,
@@ -692,6 +700,8 @@ export {
   FormPassword,
   FormPlaceAutocomplete,
   FormRoles,
+  FormRow,
+  FormSection,
   FormSelect,
   FormSlider,
   FormSwitch,

package/dist/contexts/index.js

@@ -31,7 +31,7 @@
 
 
 
-var _chunk63FZJ7UKjs = require('../chunk-63FZJ7UK.js');
+var _chunkFOKYS5QEjs = require('../chunk-FOKYS5QE.js');
 require('../chunk-JO5BLONK.js');
 require('../chunk-PQBKPWBY.js');
 require('../chunk-LXKSUWAV.js');
@@ -71,5 +71,5 @@ require('../chunk-7QVYU63E.js');
 
 
 
-exports.AssistantProvider = _chunk63FZJ7UKjs.AssistantProvider; exports.CommonProvider = _chunk63FZJ7UKjs.CommonProvider; exports.CompanyProvider = _chunk63FZJ7UKjs.CompanyProvider; exports.CurrentUserProvider = _chunk63FZJ7UKjs.CurrentUserProvider; exports.DEFAULT_ONBOARDING_LABELS = _chunk63FZJ7UKjs.DEFAULT_ONBOARDING_LABELS; exports.HeaderChildrenProvider = _chunk63FZJ7UKjs.HeaderChildrenProvider; exports.HeaderLeftContentProvider = _chunk63FZJ7UKjs.HeaderLeftContentProvider; exports.HowToProvider = _chunk63FZJ7UKjs.HowToProvider; exports.NotificationContextProvider = _chunk63FZJ7UKjs.NotificationContextProvider; exports.OnboardingProvider = _chunk63FZJ7UKjs.OnboardingProvider; exports.RbacProvider = _chunk63FZJ7UKjs.RbacProvider; exports.RoleProvider = _chunk63FZJ7UKjs.RoleProvider; exports.SharedProvider = _chunk63FZJ7UKjs.SharedProvider; exports.SocketContext = _chunk63FZJ7UKjs.SocketContext; exports.SocketProvider = _chunk63FZJ7UKjs.SocketProvider; exports.UserProvider = _chunk63FZJ7UKjs.UserProvider; exports.recentPagesAtom = _chunk63FZJ7UKjs.recentPagesAtom; exports.useAssistantContext = _chunk63FZJ7UKjs.useAssistantContext; exports.useCommonContext = _chunk63FZJ7UKjs.useCommonContext; exports.useCompanyContext = _chunk63FZJ7UKjs.useCompanyContext; exports.useCurrentUserContext = _chunk63FZJ7UKjs.useCurrentUserContext; exports.useHeaderChildren = _chunk63FZJ7UKjs.useHeaderChildren; exports.useHeaderLeftContent = _chunk63FZJ7UKjs.useHeaderLeftContent; exports.useHowToContext = _chunk63FZJ7UKjs.useHowToContext; exports.useNotificationContext = _chunk63FZJ7UKjs.useNotificationContext; exports.useOnboarding = _chunk63FZJ7UKjs.useOnboarding; exports.useRbacContext = _chunk63FZJ7UKjs.useRbacContext; exports.useRoleContext = _chunk63FZJ7UKjs.useRoleContext; exports.useSharedContext = _chunk63FZJ7UKjs.useSharedContext; exports.useSocketContext = _chunk63FZJ7UKjs.useSocketContext; exports.useUserContext = _chunk63FZJ7UKjs.useUserContext;
+exports.AssistantProvider = _chunkFOKYS5QEjs.AssistantProvider; exports.CommonProvider = _chunkFOKYS5QEjs.CommonProvider; exports.CompanyProvider = _chunkFOKYS5QEjs.CompanyProvider; exports.CurrentUserProvider = _chunkFOKYS5QEjs.CurrentUserProvider; exports.DEFAULT_ONBOARDING_LABELS = _chunkFOKYS5QEjs.DEFAULT_ONBOARDING_LABELS; exports.HeaderChildrenProvider = _chunkFOKYS5QEjs.HeaderChildrenProvider; exports.HeaderLeftContentProvider = _chunkFOKYS5QEjs.HeaderLeftContentProvider; exports.HowToProvider = _chunkFOKYS5QEjs.HowToProvider; exports.NotificationContextProvider = _chunkFOKYS5QEjs.NotificationContextProvider; exports.OnboardingProvider = _chunkFOKYS5QEjs.OnboardingProvider; exports.RbacProvider = _chunkFOKYS5QEjs.RbacProvider; exports.RoleProvider = _chunkFOKYS5QEjs.RoleProvider; exports.SharedProvider = _chunkFOKYS5QEjs.SharedProvider; exports.SocketContext = _chunkFOKYS5QEjs.SocketContext; exports.SocketProvider = _chunkFOKYS5QEjs.SocketProvider; exports.UserProvider = _chunkFOKYS5QEjs.UserProvider; exports.recentPagesAtom = _chunkFOKYS5QEjs.recentPagesAtom; exports.useAssistantContext = _chunkFOKYS5QEjs.useAssistantContext; exports.useCommonContext = _chunkFOKYS5QEjs.useCommonContext; exports.useCompanyContext = _chunkFOKYS5QEjs.useCompanyContext; exports.useCurrentUserContext = _chunkFOKYS5QEjs.useCurrentUserContext; exports.useHeaderChildren = _chunkFOKYS5QEjs.useHeaderChildren; exports.useHeaderLeftContent = _chunkFOKYS5QEjs.useHeaderLeftContent; exports.useHowToContext = _chunkFOKYS5QEjs.useHowToContext; exports.useNotificationContext = _chunkFOKYS5QEjs.useNotificationContext; exports.useOnboarding = _chunkFOKYS5QEjs.useOnboarding; exports.useRbacContext = _chunkFOKYS5QEjs.useRbacContext; exports.useRoleContext = _chunkFOKYS5QEjs.useRoleContext; exports.useSharedContext = _chunkFOKYS5QEjs.useSharedContext; exports.useSocketContext = _chunkFOKYS5QEjs.useSocketContext; exports.useUserContext = _chunkFOKYS5QEjs.useUserContext;
 //# sourceMappingURL=index.js.map

package/dist/contexts/index.mjs

@@ -31,7 +31,7 @@ import {
   useSharedContext,
   useSocketContext,
   useUserContext
-} from "../chunk-J2ACFNKE.mjs";
+} from "../chunk-NXRUJIU2.mjs";
 import "../chunk-6VNRUTZR.mjs";
 import "../chunk-T2FFT7JT.mjs";
 import "../chunk-AUXK7QSA.mjs";

package/dist/features/help/index.js

@@ -21,7 +21,7 @@ var _chunkYBZVWLPHjs = require('../../chunk-YBZVWLPH.js');
 
 
 
-var _chunk63FZJ7UKjs = require('../../chunk-63FZJ7UK.js');
+var _chunkFOKYS5QEjs = require('../../chunk-FOKYS5QE.js');
 
 
 var _chunkJO5BLONKjs = require('../../chunk-JO5BLONK.js');
@@ -73,29 +73,29 @@ var _lucidereact = require('lucide-react');
 
 
 function HelpAssistantSheet({ open, onOpenChange }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk63FZJ7UKjs.SheetContent,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.Sheet, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkFOKYS5QEjs.SheetContent,
     {
       side: "right",
       className: "flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.AssistantProvider, { manageUrl: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAssistantSheetBody, {}) })
     }
   ) });
 }
 _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheet, "HelpAssistantSheet");
 function HelpAssistantSheetBody() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const ctx = _chunk63FZJ7UKjs.useAssistantContext.call(void 0, );
+  const ctx = _chunkFOKYS5QEjs.useAssistantContext.call(void 0, );
   const showThread = !!ctx.assistant || ctx.sending || ctx.messages.length > 0;
   const send = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (content) => ctx.sendMessage(content, { howToMode: true }), "send");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk63FZJ7UKjs.SheetHeader, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.SheetTitle, { children: t("help.askAi.sheet.title") }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFOKYS5QEjs.SheetHeader, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.SheetTitle, { children: t("help.askAi.sheet.title") }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.SheetDescription, { children: t("help.askAi.sheet.subtitle") })
     ] }),
-    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !showThread ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.AssistantEmptyState, { onSend: send }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk63FZJ7UKjs.AssistantThread,
+        _chunkFOKYS5QEjs.AssistantThread,
         {
           messages: ctx.messages,
           sending: ctx.sending,
@@ -105,7 +105,7 @@ function HelpAssistantSheetBody() {
           onRetry: ctx.retrySend
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.AssistantComposer, { onSend: send, disabled: ctx.sending })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.AssistantComposer, { onSend: send, disabled: ctx.sending })
     ] })
   ] });
 }
@@ -115,20 +115,20 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAssistantSheetBody, "HelpAssistantSheet
 
 function HelpAskAi() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunk63FZJ7UKjs.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkFOKYS5QEjs.useCurrentUserContext.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const disabled = !currentUser;
   if (disabled) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk63FZJ7UKjs.Tooltip, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk63FZJ7UKjs.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.Button, { variant: "outline", size: "sm", disabled: true }), children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFOKYS5QEjs.Tooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFOKYS5QEjs.TooltipTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.Button, { variant: "outline", size: "sm", disabled: true }), children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
         t("help.askAi.button")
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.TooltipContent, { children: t("help.askAi.loginTooltip") })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.TooltipContent, { children: t("help.askAi.loginTooltip") })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk63FZJ7UKjs.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFOKYS5QEjs.Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SparklesIcon, { className: "h-4 w-4" }),
       t("help.askAi.button")
     ] }),
@@ -141,7 +141,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpAskAi, "HelpAskAi");
 
 function HelpHeader() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const { currentUser } = _chunk63FZJ7UKjs.useCurrentUserContext.call(void 0, );
+  const { currentUser } = _chunkFOKYS5QEjs.useCurrentUserContext.call(void 0, );
   const { brand } = useHelp();
   const logo = _optionalChain([brand, 'optionalAccess', _ => _.logo]);
   const label = _nullishCoalesce(_optionalChain([brand, 'optionalAccess', _2 => _2.label]), () => ( "Help"));
@@ -157,7 +157,7 @@ function HelpHeader() {
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HelpAskAi, {}),
-      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
+      currentUser ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: appHref }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.openApp") }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.Button, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _link2.default, { href: "/login" }), nativeButton: false, variant: "outline", size: "sm", children: t("help.header.login") })
     ] })
   ] });
 }
@@ -199,7 +199,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, useHelpFilter, "useHelpFilter");
 
 function HelpSideNav() {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunk63FZJ7UKjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkFOKYS5QEjs.usePageUrlGenerator.call(void 0, );
   const pathname = _navigation.usePathname.call(void 0, );
   const [articles, setArticles] = _react.useState.call(void 0, []);
   _react.useEffect.call(void 0, () => {
@@ -280,7 +280,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpSideNav, "HelpSideNav");
 function HelpArticleBody(props) {
   const t = _nextintl.useTranslations.call(void 0, );
   const format = _nextintl.useFormatter.call(void 0, );
-  const generateUrl = _chunk63FZJ7UKjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkFOKYS5QEjs.usePageUrlGenerator.call(void 0, );
   const { howToType, title, summary, updatedAt, prev, next, children } = props;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "article", { className: "prose dark:prose-invert max-w-none", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: "text-muted-foreground mb-2 text-xs", children: [
@@ -358,7 +358,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpTOC, "HelpTOC");
 
 function HelpHint({ contextKey }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunk63FZJ7UKjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkFOKYS5QEjs.usePageUrlGenerator.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const [picked, setPicked] = _react.useState.call(void 0, null);
   const [articles, setArticles] = _react.useState.call(void 0, []);
@@ -376,7 +376,7 @@ function HelpHint({ contextKey }) {
   if (matches.length === 0) return null;
   const active = _nullishCoalesce(picked, () => ( (matches.length === 1 ? matches[0] : null)));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunk63FZJ7UKjs.Sheet,
+    _chunkFOKYS5QEjs.Sheet,
     {
       open,
       onOpenChange: (o) => {
@@ -384,11 +384,11 @@ function HelpHint({ contextKey }) {
         if (!o) setPicked(null);
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk63FZJ7UKjs.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk63FZJ7UKjs.SheetHeader, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.SheetTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.Button, { variant: "ghost", size: "icon-sm", "aria-label": t("help.hint.trigger") }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.HelpCircleIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFOKYS5QEjs.SheetContent, { side: "right", className: "w-full max-w-md sm:max-w-lg", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFOKYS5QEjs.SheetHeader, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.SheetTitle, { children: active ? active.name : t("help.hint.pickArticle") }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.SheetDescription, { children: _nullishCoalesce(_optionalChain([active, 'optionalAccess', _4 => _4.summary]), () => ( "")) })
           ] }),
           active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-4 space-y-3", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-muted-foreground text-sm", children: active.summary }),
@@ -420,7 +420,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, HelpHint, "HelpHint");
 
 function HelpSearchResultRow({ result, onSelect }) {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunk63FZJ7UKjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkFOKYS5QEjs.usePageUrlGenerator.call(void 0, );
   const [article, setArticle] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
     let active = true;
@@ -431,7 +431,7 @@ function HelpSearchResultRow({ result, onSelect }) {
   }, [result.id]);
   if (!article) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk63FZJ7UKjs.CommandItem,
+      _chunkFOKYS5QEjs.CommandItem,
       {
         value: result.id,
         disabled: true,
@@ -440,7 +440,7 @@ function HelpSearchResultRow({ result, onSelect }) {
       }
     );
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63FZJ7UKjs.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFOKYS5QEjs.CommandItem, { value: result.id, onSelect, className: "cursor-pointer p-0", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _link2.default,
     {
       href: generateUrl({ page: `/help/${article.howToType}/${article.slug}` }),

package/dist/features/help/index.mjs

@@ -21,7 +21,7 @@ import {
   useAssistantContext,
   useCurrentUserContext,
   usePageUrlGenerator
-} from "../../chunk-J2ACFNKE.mjs";
+} from "../../chunk-NXRUJIU2.mjs";
 import {
   _getStaticHelpContent
 } from "../../chunk-6VNRUTZR.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.123.2",
+  "version": "1.124.1",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/containers/RoundPageContainer.tsx

@@ -335,28 +335,28 @@ export function RoundPageContainer({
                   </div>
                 </div>
               )}
-              {details &&
-                (isMobile ? (
-                  <Sheet open={showDetails} onOpenChange={setShowDetails}>
-                    <SheetContent side="right">
-                      <SheetHeader>
-                        <SheetTitle>Details</SheetTitle>
-                      </SheetHeader>
-                      <div className="overflow-y-auto p-6 pt-0">{details}</div>
-                    </SheetContent>
-                  </Sheet>
-                ) : (
-                  <div
-                    className={cn(
-                      "h-full shrink-0 overflow-hidden overflow-y-auto transition-all duration-300 ease-in-out",
-                      showDetails ? "w-96 border-l p-4 opacity-100" : "ml-0 w-0 border-l-0 p-0 opacity-0",
-                    )}
-                  >
-                    {details}
-                  </div>
-                ))}
             </div>
           </div>
+          {details &&
+            (isMobile ? (
+              <Sheet open={showDetails} onOpenChange={setShowDetails}>
+                <SheetContent side="right">
+                  <SheetHeader>
+                    <SheetTitle>Details</SheetTitle>
+                  </SheetHeader>
+                  <div className="overflow-y-auto p-6 pt-0">{details}</div>
+                </SheetContent>
+              </Sheet>
+            ) : (
+              <div
+                className={cn(
+                  "h-full shrink-0 overflow-hidden overflow-y-auto transition-all duration-300 ease-in-out",
+                  showDetails ? "w-96 border-l p-4 opacity-100" : "ml-0 w-0 border-l-0 p-0 opacity-0",
+                )}
+              >
+                {details}
+              </div>
+            ))}
         </div>
       </div>
     </>

package/src/components/forms/EntityMultiSelector.tsx

@@ -26,6 +26,9 @@ type EntityMultiSelectorProps<T extends { id: string }> = {
   excludeId?: string;
   onChange?: (entities?: T[]) => void;
   renderOption?: (entity: T, isSelected: boolean) => ReactNode;
+  ready?: boolean;
+  description?: string;
+  disabled?: boolean;
 };
 
 type OptionData<T> = {
@@ -52,6 +55,9 @@ export function EntityMultiSelector<T extends { id: string }>({
   excludeId,
   onChange,
   renderOption,
+  ready = true,
+  description,
+  disabled = false,
 }: EntityMultiSelectorProps<T>) {
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
@@ -94,10 +100,14 @@ export function EntityMultiSelector<T extends { id: string }>({
   const data: DataListRetriever<T> = useDataListRetriever({
     retriever: (params) => retriever(params),
     retrieverParams,
-    ready: true,
+    ready,
     module,
   });
 
+  useEffect(() => {
+    if (ready) data.setReady(true);
+  }, [ready]);
+
   const updateSearch = useCallback(
     (searchedTerm: string) => {
       if (searchedTerm.trim()) {
@@ -211,12 +221,14 @@ export function EntityMultiSelector<T extends { id: string }>({
 
   return (
     <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
+      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired} description={description}>
         {() => (
           <div className="flex flex-col gap-2">
             <Popover open={open} onOpenChange={setOpen} modal>
               <PopoverTrigger className="w-full">
-                <div className="bg-input/20 dark:bg-input/30 border-input flex min-h-7 w-full items-center gap-2 rounded-md border px-2 text-sm md:text-xs/relaxed">
+                <div
+                  className={`bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] flex min-h-7 w-full items-center gap-2 rounded-md border px-2 text-sm md:text-xs/relaxed`}
+                >
                   {selectedValues.length > 0 ? (
                     <>
                       <span className="text-foreground min-w-0 flex-1 truncate text-left">{triggerSummary}</span>

package/src/components/forms/EntitySelector.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { CircleX, Plus, RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { Command, CommandItem, CommandList } from "../../shadcnui/ui/command";
+import { Input } from "../../shadcnui/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "../../shadcnui/ui/popover";
+import { FormFieldWrapper } from "./FormFieldWrapper";
+import { type DataListRetriever, useDataListRetriever } from "../../hooks/useDataListRetriever";
+import { useDebounce } from "../../hooks/useDebounce";
+
+type BaseEntity = { id: string };
+
+type EntitySelectorProps<T extends BaseEntity> = {
+  id: string;
+  form: any;
+  module: any;
+  retriever: (params: any) => Promise<T[]>;
+  retrieverParams?: Record<string, any>;
+  getLabel?: (entity: T) => string;
+  label?: string;
+  placeholder?: string;
+  emptyText?: string;
+  isRequired?: boolean;
+  disabled?: boolean;
+  description?: string;
+  ready?: boolean;
+  onChange?: (entity?: T) => void;
+  onCreateNew?: (name: string) => Promise<T | undefined>;
+  createNewLabel?: (searchTerm: string) => string;
+  toFormValue?: (entity: T) => Record<string, any>;
+  getSelectedItemDisplay?: (value: Record<string, any>) => ReactNode;
+  renderOption?: (entity: T, onSelect: () => void) => ReactNode;
+  filterData?: (data: T[]) => T[];
+  renderAfter?: (props: { form: any; selectedEntity?: T }) => ReactNode;
+  autoSelectSingle?: boolean;
+  useFormWatch?: boolean;
+};
+
+export default function EntitySelector<T extends BaseEntity>({
+  id,
+  form,
+  module,
+  retriever,
+  retrieverParams,
+  ready = true,
+  getLabel = (entity: T) => (entity as any).name,
+  label,
+  placeholder = "Search...",
+  emptyText,
+  isRequired = false,
+  disabled = false,
+  description,
+  onChange,
+  onCreateNew,
+  createNewLabel,
+  toFormValue = (entity: T) => ({ id: entity.id, name: (entity as any).name }),
+  getSelectedItemDisplay,
+  renderOption,
+  filterData,
+  renderAfter,
+  autoSelectSingle = false,
+  useFormWatch: shouldUseFormWatch = false,
+}: EntitySelectorProps<T>) {
+  const [open, setOpen] = useState<boolean>(false);
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [isCreating, setIsCreating] = useState<boolean>(false);
+  const [selectedEntity, setSelectedEntity] = useState<T | undefined>(undefined);
+
+  const watchedValue = shouldUseFormWatch ? form.watch(id) : undefined;
+
+  const data: DataListRetriever<T> = useDataListRetriever<T>({
+    retriever: (params) => retriever(params),
+    retrieverParams: retrieverParams ?? {},
+    ready,
+    module,
+  });
+
+  useEffect(() => {
+    if (ready) data.setReady(true);
+  }, [ready]);
+
+  const search = useCallback(
+    async (searchedTerm: string) => {
+      try {
+        if (searchedTerm === searchTermRef.current) return;
+        setIsSearching(true);
+        searchTermRef.current = searchedTerm;
+        await data.search(searchedTerm);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchTermRef, data],
+  );
+
+  const updateSearchTerm = useDebounce(search, 500);
+
+  useEffect(() => {
+    setIsSearching(true);
+    updateSearchTerm(searchTerm);
+  }, [updateSearchTerm, searchTerm]);
+
+  useEffect(() => {
+    if (
+      autoSelectSingle &&
+      data.isLoaded &&
+      data.data &&
+      data.data.length === 1 &&
+      searchTerm === "" &&
+      !form.getValues(id)
+    ) {
+      const entity = data.data[0];
+      form.setValue(id, toFormValue(entity));
+      setSelectedEntity(entity);
+    }
+  }, [data.isLoaded, data.data, searchTerm, form, id, autoSelectSingle, toFormValue]);
+
+  const handleSelect = (entity?: T) => {
+    setSelectedEntity(entity);
+    if (onChange) onChange(entity);
+    if (!entity) {
+      form.setValue(id, undefined);
+      setOpen(false);
+      return;
+    }
+    form.setValue(id, toFormValue(entity));
+    setOpen(false);
+    setTimeout(() => setOpen(false), 0);
+  };
+
+  const handleCreateNew = async () => {
+    if (!onCreateNew) return;
+    const trimmed = searchTerm.trim();
+    if (!trimmed || isCreating) return;
+    setIsCreating(true);
+    try {
+      const created = await onCreateNew(trimmed);
+      if (created) {
+        handleSelect(created);
+        setSearchTerm("");
+        searchTermRef.current = "";
+      }
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const displayData = filterData ? filterData((data.data as T[]) ?? []) : ((data.data as T[]) ?? []);
+
+  const hasValue = (value: any) => {
+    if (value == null) return false;
+    if (typeof value === "object") return !!value.id;
+    return !!value;
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired} description={description}>
+        {(field) => {
+          const effectiveValue = shouldUseFormWatch ? watchedValue : field.value;
+          return (
+            <Popover open={disabled ? false : open} onOpenChange={disabled ? undefined : setOpen} modal={true}>
+              <PopoverTrigger className="w-full" disabled={disabled}>
+                <div
+                  className={`bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] flex min-h-7 w-full items-center gap-2 rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed ${
+                    hasValue(effectiveValue) ? "" : "text-muted-foreground"
+                  } ${disabled ? "cursor-not-allowed opacity-50" : ""}`}
+                >
+                  <span className="min-w-0 flex-1 truncate text-left">
+                    {hasValue(effectiveValue)
+                      ? getSelectedItemDisplay
+                        ? getSelectedItemDisplay(effectiveValue)
+                        : (effectiveValue?.name ?? "")
+                      : placeholder}
+                  </span>
+                  {hasValue(effectiveValue) && !disabled && (
+                    <CircleX
+                      className="text-muted hover:text-destructive ml-auto h-4 w-4 shrink-0 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        handleSelect();
+                      }}
+                    />
+                  )}
+                </div>
+              </PopoverTrigger>
+              <PopoverContent align="start" className="w-(--anchor-width) pointer-events-auto">
+                <Command shouldFilter={false}>
+                  <div className="relative mb-2 w-full">
+                    <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                    <Input
+                      placeholder={placeholder}
+                      type="text"
+                      className="w-full pr-8 pl-8"
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                      value={searchTerm}
+                    />
+                    {isSearching ? (
+                      <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                    ) : searchTermRef.current ? (
+                      <XIcon
+                        className="absolute top-2.5 right-2.5 h-4 w-4 cursor-pointer"
+                        onClick={() => {
+                          setSearchTerm("");
+                          search("");
+                        }}
+                      />
+                    ) : null}
+                  </div>
+                  <CommandList>
+                    {onCreateNew && (
+                      <CommandItem
+                        key="__create_new__"
+                        value="__create_new__"
+                        className={`cursor-pointer ${!searchTerm.trim() || isCreating ? "opacity-50 pointer-events-none" : ""}`}
+                        disabled={!searchTerm.trim() || isCreating}
+                        onSelect={handleCreateNew}
+                      >
+                        {isCreating ? (
+                          <RefreshCwIcon className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                          <Plus className="mr-2 h-4 w-4" />
+                        )}
+                        <span>{createNewLabel ? createNewLabel(searchTerm) : searchTerm.trim() || ""}</span>
+                      </CommandItem>
+                    )}
+                    {renderOption
+                      ? displayData.map((entity: T) => renderOption(entity, () => handleSelect(entity)))
+                      : displayData.map((entity: T) => (
+                          <CommandItem
+                            className="cursor-pointer bg-transparent data-selected:bg-transparent hover:bg-muted data-selected:hover:bg-muted"
+                            key={entity.id}
+                            value={entity.id}
+                            onSelect={() => handleSelect(entity)}
+                          >
+                            <span>{getLabel(entity)}</span>
+                          </CommandItem>
+                        ))}
+                    {emptyText && displayData.length === 0 && !onCreateNew && (
+                      <div className="text-muted-foreground py-6 text-center text-xs">{emptyText}</div>
+                    )}
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          );
+        }}
+      </FormFieldWrapper>
+      {renderAfter && renderAfter({ form, selectedEntity })}
+    </div>
+  );
+}