[pull] main from liveblocks:main

docs/pages/get-started/nextjs-comments-canvas.mdx

@@ -163,7 +163,7 @@ components from
       be toggled open by clicking on the pin.
 
       ```tsx file="app/DraggableThread.tsx"
-      import { useMemo } from "react";
+      import { useMemo, useState } from "react";
       import { useEditThreadMetadata } from "@liveblocks/react/suspense";
       import { FloatingThread, CommentPin } from "@liveblocks/react-ui";
       import { ThreadData } from "@liveblocks/client";
@@ -176,6 +176,7 @@ components from
         const defaultOpen = useMemo(() => {
           return Number(new Date()) - Number(new Date(thread.createdAt)) <= 100;
         }, [thread]);
+        const [isOpen, setIsOpen] = useState(defaultOpen);
 
         // Enable drag
         const { isDragging, attributes, listeners, setNodeRef, transform } =
@@ -188,31 +189,27 @@ components from
         const x = transform ? transform.x + thread.metadata.x : thread.metadata.x;
         const y = transform ? transform.y + thread.metadata.y : thread.metadata.y;
 
-        // Used to set z-index higher than other threads when dragging
-        const editThreadMetadata = useEditThreadMetadata();
+        // Used to set z-index higher than other threads when open or dragging
         const maxZIndex = useMaxZIndex();
+        const currentZIndex = isOpen || isDragging ? maxZIndex + 1 : thread.metadata?.zIndex || 0;
 
         return (
           <FloatingThread
             thread={thread}
+            open={isOpen}
+            onOpenChange={setIsOpen}
             defaultOpen={defaultOpen}
             side="right"
             style={{ pointerEvents: isDragging ? "none" : "auto" }}
           >
             <div
               ref={setNodeRef}
-              onPointerDown={() =>
-                editThreadMetadata({
-                  threadId: thread.id,
-                  metadata: { zIndex: maxZIndex + 1 },
-                })
-              }
               style={{
                 position: "absolute",
                 top: 0,
                 left: 0,
                 transform: `translate3d(${x}px, ${y}px, 0)`,
-                zIndex: thread.metadata?.zIndex || 0,
+                zIndex: currentZIndex,
               }}
             >
               <CommentPin
@@ -407,7 +404,7 @@ components from
       [`useEditThreadMetadata`](/docs/api-reference/liveblocks-react#useEditThreadMetadata) to update
       the thread’s metadata with the new X/Y coordinates.
 
-      ```tsx file="app/CollaborativeCanvas.tsx"
+      ```tsx file="app/CommentsCanvas.tsx"
       import { ThreadData } from "@liveblocks/client";
       import { useThreads, useEditThreadMetadata } from "@liveblocks/react/suspense";
       import {
@@ -422,10 +419,12 @@ components from
       import { useCallback } from "react";
       import { PlaceThreadButton } from "./PlaceThreadButton";
       import { DraggableThread } from "./DraggableThread";
+      import { useMaxZIndex } from "./hooks";
 
-      export function CollaborativeCanvas() {
+      export function CommentsCanvas() {
         const { threads } = useThreads();
         const editThreadMetadata = useEditThreadMetadata();
+        const maxZIndex = useMaxZIndex();
 
         // Allow click event on avatar if thread moved less than 3px
         const sensors = useSensors(
@@ -438,28 +437,27 @@ components from
             activationConstraint: {
               distance: 3,
             },
-          }),
+          })
         );
 
-        // On drag end, update thread metadata with new coords
+        // On drag end, update thread metadata with new coords and highest z-index
         const handleDragEnd = useCallback(
           ({ active, delta }: DragEndEvent) => {
             const thread = (active.data as DataRef<{ thread: ThreadData }>).current
               ?.thread;
-
             if (!thread) {
               return;
             }
-
             editThreadMetadata({
               threadId: thread.id,
               metadata: {
                 x: thread.metadata.x + delta.x,
                 y: thread.metadata.y + delta.y,
+                zIndex: maxZIndex + 1,
               },
             });
           },
-          [editThreadMetadata],
+          [editThreadMetadata, maxZIndex]
         );
 
         return (
@@ -496,12 +494,12 @@ components from
 
       ```tsx file="app/page.tsx" highlight="6-8"
       import { Room } from "./Room";
