@sesionario/blocks 1.17.0 → 1.18.0

package/dist/index.cjs

@@ -1746,7 +1746,7 @@ function PlatformNavbar({
             innerClassName
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: logo }),
+            logo != null && logo !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: logo }) : null,
             leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -1831,11 +1831,6 @@ var defaultLabels3 = {
   personalProfile: "Personal profile",
   activity: "Activity",
   professionalProfile: "Professional profile",
-  mainApp: "Main app",
-  orgManagement: "Organization management",
-  backoffice: "Backoffice",
-  memberOrgs: "My organizations",
-  managementOrgs: "Management team",
   showMoreOrgs: "Show more",
   showLessOrgs: "Show less",
   manageOrg: "Manage organization",
@@ -1914,9 +1909,9 @@ function LanguageThemeSubs({
   const themeValue = theme ?? "system";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "size-4" }),
-        labels.language
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2 [&>svg:last-child]:ml-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.language }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "size-4" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsxRuntime.jsx(
         DropdownMenuRadioGroup,
@@ -1928,9 +1923,9 @@ function LanguageThemeSubs({
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-        themeValue === "light" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "size-4" }) : themeValue === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "size-4" }),
-        labels.theme
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2 [&>svg:last-child]:ml-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.theme }),
+        themeValue === "light" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "size-4" }) : themeValue === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "size-4" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuRadioGroup, { value: themeValue, onValueChange: setTheme, children: [
         /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioItem, { value: "system", children: labels.themeSystem }),
@@ -1964,14 +1959,14 @@ function OrgMenuRows({
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "relative flex items-center",
+              className: "relative",
               "data-testid": `platform-account-org-${org.id}`,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DropdownMenuItem,
                   {
                     asChild: true,
-                    className: cn("min-w-0 flex-1 gap-2", org.canManage && "pr-9"),
+                    className: cn("gap-2", org.canManage && "pr-9"),
                     children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: orgHomeHref, children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         MenuAvatar,
@@ -1981,7 +1976,7 @@ function OrgMenuRows({
                           sizeClass: "size-6"
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: org.name })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name })
                     ] })
                   }
                 ),
@@ -1989,8 +1984,8 @@ function OrgMenuRows({
                   DropdownMenuItem,
                   {
                     asChild: true,
-                    className: "absolute right-1 top-1/2 size-7 -translate-y-1/2 p-0",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: manageHref, "aria-label": labels.manageOrg, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-3.5" }) })
+                    className: "absolute right-0.5 top-1/2 size-7 -translate-y-1/2 p-0",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: manageHref, "aria-label": labels.manageOrg, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" }) })
                   }
                 ) : null
               ]
@@ -1998,7 +1993,7 @@ function OrgMenuRows({
             org.id
           );
         }),
-        collapsible ? /* @__PURE__ */ jsxRuntime.jsx(
+        collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
           DropdownMenuItem,
           {
             className: "gap-2",
@@ -2006,13 +2001,10 @@ function OrgMenuRows({
               event.preventDefault();
               setExpanded((value) => !value);
             },
-            children: expanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }),
-              labels.showLessOrgs
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }),
-              labels.showMoreOrgs
-            ] })
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: expanded ? labels.showLessOrgs : labels.showMoreOrgs }),
+              expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
+            ]
           }
         ) : null
       ]
