@miadi/stateloom-web 0.1.2 → 0.1.3

package/server/src/app/globals.css

@@ -108,15 +108,10 @@ body {
   }
 }
 
-/* Presence chips ride the top-right corner. Under `viewport-fit=cover` that
-   corner can be beneath a notch or the status bar, so the offset is measured
-   from the safe area rather than the raw viewport edge. */
-.presence-dock {
-  position: fixed;
-  top: calc(env(safe-area-inset-top) + 0.5rem);
-  right: calc(env(safe-area-inset-right) + 1rem);
-  z-index: 50;
-}
+/* `.presence-dock` lived here: a fixed top-right rail of one pill per peer.
+   It grew with the room and painted itself across the toolbar's own controls,
+   so presence moved into the toolbar flow as a single fixed-width control —
+   see components/PresenceChips.tsx. Nothing floats over the navigation now. */
 
 /* The way back. A pinch on the chrome moves the root font size, and every length
    in this stylesheet is a multiple of it — so at 175% the app is legible but the

package/server/src/components/PresenceChips.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { colorFor } from "@miadi/stateloom-protocol";
+import { useDesignerStore } from "@/store/useDesignerStore";
+
+/** Enough dots to read "several peers" at a glance; the count carries the rest. */
+const MAX_DOTS = 4;
+
+/**
+ * Who else is on this board. It used to float over the top-right corner as one
+ * pill per peer — which on a busy room meant a dozen chips painted across the
+ * toolbar's own controls, hiding Validate/Generate/RISE behind a colour bar
+ * nobody could dismiss. `pointer-events-none` kept the buttons clickable but
+ * you could no longer see what you were clicking.
+ *
+ * So presence stops floating: it is a toolbar control like any other, laid out
+ * in the flow beside the document identity it describes. Fixed width regardless
+ * of how many peers join — a stack of colour dots and a count — with the full
+ * roster one click away. Nothing can be covered by a room that grows.
+ */
+export default function PresenceChips() {
+  const presence = useDesignerStore((s) => s.presence);
+  const [open, setOpen] = useState(false);
+
+  if (presence.length === 0) return null;
+
+  const byRole = new Map<string, number>();
+  for (const p of presence) byRole.set(p.role, (byRole.get(p.role) ?? 0) + 1);
+  const summary = [...byRole]
+    .map(([role, n]) => (n > 1 ? `${role} ×${n}` : role))
+    .join(" · ");
+
+  return (
+    <span className="relative inline-flex">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="toolbar-btn inline-flex items-center gap-1.5"
+        title={`Connected: ${summary}`}
+        aria-expanded={open}
+        aria-label={`${presence.length} connected: ${summary}`}
+      >
+        <span className="flex -space-x-1">
+          {presence.slice(0, MAX_DOTS).map((p) => (
+            <span
+              key={p.clientId}
+              className="inline-block h-2 w-2 rounded-full ring-1 ring-gray-900"
+              style={{ backgroundColor: p.color ?? colorFor(p.clientId) }}
+            />
+          ))}
+        </span>
+        <span className="tabular-nums">{presence.length}</span>
+      </button>
+      {open && (
+        <div className="absolute left-0 top-full z-50 mt-1 max-h-64 w-56 overflow-y-auto rounded border border-gray-700 bg-gray-900 p-2 shadow-lg">
+          <div className="mb-1 text-[10px] uppercase tracking-wide text-gray-500">
+            connected · {summary}
+          </div>
+          {presence.map((p) => (
+            <div
+              key={p.clientId}
+              className="flex items-center gap-1.5 rounded px-1 py-1 text-xs text-gray-300"
+              title={p.clientId}
+            >
+              <span
+                className="inline-block h-2 w-2 shrink-0 rounded-full"
+                style={{ backgroundColor: p.color ?? colorFor(p.clientId) }}
+              />
+              <span className="shrink-0">{p.role}</span>
+              {p.name && <span className="truncate text-gray-500">{p.name}</span>}
+            </div>
+          ))}
+        </div>
+      )}
+    </span>
+  );
+}

package/server/src/components/SocketBridgeProvider.tsx

@@ -7,7 +7,6 @@ import {
 } from "@miadi/stateloom-react";
 import {
   diffDefinition,
-  colorFor,
   type StateMachineDefinition,
 } from "@miadi/stateloom-protocol";
 import { useDesignerStore } from "@/store/useDesignerStore";
@@ -24,9 +23,13 @@ const OUTBOUND_DEBOUNCE_MS = 60;
  * Rendered only once a bridge URL is known — see DesignBridge, which resolves
  * it from the serving process at runtime so a published build carries nobody's
  * URL baked in.
+ *
+ * Transport only — it paints nothing. Presence lands in the store and the
+ * toolbar draws it (PresenceChips); the floating corner dock this used to
+ * render grew one pill per peer and ended up covering the toolbar it hovered
+ * over.
  */
 export default function SocketBridgeProvider({ url }: { url: string }) {
-  const presence = useDesignerStore((s) => s.presence);
   // The requested `?doc=` (step 2): passed through to the file API, which
   // resolves and guards it; the join below keys the room by the RESOLVED path.
   const requested = useRequestedDoc();
@@ -126,24 +129,5 @@ export default function SocketBridgeProvider({ url }: { url: string }) {
     // an arbitrary definition, so the arriving full-def repaints the canvas.
   }, [url, requested]);
 
-  if (presence.length === 0) return null;
-
-  return (
-    // `presence-dock` replaces the raw `top-2 right-4`: with viewport-fit=cover
-    // that corner can sit under a notch or the status bar, so the offset is
-    // measured from the safe-area inset instead. Still pointer-events-none, so
-    // it never competes with the toolbar it floats over.
-    <div className="presence-dock flex gap-1 pointer-events-none">
-      {presence.map((p) => (
-        <span
-          key={p.clientId}
-          title={`${p.role}${p.name ? ` · ${p.name}` : ""}`}
-          className="text-[10px] leading-none px-2 py-1 rounded-full text-white/95 shadow font-medium"
-          style={{ backgroundColor: p.color ?? colorFor(p.clientId) }}
-        >
-          {p.role}
-        </span>
-      ))}
-    </div>
-  );
+  return null;
 }

package/server/src/components/Toolbar.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/lib/exportImage";
 import type { StateDef } from "@/types/definition";
 import DocSwitcher from "./DocSwitcher";
+import PresenceChips from "./PresenceChips";
 import { docQuery, useRequestedDoc } from "@/lib/docParam";
 
 export default function Toolbar() {
@@ -224,6 +225,10 @@ export default function Toolbar() {
           <span className="text-[10px] text-gray-600" title={remoteMessage ?? "No file bound"}>○ no disk</span>
         )}
 
+        {/* Who else is on the board. In the flow, next to the document it
+            describes — it used to float over this toolbar and cover it. */}
+        <PresenceChips />
+
         <div className="flex-1" />
       </div>
 

package/server/stateloom-web.json

@@ -1,5 +1,5 @@
 {
-  "package": "0.1.2",
-  "designer": "0.1.2",
+  "package": "0.1.3",
+  "designer": "0.1.3",
   "next": "16.1.6"
 }