-      import { CollaborativeCanvas } from "./CollaborativeCanvas";
+      import { CommentsCanvas } from "./CommentsCanvas";
 
       export default function Page() {
         return (
           <Room>
-            <CollaborativeCanvas />
+            <CommentsCanvas />
           </Room>
         );
       }

examples/nextjs-comments-canvas/src/components/CommentsCanvas.tsx

@@ -12,10 +12,12 @@ import {
 import { useCallback } from "react";
 import { PlaceThreadButton } from "./PlaceThreadButton";
 import { DraggableThread } from "./DraggableThread";
+import { useMaxZIndex } from "../hooks";
 
 export function CommentsCanvas() {
   const { threads } = useThreads();
   const editThreadMetadata = useEditThreadMetadata();
+  const maxZIndex = useMaxZIndex();
 
   // Allow click event on avatar if thread moved less than 3px
   const sensors = useSensors(
@@ -31,7 +33,7 @@ export function CommentsCanvas() {
     })
   );
 
-  // On drag end, update thread metadata with new coords
+  // On drag end, update thread metadata with new coords and highest z-index
   const handleDragEnd = useCallback(
     ({ active, delta }: DragEndEvent) => {
       const thread = (active.data as DataRef<{ thread: ThreadData }>).current
@@ -44,10 +46,11 @@ export function CommentsCanvas() {
         metadata: {
           x: thread.metadata.x + delta.x,
           y: thread.metadata.y + delta.y,
+          zIndex: maxZIndex + 1,
         },
       });
     },
-    [editThreadMetadata]
+    [editThreadMetadata, maxZIndex]
   );
 
   return (

examples/nextjs-comments-canvas/src/components/DraggableThread.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useEditThreadMetadata } from "@liveblocks/react/suspense";
 import { FloatingThread, CommentPin } from "@liveblocks/react-ui";
 import { ThreadData } from "@liveblocks/client";
@@ -11,6 +11,7 @@ export function DraggableThread({ thread }: { thread: ThreadData }) {
   const defaultOpen = useMemo(() => {
     return Number(new Date()) - Number(new Date(thread.createdAt)) <= 100;
   }, [thread]);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
 
   // Enable drag
   const { isDragging, attributes, listeners, setNodeRef, transform } =
@@ -23,31 +24,28 @@ export function DraggableThread({ thread }: { thread: ThreadData }) {
   const x = transform ? transform.x + thread.metadata.x : thread.metadata.x;
   const y = transform ? transform.y + thread.metadata.y : thread.metadata.y;
 
-  // Used to set z-index higher than other threads when dragging
-  const editThreadMetadata = useEditThreadMetadata();
+  // Used to set z-index higher than other threads when open or dragging
   const maxZIndex = useMaxZIndex();
+  const currentZIndex =
+    isOpen || isDragging ? maxZIndex + 1 : thread.metadata?.zIndex || 0;
 
   return (
     <FloatingThread
       thread={thread}
+      open={isOpen}
+      onOpenChange={setIsOpen}
       defaultOpen={defaultOpen}
       side="right"
       style={{ pointerEvents: isDragging ? "none" : "auto" }}
     >
       <div
         ref={setNodeRef}
-        onPointerDown={() =>
-          editThreadMetadata({
-            threadId: thread.id,
-            metadata: { zIndex: maxZIndex + 1 },
-          })
-        }
         style={{
           position: "absolute",
           top: 0,
           left: 0,
           transform: `translate3d(${x}px, ${y}px, 0)`,
-          zIndex: thread.metadata?.zIndex || 0,
+          zIndex: currentZIndex,
         }}
       >
         <CommentPin

packages/liveblocks-server/package.json

@@ -34,6 +34,8 @@
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
+    "build:docker": "tsup",
+    "clean": "rm -rf dist/",
     "format": "(eslint --color --fix src/ test/ || true) && prettier --write src/ test/",
     "lint": "eslint --color src/ test/",
     "lint:package": "publint --strict && attw --pack",

tools/liveblocks-cli/package.json

@@ -13,6 +13,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "clean": "rm -rf dist/",
     "dev": "bun ./dist/index.js dev -v",
     "add-license-headers": "eslint --fix 'src/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
     "lint": "eslint 'src/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",