@@ -2023,7 +2015,6 @@ function PlatformAccountMenu({
   variant = "platform",
   isPending = false,
   user = null,
-  isAdmin = false,
   verificationStatus = "unverified",
   urls,
   memberOrgs = [],
@@ -2047,6 +2038,7 @@ function PlatformAccountMenu({
     () => mergePlatformAccountOrgs(memberOrgs, manageableOrgs),
     [memberOrgs, manageableOrgs]
   );
+  const hasOrgs = mergedOrgs.length > 0;
   const loginHref = `${urls.authAppUrl}${urls.loginPath ?? "/login"}`;
   const accountHref = `${urls.authAppUrl}${urls.accountPath ?? "/account"}`;
   const activityHref = `${urls.authAppUrl}${urls.activityPath ?? "/account/activity"}`;
@@ -2126,37 +2118,36 @@ function PlatformAccountMenu({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
           variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            hasOrgs ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                OrgMenuRows,
+                {
+                  orgs: mergedOrgs,
+                  appUrl: urls.appUrl,
+                  adminUrl: urls.adminUrl,
+                  labels
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
+            ] }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
-              labels.personalProfile
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.personalProfile }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: activityHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" }),
-              labels.activity
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.activity }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: profileHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
-              labels.professionalProfile
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.professionalProfile }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              OrgMenuRows,
-              {
-                orgs: mergedOrgs,
-                appUrl: urls.appUrl,
-                adminUrl: urls.adminUrl,
-                labels
-              }
-            ),
             extraItems,
-            isAdmin && urls.backofficeUrl ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: urls.backofficeUrl, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutDashboard, { className: "size-4" }),
-              labels.backoffice
-            ] }) }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" }),
-              labels.accountSettings
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.accountSettings }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
             ] }) }),
             extraItems,
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
@@ -2181,8 +2172,8 @@ function PlatformAccountMenu({
                 void handleSignOut();
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" }),
-                signingOut ? labels.signingOut : labels.signOut
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: signingOut ? labels.signingOut : labels.signOut }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" })
               ]
             }
           )
@@ -2198,8 +2189,8 @@ function PlatformAccountMenu({
           ),
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: loginHref, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" }),
-            labels.signIn
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.signIn }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" })
           ] }) })
         ] })
       }
@@ -3797,7 +3788,7 @@ function insertAtCaret(element, value, text) {
 }
 
 // src/components/emoji/emoji-field-shared.ts
