@sesionario/blocks 1.11.0 → 1.13.0

package/dist/index.js

@@ -2957,8 +2957,8 @@ function EmojiPicker({
           {
             ref: scrollRef,
             onKeyDown: handleGridKeyDown,
-            className: "h-64 overflow-x-hidden overflow-y-auto p-2",
-            children: normalizedQuery ? searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-8 text-center text-sm", children: strings.noResults }) : /* @__PURE__ */ jsx(
+            className: "h-64 overflow-x-hidden overflow-y-auto px-2 pb-2",
+            children: normalizedQuery ? searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-8 text-center text-sm", children: strings.noResults }) : /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
               EmojiGrid,
               {
                 emojis: searchResults,
@@ -2967,7 +2967,7 @@ function EmojiPicker({
                 skinTone,
                 onSelect: handleSelect
               }
-            ) : sections.map((section) => {
+            ) }) : sections.map((section) => {
               const startIndex = flatOffset;
               flatOffset += section.emojis.length;
               return /* @__PURE__ */ jsxs(
@@ -2978,7 +2978,7 @@ function EmojiPicker({
                   },
                   className: "mb-2",
                   children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground bg-popover sticky top-0 z-[1] px-1 py-1 text-xs font-medium", children: section.title }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground bg-popover sticky top-0 z-[1] -mx-2 px-3 pt-2 pb-1 text-xs font-medium", children: section.title }),
                     /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -3099,7 +3099,7 @@ function EmojiPickerPopover({
   align = "end",
   open,
   onOpenChange,
-  keepOpenOnSelect = false,
+  keepOpenOnSelect = true,
   locale = "en",
   ...pickerProps
 }) {
@@ -3133,7 +3133,16 @@ function EmojiPickerPopover({
         children: /* @__PURE__ */ jsx(Smile, { className: "size-5" })
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { side, align, className: "w-auto p-0", children: /* @__PURE__ */ jsx(EmojiPicker, { onSelect: handleSelect, locale, ...pickerProps }) })
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side,
+        align,
+        className: "w-auto p-0",
+        onFocusOutside: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsx(EmojiPicker, { onSelect: handleSelect, locale, ...pickerProps })
+      }
+    )
   ] });
 }
 
@@ -3422,6 +3431,20 @@ function kindForNative(input) {
   if (code === MEDIA_ERR_NETWORK) return "unavailable";
   return "generic";
 }
+function describeAvResync(input) {
+  const lag = Number.isFinite(input.lagSeconds) ? input.lagSeconds : 0;
+  return {
+    summary: `av-resync lag=${lag.toFixed(3)}s (non-fatal)`,
+    kind: "resync",
+    detail: {
+      source: input.context.source,
+      kind: "resync",
+      fatal: false,
+      reason: `presented frame lag ${lag.toFixed(3)}s`,
+      context: input.context
+    }
+  };
+}
 function describePlaybackError(input) {
   if (input.source === "unsupported") {
     return {
@@ -3480,6 +3503,10 @@ function describePlaybackError(input) {
 // src/components/video/useHlsPlayback.ts
 var RETRY_INTERVAL_MS = 3e3;
 var MAX_MEDIA_ERROR_RETRIES = 5;
+var DRIFT_THRESHOLD_S = 0.4;
+var DRIFT_CONSECUTIVE_SAMPLES = 3;
+var RESYNC_COOLDOWN_MS = 1e4;
+var LIVE_EDGE_RESYNC_THRESHOLD_S = 8;
 function useHlsPlayback({
   src,
   mode,
@@ -3519,6 +3546,7 @@ function useHlsPlayback({
     let retryTimer = null;
     let manifestParsed = false;
     let mediaErrorRetries = 0;
+    let playbackSource = "hls";
     const teardown = [];
     media.muted = muted;
     setState("loading");
@@ -3527,7 +3555,13 @@ function useHlsPlayback({
     setQualities([]);
     setActiveLevel(-1);
     function baseContext() {
-      return { mode, src, manifestParsed, retryCount: mediaErrorRetries };
+      return {
+        mode,
+        src,
+        manifestParsed,
+        retryCount: mediaErrorRetries,
+        source: playbackSource
+      };
     }
     function clearRetryTimer() {
       if (retryTimer !== null) {
@@ -3566,6 +3600,53 @@ function useHlsPlayback({
         if (!cancelled) retryFn();
       }, RETRY_INTERVAL_MS);
     }
+    function startDriftWatchdog(el) {
+      if (typeof el.requestVideoFrameCallback !== "function") return;
+      let consecutiveLagSamples = 0;
+      let lastResyncAt = 0;
+      let handle = null;
+      const tick = (_now, metadata) => {
+        if (cancelled) return;
+        handle = el.requestVideoFrameCallback(tick);
+        if (el.paused || el.ended) {
+          consecutiveLagSamples = 0;
+          return;
+        }
+        const lag = el.currentTime - metadata.mediaTime;
+        if (!(lag > DRIFT_THRESHOLD_S)) {
+          consecutiveLagSamples = 0;
+          return;
+        }
+        consecutiveLagSamples += 1;
+        if (consecutiveLagSamples < DRIFT_CONSECUTIVE_SAMPLES) return;
+        const nowMs = performance.now();
+        if (nowMs - lastResyncAt < RESYNC_COOLDOWN_MS) return;
+        lastResyncAt = nowMs;
+        consecutiveLagSamples = 0;
+        if (mode === "live" && el.seekable.length > 0) {
+          const edge = el.seekable.end(el.seekable.length - 1);
+          if (edge - el.currentTime > LIVE_EDGE_RESYNC_THRESHOLD_S) {
+            el.currentTime = edge;
+          } else {
+            el.currentTime = el.currentTime + 1e-3;
+          }
+        } else {
+          el.currentTime = el.currentTime + 1e-3;
+        }
+        onErrorRef.current?.(
+          describeAvResync({
+            lagSeconds: lag,
+            context: baseContext()
+          })
+        );
+      };
+      handle = el.requestVideoFrameCallback(tick);
+      teardown.push(() => {
+        if (handle != null && typeof el.cancelVideoFrameCallback === "function") {
+          el.cancelVideoFrameCallback(handle);
+        }
+      });
+    }
     function onPlaying() {
       manifestParsed = true;
       mediaErrorRetries = 0;
@@ -3584,7 +3665,9 @@ function useHlsPlayback({
       media.removeEventListener("pause", onPaused);
       media.removeEventListener("ended", onPaused);
     });
+    startDriftWatchdog(media);
     function initNative() {
+      playbackSource = "native";
       manifestParsed = false;
       media.removeAttribute("src");
       media.load();
@@ -3600,7 +3683,7 @@ function useHlsPlayback({
           reportFatal({
             source: "native",
             mediaError: media.error,
-            context: { ...baseContext(), source: "native" }
+            context: baseContext()
           });
           return;
         }
@@ -3608,7 +3691,7 @@ function useHlsPlayback({
           describePlaybackError({
             source: "native",
             mediaError: media.error,
-            context: { ...baseContext(), source: "native" }
+            context: baseContext()
           })
         );
         scheduleRetry(() => {
@@ -3624,6 +3707,7 @@ function useHlsPlayback({
       });
     }
     function initHlsJs(Hls) {
+      playbackSource = "hls";
       destroyHls();
       manifestParsed = false;
       const config = mode === "live" ? createLiveHlsConfig() : createVodHlsConfig();
@@ -3655,7 +3739,7 @@ function useHlsPlayback({
             response: data.response,
             reason: data.reason,
             error: data.error,
-            context: { ...baseContext(), source: "hls" }
+            context: baseContext()
           })
         );
         if (!data.fatal) return;
@@ -3690,7 +3774,7 @@ function useHlsPlayback({
           response: data.response,
           reason: data.reason,
           error: data.error,
-          context: { ...baseContext(), source: "hls" }
+          context: baseContext()
         });
       });
     }
@@ -3707,9 +3791,10 @@ function useHlsPlayback({
       } else if (media.canPlayType("application/vnd.apple.mpegurl")) {
         initNative();
       } else {
+        playbackSource = "unsupported";
         reportFatal({
           source: "unsupported",
-          context: { ...baseContext(), source: "unsupported" }
+          context: baseContext()
         });
       }
     }
@@ -4056,6 +4141,8 @@ function VideoPlayer({
         return t.errorMedia;
       case "unsupported":
         return t.errorUnsupported;
+      case "resync":
+        return t.errorMedia;
       case "generic":
         return t.errorGeneric;
       default: {
@@ -6136,8 +6223,12 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
   onKeyDown,
   sendLabel,
   sendDisabled = false,
+  allowEmptySubmit = false,
   sendButtonClassName,
   sendButtonSize = "sm",
+  submitOnEnter = true,
+  tools,
+  attachments,
   triggerLabel,
   keepOpenOnSelect,
   open,
@@ -6156,7 +6247,7 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
   const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
   const pickerDisabled = Boolean(disabled || readOnly);
   const draft = value !== void 0 && value !== null ? String(value) : "";
-  const canSubmit = Boolean(draft.trim()) && !sendDisabled && !disabled && !readOnly;
+  const canSubmit = (allowEmptySubmit || Boolean(draft.trim())) && !sendDisabled && !disabled && !readOnly;
   const handleSubmit = React7.useCallback(
     (event) => {
       event.preventDefault();
@@ -6169,13 +6260,14 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
     (event) => {
       onKeyDown?.(event);
       if (event.defaultPrevented) return;
+      if (!submitOnEnter) return;
       if (event.key !== "Enter" || event.shiftKey) return;
       if (event.nativeEvent.isComposing || event.keyCode === 229) return;
       event.preventDefault();
       if (!canSubmit) return;
       formRef.current?.requestSubmit();
     },
-    [canSubmit, onKeyDown]
+    [canSubmit, onKeyDown, submitOnEnter]
   );
   return /* @__PURE__ */ jsxs(
     "form",
@@ -6202,28 +6294,32 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
             ...props
           }
         ),
+        attachments ? /* @__PURE__ */ jsx("div", { className: "border-t px-2 py-2", children: attachments }) : null,
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1.5 pb-1.5", children: [
-          /* @__PURE__ */ jsx(
-            EmojiPickerPopover,
-            {
-              locale,
-              onSelect: handleEmojiSelect,
-              disabled: pickerDisabled,
-              triggerLabel,
-              keepOpenOnSelect,
-              open,
-              onOpenChange,
-              side,
-              align,
-              labels,
-              recentLimit,
-              storageKey,
-              triggerClassName: cn(
-                "size-7 text-muted-foreground",
-                emojiTriggerClassName
-              )
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx(
+              EmojiPickerPopover,
+              {
+                locale,
+                onSelect: handleEmojiSelect,
+                disabled: pickerDisabled,
+                triggerLabel,
+                keepOpenOnSelect,
+                open,
+                onOpenChange,
+                side,
+                align,
+                labels,
+                recentLimit,
+                storageKey,
+                triggerClassName: cn(
+                  "size-7 text-muted-foreground",
+                  emojiTriggerClassName
+                )
+              }
+            ),
+            tools
+          ] }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -6856,7 +6952,106 @@ function createSupportChatClient(basePath = "/api/chat-svc") {
     }
   };
 }
+var DEFAULT_RECONNECT_MS = 2e3;
+var MAX_RECONNECT_MS = 3e4;
+function useRealtimeChannel({
+  getWsUrl,
+  onEvent,
+  enabled = true,
+  reconnectDelayMs = DEFAULT_RECONNECT_MS
+}) {
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+  const getWsUrlRef = useRef(getWsUrl);
+  getWsUrlRef.current = getWsUrl;
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    let socket = null;
+    let reconnectTimer = null;
+    let attempt = 0;
+    const connectGen = { current: 0 };
+    const clearReconnect = () => {
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+    };
+    const scheduleReconnect = () => {
+      if (cancelled) return;
+      clearReconnect();
+      const delay = Math.min(reconnectDelayMs * 2 ** attempt, MAX_RECONNECT_MS);
+      attempt += 1;
+      reconnectTimer = setTimeout(() => {
+        void connect();
+      }, delay);
+    };
+    const connect = async () => {
+      const gen = ++connectGen.current;
+      clearReconnect();
+      const url = await getWsUrlRef.current();
+      if (cancelled || gen !== connectGen.current) return;
+      if (!url) {
+        scheduleReconnect();
+        return;
+      }
+      if (socket) {
+        try {
+          socket.close();
+        } catch {
+        }
+        socket = null;
+      }
+      const ws = new WebSocket(url);
+      socket = ws;
+      ws.onopen = () => {
+        if (cancelled || gen !== connectGen.current) return;
+        attempt = 0;
+      };
+      ws.onmessage = (msg) => {
+        if (cancelled || gen !== connectGen.current) return;
+        let data;
+        try {
+          data = JSON.parse(String(msg.data));
+        } catch {
+          return;
+        }
+        if (typeof data?.type !== "string") return;
+        if (data.type === "pong") return;
+        onEventRef.current(data);
+      };
+      ws.onclose = () => {
+        if (cancelled || gen !== connectGen.current) return;
+        socket = null;
+        scheduleReconnect();
+      };
+      ws.onerror = () => {
+      };
+    };
+    const onVisibility = () => {
+      if (document.visibilityState !== "visible" || cancelled) return;
+      if (!socket || socket.readyState === WebSocket.CLOSED) {
+        void connect();
+      }
+    };
+    void connect();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      cancelled = true;
+      connectGen.current += 1;
+      clearReconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      if (socket) {
+        try {
+          socket.close();
+        } catch {
+        }
+        socket = null;
+      }
+    };
+  }, [enabled, reconnectDelayMs]);
+}
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map