@miadi/stateloom-web 0.1.1 → 0.1.3

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/SettingsPanel.tsx

@@ -55,11 +55,13 @@ export default function SettingsPanel() {
         <span className="text-xs text-gray-500">Context Class</span>
         <input
           className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-200"
-          value={context?.className ?? ""}
+          value={context?.class ?? ""}
           placeholder="e.g. MyStateMachineContext"
           onChange={(e) =>
             updateSettings({
-              context: { ...context, className: e.target.value || undefined },
+              // `class`, not `className`: the generator names the context from
+              // `settings.context?.class`, and nothing has ever read the other.
+              context: { ...context, class: e.target.value || undefined },
             })
           }
         />
@@ -97,15 +99,18 @@ export default function SettingsPanel() {
       <h4 className="text-xs font-semibold text-gray-500">Object References</h4>
       <textarea
         className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-200 h-12 font-mono"
-        value={(settings.objects ?? []).map((o) => `${o.name}: ${o.type}`).join("\n")}
-        placeholder="name: type (one per line)"
+        value={(settings.objects ?? []).map((o) => `${o.instance}: ${o.class}`).join("\n")}
+        placeholder="instance: Class (one per line)"
         onChange={(e) => {
+          // `instance: Class` — the pair the generator constructs the context
+          // with. Written as `{ name, type }` until now, which is a shape
+          // `codegen.ts` has never read.
           const objects = e.target.value
             .split("\n")
             .filter((l) => l.includes(":"))
             .map((l) => {
-              const [name, type] = l.split(":").map((s) => s.trim());
-              return { name, type };
+              const [instance, cls] = l.split(":").map((s) => s.trim());
+              return { instance, class: cls };
             });
           updateSettings({ objects });
         }}

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/src/types/definition.ts

@@ -10,8 +10,11 @@ export interface ObjectRef {
 }
 
 export interface ContextConfig {
+  /** The generated context's class name — what `ts/src/codegen.ts` reads. */
   class?: string;
   instance?: string;
+  /** The designer's own extra: a base the generated context extends. */
+  baseClass?: string;
 }
 
 export interface SettingsModel {
@@ -19,8 +22,15 @@ export interface SettingsModel {
   name?: string;
   description?: string;
   asynchronous: boolean;
-  objects?: { name: string; type: string }[];
-  context?: { className?: string; baseClass?: string };
+  /**
+   * Objects the generated context is constructed with. `ObjectRef` is what
+   * `ts/src/codegen.ts` actually reads (`obj.instance`, `obj.class`); the
+   * `{ name, type }` pair this field used to carry was a shape no generator
+   * could consume, so an "Object References" line typed into the designer was
+   * silently dropped on the way to code.
+   */
+  objects?: ObjectRef[];
+  context?: ContextConfig;
   imports?: string[];
   using?: string[];
   targetLanguage?: string;

package/server/stateloom-web.json

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