-var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
+var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[[data-slot=textarea]:disabled]:opacity-50 has-[[data-slot=input]:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
 var emojiFieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
 function mergeRefs(...refs) {
   return (node) => {
@@ -4523,6 +4514,7 @@ function VideoPlayer({
   stats,
   labels,
   showQualitySelector = true,
+  paused = false,
   onPlayingChange,
   onFirstPlay,
   onError,
@@ -4614,6 +4606,11 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
+  React7__namespace.useEffect(() => {
+    const video = videoRef.current;
+    if (!paused || !video || !isPlaying) return;
+    video.pause();
+  }, [paused, videoRef, isPlaying]);
   React7__namespace.useEffect(() => {
     setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
   }, [videoRef, active]);
@@ -5121,6 +5118,106 @@ function MenuItem({
     }
   );
 }
+
+// src/components/video/feedPlaybackCoordinator.ts
+var players = /* @__PURE__ */ new Map();
+function registerFeedPlayer(id, pause) {
+  players.set(id, pause);
+  return () => {
+    if (players.get(id) === pause) {
+      players.delete(id);
+    }
+  };
+}
+function claimFeedPlaying(id) {
+  for (const [otherId, pause] of players) {
+    if (otherId !== id) pause();
+  }
+}
+
+// src/components/video/useFeedExclusivePlayback.ts
+var VISIBILITY_THRESHOLDS = [0, 0.5, 1];
+var MIN_VISIBLE_RATIO = 0.5;
+function videoInPictureInPicture(container) {
+  if (typeof document === "undefined" || !container) return false;
+  const pip = document.pictureInPictureElement;
+  if (!pip) return false;
+  return container.contains(pip);
+}
+function useFeedExclusivePlayback(playbackId) {
+  const containerRef = React7__namespace.useRef(null);
+  const [forcePaused, setForcePaused] = React7__namespace.useState(false);
+  const requestPause = React7__namespace.useCallback(() => {
+    if (videoInPictureInPicture(containerRef.current)) return;
+    setForcePaused(true);
+  }, []);
+  React7__namespace.useEffect(() => {
+    return registerFeedPlayer(playbackId, requestPause);
+  }, [playbackId, requestPause]);
+  React7__namespace.useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        if (!entry.isIntersecting || entry.intersectionRatio < MIN_VISIBLE_RATIO) {
+          requestPause();
+        }
+      },
+      { threshold: [...VISIBILITY_THRESHOLDS] }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [requestPause]);
+  React7__namespace.useEffect(() => {
+    const onVisibility = () => {
+      if (document.hidden) requestPause();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [requestPause]);
+  const onPlayingChange = React7__namespace.useCallback(
+    (playing) => {
+      if (!playing) return;
+      setForcePaused(false);
+      claimFeedPlaying(playbackId);
+    },
+    [playbackId]
+  );
+  return {
+    containerRef,
+    paused: forcePaused,
+    onPlayingChange
+  };
+}
+function FeedVideoPlayer({
+  playbackId,
+  onPlayingChange,
+  paused: pausedProp,
+  ...playerProps
+}) {
+  const {
+    containerRef,
+    paused: exclusivePaused,
+    onPlayingChange: onExclusivePlayingChange
+  } = useFeedExclusivePlayback(playbackId);
+  const handlePlayingChange = React7__namespace.useCallback(
+    (playing) => {
+      onExclusivePlayingChange(playing);
+      onPlayingChange?.(playing);
+    },
+    [onExclusivePlayingChange, onPlayingChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, "data-slot": "feed-video-player", children: /* @__PURE__ */ jsxRuntime.jsx(
+    VideoPlayer,
+    {
+      ...playerProps,
+      paused: pausedProp || exclusivePaused,
+      onPlayingChange: handlePlayingChange
+    }
+  ) });
+}
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
   const [stats, setStats] = React7__namespace.useState({});
   React7__namespace.useEffect(() => {
@@ -7272,6 +7369,7 @@ function SupportMessengerProvider({
   className
 }) {
   const isMobile = useMediaQuery2("(max-width: 767px)");
+  const dockRef = React7.useRef(null);
   const [listOpen, setListOpen] = React7.useState(false);
   const [threads, setThreads] = React7.useState([]);
   const [mobileThreadKey, setMobileThreadKey] = React7.useState(null);
@@ -7279,6 +7377,7 @@ function SupportMessengerProvider({
     () => items.reduce((sum, item) => sum + (item.unreadCount ?? 0), 0),
     [items]
   );
+  const isDesktopOpen = !isMobile && (listOpen || threads.length > 0);
   React7.useEffect(() => {
     if (!forceMinimized) return;
     setListOpen(false);
@@ -7321,6 +7420,20 @@ function SupportMessengerProvider({
     setThreads([]);
     setMobileThreadKey(null);
   }, []);
+  React7.useEffect(() => {
+    if (!isDesktopOpen) return;
+    function onPointerDown(event) {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (dockRef.current?.contains(target)) return;
+      if (target instanceof Element && target.closest('[data-slot="popover-content"]')) {
+        return;
+      }
+      closeAll();
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [isDesktopOpen, closeAll]);
   const ctx = React7.useMemo(
     () => ({
       listOpen,
@@ -7364,6 +7477,7 @@ function SupportMessengerProvider({
     enabled ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        ref: dockRef,
         className: cn(
           "pointer-events-none fixed right-4 bottom-4 z-50 flex flex-col items-end gap-3",
           className
@@ -7761,6 +7875,7 @@ exports.EmptyState = EmptyState;
 exports.EmptyTitle = EmptyTitle;
 exports.ErrorState = ErrorState;
 exports.ExpandableText = ExpandableText;
+exports.FeedVideoPlayer = FeedVideoPlayer;
 exports.ImageLightbox = ImageLightbox;
 exports.LanguageContext = LanguageContext;
 exports.LanguageSwitcher = LanguageSwitcher;
@@ -7814,6 +7929,7 @@ exports.normalizeEmojiQuery = normalizeEmojiQuery;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;
 exports.useDebouncedValue = useDebouncedValue;
 exports.useDebouncedValueStrict = useDebouncedValueStrict;
+exports.useFeedExclusivePlayback = useFeedExclusivePlayback;
 exports.useHlsPlayback = useHlsPlayback;
 exports.useLanguageContext = useLanguageContext;
 exports.useMediaQuery = useMediaQuery2;