fix: people list crash + call embed positioning + debug logging

- millify.ts: use named import { millify as millifyPlugin } instead of
  default import to fix Rolldown CJS interop bug where zc.default gets
  set to the whole module object instead of the function (mode=1 forces
  default=n instead of default=n.default, breaking MembersDrawer)
- useCallEmbed.ts: use getBoundingClientRect() for accurate fixed
  positioning; add useEffect to trigger syncCallEmbedPlacement on mount
  so embed is positioned before the first resize event
- CallEmbedProvider.tsx: fix [pipMode, callVisible] effect to NOT clear
  top/left/width/height when callVisible changes (previously cleared
  position set by syncCallEmbedPlacement every time joined changed);
  only clear pip-specific styles when actually exiting pip; add debug
  console logging for positioning state

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/CallEmbedProvider.tsx

@@ -427,13 +427,37 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     [],
   );
 
-  // Track previous pipMode to only reset position when first entering pip (not on callVisible changes)
+  // Track previous pipMode to only reset position when entering/exiting pip
   const prevPipModeRef = React.useRef(false);
+
+  // Debug: log whenever call embed visibility/mode changes
+  React.useEffect(() => {
+    console.log('[CallEmbed] state:', {
+      callEmbedRoomId: callEmbed?.roomId,
+      selectedRoom,
+      joined,
+      inCallRoom: !!inCallRoom,
+      callVisible: !!callVisible,
+      pipMode: !!pipMode,
+      chatOnlyView: !!chatOnlyView,
+    });
+    const el = callEmbedRef.current;
+    if (el) {
+      console.log('[CallEmbed] container styles:', {
+        top: el.style.top, left: el.style.left,
+        width: el.style.width, height: el.style.height,
+        visibility: el.style.visibility, bottom: el.style.bottom, right: el.style.right,
+      });
+    }
+  }, [callEmbed?.roomId, selectedRoom, joined, inCallRoom, callVisible, pipMode, chatOnlyView, callEmbedRef]);
+
   React.useEffect(() => {
     const el = callEmbedRef.current;
     if (!el) return;
+    const wasInPip = prevPipModeRef.current;
+    prevPipModeRef.current = !!pipMode;
     if (pipMode) {
-      if (!prevPipModeRef.current) {
+      if (!wasInPip) {
         el.style.top = 'auto';
         el.style.left = 'auto';
         el.style.bottom = '72px';
@@ -448,24 +472,23 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
       }
       el.style.visibility = 'visible';
     } else {
-      [
+      if (wasInPip) {
-        'top',
+        // Exiting pip: clear all pip styles; syncCallEmbedPlacement will restore correct position
-        'left',
+        el.style.top = '';
-        'bottom',
+        el.style.left = '';
-        'right',
+        el.style.bottom = '';
-        'width',
+        el.style.right = '';
-        'height',
+        el.style.width = '';
-        'borderRadius',
+        el.style.height = '';
-        'overflow',
+        el.style.borderRadius = '';
-        'zIndex',
+        el.style.overflow = '';
-        'boxShadow',
+        el.style.zIndex = '';
-        'border',
+        el.style.boxShadow = '';
-      ].forEach((p) => {
+        el.style.border = '';
-        (el.style as any)[p] = '';
+      }
-      });
+      // syncCallEmbedPlacement owns top/left/width/height; don't clear them on visibility changes
       el.style.visibility = callVisible ? '' : 'hidden';
     }
-    prevPipModeRef.current = !!pipMode;
   }, [pipMode, callVisible]);
 
   React.useEffect(() => {

src/app/hooks/useCallEmbed.ts

@@ -154,12 +154,21 @@ export const useCallEmbedPlacementSync = (containerViewRef: RefObject<HTMLDivEle
     const container = containerViewRef.current;
     if (!embedEl || !container) return;
 
-    embedEl.style.top = `${container.offsetTop}px`;
+    const rect = container.getBoundingClientRect();
-    embedEl.style.left = `${container.offsetLeft}px`;
+    console.log('[CallEmbed] syncCallEmbedPlacement:', {
-    embedEl.style.width = `${container.clientWidth}px`;
+      top: rect.top, left: rect.left, width: rect.width, height: rect.height,
-    embedEl.style.height = `${container.clientHeight}px`;
+    });
+    embedEl.style.top = `${rect.top}px`;
+    embedEl.style.left = `${rect.left}px`;
+    embedEl.style.width = `${rect.width}px`;
+    embedEl.style.height = `${rect.height}px`;
   }, [callEmbedRef, containerViewRef]);
 
+  // Sync once on mount so the embed is positioned immediately (deps are stable refs)
+  useEffect(() => {
+    syncCallEmbedPlacement();
+  }, [syncCallEmbedPlacement]);
+
   useResizeObserver(
     syncCallEmbedPlacement,
     useCallback(() => containerViewRef.current, [containerViewRef]),

src/app/plugins/millify.ts

@@ -1,4 +1,4 @@
-import millifyPlugin from 'millify';
+import { millify as millifyPlugin } from 'millify';
 import { MillifyOptions } from 'millify/dist/options';
 
 export const millify = (count: number, options?: Partial<MillifyOptions>): string =>