diff --git a/docs/pages/get-started/nextjs-comments-canvas.mdx b/docs/pages/get-started/nextjs-comments-canvas.mdx
index 76ab518299..918430bd8e 100644
--- a/docs/pages/get-started/nextjs-comments-canvas.mdx
+++ b/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>
         );
       }
diff --git a/examples/nextjs-comments-canvas/src/components/CommentsCanvas.tsx b/examples/nextjs-comments-canvas/src/components/CommentsCanvas.tsx
index 95e880f003..f9c6db6a9a 100644
--- a/examples/nextjs-comments-canvas/src/components/CommentsCanvas.tsx
+++ b/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 (
diff --git a/examples/nextjs-comments-canvas/src/components/DraggableThread.tsx b/examples/nextjs-comments-canvas/src/components/DraggableThread.tsx
index ba05b93868..94d7e41e96 100644
--- a/examples/nextjs-comments-canvas/src/components/DraggableThread.tsx
+++ b/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
diff --git a/packages/liveblocks-server/package.json b/packages/liveblocks-server/package.json
index a1142eb948..4d5aee6a9a 100644
--- a/packages/liveblocks-server/package.json
+++ b/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",
diff --git a/tools/liveblocks-cli/Dockerfile b/tools/liveblocks-cli/Dockerfile
deleted file mode 100644
index bdbf90c175..0000000000
--- a/tools/liveblocks-cli/Dockerfile
+++ /dev/null
@@ -1,38 +0,0 @@
-# ------------------------------------------------------------------
-# Liveblocks Dev Server — Docker Image
-#
-#   docker build --build-arg CLI_VERSION=1.0.3 tools/liveblocks-cli/
-# ------------------------------------------------------------------
-
-FROM oven/bun:1-alpine@sha256:9028ee7a60a04777190f0c3129ce49c73384d3fc918f3e5c75f5af188e431981
-
-ARG CLI_VERSION=latest
-ARG VERSION=dev
-LABEL org.opencontainers.image.source="https://github.com/liveblocks/liveblocks"
-LABEL org.opencontainers.image.version="${VERSION}"
-LABEL org.opencontainers.image.licenses="AGPL-3.0-or-later"
-LABEL org.opencontainers.image.title="Liveblocks Dev Server"
-LABEL org.opencontainers.image.description="Local development server for Liveblocks"
-
-RUN addgroup -g 1001 liveblocks && \
-    adduser -u 1001 -G liveblocks -h /home/liveblocks -D liveblocks
-
-WORKDIR /app
-
-RUN bun install liveblocks@${CLI_VERSION}
-
-COPY scripts/docker-healthcheck.ts ./scripts/
-
-RUN mkdir -p /app/.liveblocks && chown liveblocks:liveblocks /app/.liveblocks
-VOLUME /app/.liveblocks
-
-USER liveblocks
-
-ENV LIVEBLOCKS_DEVSERVER_HOST=0.0.0.0
-ENV LIVEBLOCKS_DEVSERVER_PORT=1153
-EXPOSE 1153
-
-HEALTHCHECK --interval=10s --timeout=3s --start-period=5s --retries=3 \
-  CMD ["bun", "run", "scripts/docker-healthcheck.ts"]
-
-ENTRYPOINT ["bun", "run", "node_modules/liveblocks/dist/index.js"]
diff --git a/tools/liveblocks-cli/Dockerfile.dev-server b/tools/liveblocks-cli/Dockerfile.dev-server
deleted file mode 100644
index 3f60d20733..0000000000
--- a/tools/liveblocks-cli/Dockerfile.dev-server
+++ /dev/null
@@ -1,4 +0,0 @@
-# Dev server image — extends liveblocks/cli with CMD ["dev", "--ci"]
-ARG CLI_TAG
-FROM ghcr.io/liveblocks/cli:${CLI_TAG}
-CMD ["dev", "--ci"]
diff --git a/tools/liveblocks-cli/package.json b/tools/liveblocks-cli/package.json
index 8455f3b7f2..df1fc9c3c7 100644
--- a/tools/liveblocks-cli/package.json
+++ b/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}'",