@eventcatalog/core 5.0.0-beta.3 → 5.0.0-beta.31

package/eventcatalog/src/features/studio/components/Presence.tsx

@@ -0,0 +1,293 @@
+import { Fragment, memo, useEffect, useLayoutEffect, useRef, useSyncExternalStore, type MutableRefObject } from 'react';
+import { useInternalNode, useStore, useStoreApi, type XYPosition } from '@xyflow/react';
+import { Eye, EyeOff } from 'lucide-react';
+import { CanvasPortal, sizeOf, COUNTER_SCALE, useCounterScale, Picture, AgentMark } from '@eventcatalog/visualiser/studio';
+import { usePeople, type Peer, type PresenceStore } from '../hooks/presence-store';
+import { useFollowCamera } from '../hooks/use-follow-camera';
+
+/**
+ * Other people on the canvas: their pointers, selections and the connections they're dragging. Drawn in the
+ * canvas's own coordinates (React Flow's viewport portal), so panning and zooming move them without
+ * re-rendering, and counter-scaled (COUNTER_SCALE, set outside React) so they stay the same size on screen. Each
+ * person's pointer and marks follow them on their own, so one pointer moving doesn't re-render anyone else's.
+ */
+export const RemotePresence = memo(function RemotePresence({
+  store,
+  clientId,
+}: {
+  store: PresenceStore | null;
+  clientId: number | null;
+}) {
+  const people = usePeople(store);
+  const layer = useRef<HTMLDivElement>(null);
+  useCounterScale(layer);
+  const others = store ? people.filter((peer) => peer.clientId !== clientId) : [];
+
+  return (
+    <CanvasPortal>
+      {/* Above nodes (selected ones are raised to 1000) */}
+      <div ref={layer} className="pointer-events-none absolute left-0 top-0" style={{ zIndex: 2000 }}>
+        {others.map((peer) => (
+          <Fragment key={peer.clientId}>
+            <PeerMarks store={store!} clientId={peer.clientId} />
+            {peer.pointer && <PeerPointer store={store!} peer={peer} />}
+          </Fragment>
+        ))}
+      </div>
+    </CanvasPortal>
+  );
+});
+
+const findPeer = (store: PresenceStore, clientId: number) => store.getPeers().find((peer) => peer.clientId === clientId);
+
+/** What a peer's marks show: re-rendered only when it changes */
+const marksKey = (peer: Peer | undefined) =>
+  peer
+    ? [
+        peer.selection.join(','),
+        peer.connecting && peer.pointer ? [peer.connecting.x, peer.connecting.y, peer.pointer.x, peer.pointer.y].join(',') : '',
+      ].join('|')
+    : '';
+
+/** Someone's selection, and the connection they're dragging (a dashed line from where it starts to their pointer) */
+const PeerMarks = memo(function PeerMarks({ store, clientId }: { store: PresenceStore; clientId: number }) {
+  useSyncExternalStore(store.subscribe, () => marksKey(findPeer(store, clientId)));
+  const peer = findPeer(store, clientId);
+  if (!peer) return null;
+  return (
+    <>
+      {peer.selection.map((id) => (
+        <SelectionOutline key={id} nodeId={id} name={peer.name} color={peer.color} />
+      ))}
+      {peer.pointer && peer.connecting && <ConnectingLine from={peer.connecting} to={peer.pointer} color={peer.color} />}
+    </>
+  );
+});
+
+/** A connection someone's dragging: only shown while they drag one, so it can follow the zoom itself */
+function ConnectingLine({ from, to, color }: { from: XYPosition; to: XYPosition; color: string }) {
+  const scale = 1 / useStore((state) => state.transform[2]);
+  return (
+    <svg className="absolute left-0 top-0 overflow-visible" width={1} height={1}>
+      <line
+        x1={from.x}
+        y1={from.y}
+        x2={to.x}
+        y2={to.y}
+        stroke={color}
+        strokeWidth={2 * scale}
+        strokeDasharray={`${6 * scale} ${4 * scale}`}
+      />
+      <circle cx={from.x} cy={from.y} r={4 * scale} fill={color} />
+    </svg>
+  );
+}
+
+/** Longest a pointer takes to glide to where it was last seen (updates come about every 33 ms) */
+const MAX_GLIDE_MS = 120;
+
+/**
+ * Someone's pointer, gliding from where it was to each new position over the time since the last one (so a
+ * steady stream of updates looks like steady movement). Moved with a transform outside React: no re-renders.
+ */
+const PeerPointer = memo(function PeerPointer({ store, peer }: { store: PresenceStore; peer: Peer }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const shown = useRef<XYPosition | null>(null);
+
+  const draw = () => {
+    if (ref.current && shown.current)
+      ref.current.style.transform = `translate(${shown.current.x}px, ${shown.current.y}px) scale(var(${COUNTER_SCALE}, 1))`;
+  };
+
+  useLayoutEffect(() => {
+    let target: XYPosition | null = null;
+    let from: XYPosition = { x: 0, y: 0 };
+    let start = 0;
+    let duration = 0;
+    let lastSeen = 0;
+    let frame = 0;
+
+    const step = (now: number) => {
+      const t = Math.min(1, (now - start) / duration);
+      if (target) shown.current = { x: from.x + (target.x - from.x) * t, y: from.y + (target.y - from.y) * t };
+      draw();
+      frame = t < 1 ? requestAnimationFrame(step) : 0;
+    };
+
+    const follow = () => {
+      const pointer = findPeer(store, peer.clientId)?.pointer;
+      if (!pointer || (target && pointer.x === target.x && pointer.y === target.y)) return;
+      const now = performance.now();
+      target = pointer;
+      if (!shown.current) {
+        shown.current = pointer;
+        lastSeen = now;
+        return draw();
+      }
+      from = shown.current;
+      start = now;
+      duration = Math.min(MAX_GLIDE_MS, Math.max(16, now - lastSeen));
+      lastSeen = now;
+      if (!frame) frame = requestAnimationFrame(step);
+    };
+
+    follow();
+    const unsubscribe = store.subscribe(follow);
+    return () => {
+      unsubscribe();
+      cancelAnimationFrame(frame);
+    };
+  }, [store, peer.clientId]);
+
+  return (
+    <div ref={ref} className="absolute left-0 top-0 will-change-transform" style={{ transformOrigin: '0 0' }}>
+      {/* The pointer's outline is a light border on any background */}
+      <svg width="18" height="18" viewBox="0 0 24 24" fill={peer.color} stroke="white" strokeWidth="1.5">
+        <path d="M4 2l16 9-7 2-3 7z" />
+      </svg>
+      <span
+        className="absolute left-4 top-4 flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-[11px] font-medium text-white"
+        style={{ backgroundColor: peer.color }}
+      >
+        {peer.agent && <AgentMark name={peer.name} size={12} />}
+        <Picture src={peer.picture} className="-ml-0.5 h-4 w-4 shrink-0" />
+        {peer.name}
+        {peer.activity && <span className="font-normal opacity-90">· {peer.activity}</span>}
+      </span>
+    </div>
+  );
+});
+
+// Screen pixels, in the canvas's coordinates (counter-scaled by the layer's COUNTER_SCALE)
+const onScreen = (px: number) => `calc(${px}px * var(${COUNTER_SCALE}, 1))`;
+
+/** Someone's selection around a node: follows that node only, so other nodes moving don't re-render it */
+const SelectionOutline = memo(function SelectionOutline({
+  nodeId,
+  name,
+  color,
+}: {
+  nodeId: string;
+  name: string;
+  color: string;
+}) {
+  const node = useInternalNode(nodeId);
+  if (!node) return null;
+  const { width, height } = sizeOf(node);
+  const { x, y } = node.internals.positionAbsolute;
+  return (
+    <div
+      className="absolute"
+      style={{
+        left: `calc(${x}px - ${onScreen(4)})`,
+        top: `calc(${y}px - ${onScreen(4)})`,
+        width: `calc(${width}px + ${onScreen(8)})`,
+        height: `calc(${height}px + ${onScreen(8)})`,
+        border: `${onScreen(2)} solid ${color}`,
+        borderRadius: onScreen(8),
+      }}
+    >
+      <span
+        className="absolute right-0 top-0 whitespace-nowrap rounded px-1.5 text-[10px] leading-4 text-white"
+        style={{
+          backgroundColor: color,
+          transform: `translateY(-100%) scale(var(${COUNTER_SCALE}, 1))`,
+          transformOrigin: 'bottom right',
+        }}
+      >
+        {name}
+      </span>
+    </div>
+  );
+});
+
+/**
+ * Shares what we're looking at, so others can jump to it: the canvas position in the middle of the screen,
+ * and the zoom. Follows React Flow's store (people's moves and code's, e.g. fit view) without rendering.
+ */
+export const ViewportSharer = memo(function ViewportSharer({
+  onChange,
+}: {
+  onChange: (viewport: { x: number; y: number; zoom: number }) => void;
+}) {
+  const store = useStoreApi();
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const share = () => {
+      const {
+        transform: [x, y, zoom],
+        width,
+        height,
+      } = store.getState();
+      onChange({ x: (width / 2 - x) / zoom, y: (height / 2 - y) / zoom, zoom });
+    };
+    const unsubscribe = store.subscribe((state, previous) => {
+      if (state.transform === previous.transform && state.width === previous.width && state.height === previous.height) return;
+      clearTimeout(timer);
+      timer = setTimeout(share, 150);
+    });
+    share();
+    return () => {
+      unsubscribe();
+      clearTimeout(timer);
+    };
+  }, [store, onChange]);
+  return null;
+});
+
+/**
+ * Agents at work: who's working (with a button to follow them or stop), and the camera following them while
+ * they work (on by default inside a chat). `pause` is set for whoever moves the camera themselves.
+ */
+export const AgentActivity = memo(function AgentActivity({
+  store,
+  clientId,
+  enabled,
+  following,
+  onToggleFollowing,
+  pauseRef,
+}: {
+  store: PresenceStore | null;
+  clientId: number | null;
+  /** Off in the read only levels */
+  enabled: boolean;
+  following: boolean;
+  onToggleFollowing: () => void;
+  pauseRef: MutableRefObject<() => void>;
+}) {
+  const people = usePeople(store);
+  const working = people.filter((peer) => peer.clientId !== clientId && peer.agent && peer.pointer);
+  const camera = useFollowCamera({
+    enabled: following && enabled,
+    fitsContent: enabled,
+    agentsWorking: working.length > 0,
+    getAgents: () => (store?.getPeers() ?? []).filter((peer: Peer) => peer.clientId !== clientId && peer.agent && peer.pointer),
+  });
+  pauseRef.current = camera.pause;
+
+  if (!enabled || working.length === 0) return null;
+  return (
+    <div className="absolute left-1/2 top-16 z-10 flex -translate-x-1/2 items-center gap-2 rounded-full border px-3 py-1 text-xs shadow-sm bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
+      <span className="flex -space-x-1">
+        {working.map((agent) => (
+          <span
+            key={agent.clientId}
+            className="h-2.5 w-2.5 rounded-full ring-2 ring-[rgb(var(--ec-card-bg))]"
+            style={{ backgroundColor: agent.color }}
+          />
+        ))}
+      </span>
+      <span>
+        {following ? 'Following' : ''} <span className="font-semibold">{working.map((agent) => agent.name).join(', ')}</span>
+        {following ? '' : ` ${working.length === 1 ? 'is' : 'are'} working`}
+      </span>
+      <button
+        onClick={onToggleFollowing}
+        className="flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))]"
+      >
+        {following ? <EyeOff size={12} /> : <Eye size={12} />}
+        {following ? 'Stop' : 'Follow'}
+      </button>
+    </div>
+  );
+});

package/eventcatalog/src/features/studio/components/ShareDialog.tsx

@@ -0,0 +1,396 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import {
+  ArrowLeft,
+  Bot,
+  Check,
+  Copy,
+  Globe,
+  Link2,
+  Mail,
+  MessageSquareText,
+  Pencil,
+  Plug,
+  UserPlus,
+  Users,
+  X,
+} from 'lucide-react';
+import { usePeople, type Peer, type PresenceStore } from '../hooks/presence-store';
+import { Picture, AgentMark } from '@eventcatalog/visualiser/studio';
+
+/**
+ * Sharing a canvas, as Studio on the web does: first the ways to share, side by side (a link to it, working on it
+ * together live, pairing with an AI agent), then, for live collaboration, who's on it now (click someone to go to
+ * what they're looking at) and the link to invite people with (copied, emailed or as a ready-made message). A canvas
+ * here is always live and kept in the catalog: its link is the invite, so there's no session to start.
+ */
+
+const button =
+  'inline-flex h-9 flex-none items-center gap-2 rounded-lg px-4 text-sm font-medium transition-colors [&_svg]:h-4 [&_svg]:w-4';
+const primary = `${button} bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-page-text)/0.85)]`;
+const secondary = `${button} border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]`;
+const sectionLabel = 'text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]';
+
+/** e.g. catalog.example.com/studio/9b1d… */
+function shortened(url: string) {
+  try {
+    const { host, pathname } = new URL(url);
+    return `${host}${pathname}`;
+  } catch {
+    return url;
+  }
+}
+
+const copyText = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/** One of the ways to share, as a card: what it is, what it gives them, and what to do */
+function Choice({
+  icon,
+  title,
+  description,
+  points,
+  children,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  points: string[];
+  children: ReactNode;
+}) {
+  return (
+    <section className="flex flex-col rounded-xl border border-[rgb(var(--ec-page-border))] p-5 text-left transition-colors hover:border-[color-mix(in_srgb,rgb(var(--ec-accent))_45%,rgb(var(--ec-page-border)))]">
+      <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[color-mix(in_srgb,rgb(var(--ec-accent))_12%,transparent)] text-[rgb(var(--ec-accent))] [&_svg]:h-[18px] [&_svg]:w-[18px]">
+        {icon}
+      </span>
+      <h3 className="mt-4 text-sm font-semibold text-[rgb(var(--ec-page-text))]">{title}</h3>
+      <p className="mt-1 text-[13px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">{description}</p>
+      <ul className="mt-4 space-y-2">
+        {points.map((point) => (
+          <li key={point} className="flex items-start gap-2 text-xs leading-snug text-[rgb(var(--ec-page-text-muted))]">
+            <Check aria-hidden className="mt-px h-3.5 w-3.5 flex-none text-emerald-500" />
+            {point}
+          </li>
+        ))}
+      </ul>
+      <div className="mt-auto pt-6">{children}</div>
+    </section>
+  );
+}
+
+/** Copies some text, saying it did (or that it couldn't) */
+function CopyButton({ text, label, icon, className }: { text: string; label: string; icon: ReactNode; className: string }) {
+  const [copied, setCopied] = useState<boolean | null>(null);
+  useEffect(() => {
+    if (copied === null) return;
+    const timer = setTimeout(() => setCopied(null), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  return (
+    <button type="button" onClick={async () => setCopied(await copyText(text))} className={className}>
+      {copied ? <Check aria-hidden /> : icon}
+      {copied ? 'Copied' : copied === false ? "Couldn't copy" : label}
+    </button>
+  );
+}
+
+export default function ShareDialog({
+  url,
+  title,
+  keptInMemory = false,
+  presence,
+  clientId,
+  onRename,
+  onJumpTo,
+  onConnectAgent,
+  onClose,
+  initialView = 'choose',
+}: {
+  /** Straight to live collaboration (who's here, and the invite), e.g. from the menu */
+  initialView?: 'choose' | 'invite';
+  url: string;
+  title?: string;
+  /** Canvases are lost when the server restarts */
+  keptInMemory?: boolean;
+  presence: PresenceStore | null;
+  clientId: number | null;
+  /** Not given when you're signed in */
+  onRename?: (name: string) => void;
+  onJumpTo: (peer: Peer) => void;
+  onConnectAgent: () => void;
+  onClose: () => void;
+}) {
+  const people = usePeople(presence);
+  const you = people.find((peer) => peer.clientId === clientId);
+  const others = people.filter((peer) => peer.clientId !== clientId);
+  const name = title || 'this canvas';
+  const invite = `I'm designing ${title ? `"${title}"` : 'an architecture'} in EventCatalog Studio. Join me, we can work on it together live: ${url}`;
+  const email = `mailto:?subject=${encodeURIComponent(`Join me on ${name} in EventCatalog Studio`)}&body=${encodeURIComponent(invite)}`;
+  // The ways to share first; live collaboration opens who's here and the invite
+  const [view, setView] = useState<'choose' | 'invite'>(initialView);
+  const choosing = view === 'choose';
+  const wide = 'w-full justify-center';
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && onClose();
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="share-canvas-title"
+        onClick={(event) => event.stopPropagation()}
+        className={`w-full ${choosing ? 'max-w-4xl' : 'max-w-lg'} rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] shadow-2xl`}
+      >
+        <div className="flex items-start justify-between gap-3 px-6 pt-5">
+          <div className="flex min-w-0 items-start gap-2">
+            {!choosing && (
+              <button
+                type="button"
+                aria-label="Back to the ways to share"
+                onClick={() => setView('choose')}
+                className="-ml-1.5 mt-0.5 rounded-md p-1 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))]"
+              >
+                <ArrowLeft aria-hidden className="h-4 w-4" />
+              </button>
+            )}
+            <div className="min-w-0">
+              <h2 id="share-canvas-title" className="truncate text-base font-semibold">
+                {choosing ? 'Share' : 'Live collaboration'}
+              </h2>
+              <p className="mt-1 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                {choosing
+                  ? `Choose how to work on ${title ? `"${title}"` : 'this canvas'} with others.`
+                  : "Everyone with the link joins live: you see each other's pointers and changes as they happen."}
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={onClose}
+            className="-mr-1 rounded-md p-1.5 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))]"
+          >
+            <X aria-hidden className="h-4 w-4" />
+          </button>
+        </div>
+
+        {choosing ? (
+          <div className="grid gap-4 px-6 pb-6 pt-5 md:grid-cols-3">
+            <Choice
+              icon={<Link2 aria-hidden />}
+              title="Share a link"
+              description="A link to this canvas, in your catalog."
+              points={[
+                'Teammates open it in EventCatalog',
+                'Paste it to your AI agent to build on',
+                keptInMemory ? "Kept in this EventCatalog's memory, until it restarts" : 'Kept in your catalog',
+              ]}
+            >
+              <CopyButton text={url} label="Copy link" icon={<Link2 aria-hidden />} className={`${secondary} ${wide}`} />
+            </Choice>
+
+            <Choice
+              icon={<Users aria-hidden />}
+              title="Live collaboration"
+              description="Work on this canvas together, in real time."
+              points={[
+                "See each other's pointers and edits",
+                'Comment and talk it through',
+                `${people.length} ${people.length === 1 ? 'person' : 'people'} here now`,
+              ]}
+            >
+              <button type="button" onClick={() => setView('invite')} className={`${primary} ${wide}`}>
+                <UserPlus aria-hidden /> Invite people
+              </button>
+            </Choice>
+
+            <Choice
+              icon={<Bot aria-hidden />}
+              title="Pair with your AI agent"
+              description="Sketch ideas with your agent, or have it explain how something works."
+              points={['Draws and edits the canvas with you', 'Claude, ChatGPT, Cursor and more']}
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  onClose();
+                  onConnectAgent();
+                }}
+                className={`${secondary} ${wide}`}
+              >
+                <Plug aria-hidden /> Connect agent
+              </button>
+            </Choice>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-5 px-6 pb-5 pt-4">
+              {/* Who's here */}
+              <section>
+                <div className="flex items-center justify-between">
+                  <h3 className={sectionLabel}>On this canvas</h3>
+                  <span className="inline-flex items-center gap-1.5 text-xs text-[rgb(var(--ec-page-text-muted))]">
+                    <span className="h-2 w-2 rounded-full bg-emerald-500" /> {people.length}{' '}
+                    {people.length === 1 ? 'person' : 'people'} here
+                  </span>
+                </div>
+                <ul className="mt-2 flex max-h-40 flex-wrap gap-2 overflow-y-auto">
+                  {you && <YouChip peer={you} onRename={onRename} />}
+                  {others.map((peer) => (
+                    <li key={peer.clientId}>
+                      <button
+                        type="button"
+                        title={`Go to what ${peer.name} is looking at${peer.activity ? ` (${peer.activity})` : ''}`}
+                        onClick={() => {
+                          onJumpTo(peer);
+                          onClose();
+                        }}
+                        className="inline-flex items-center gap-2 rounded-full border border-[rgb(var(--ec-page-border))] py-1 pl-1 pr-3 text-sm hover:border-[rgb(var(--ec-accent))]"
+                      >
+                        <Avatar peer={peer} />
+                        {peer.name}
+                        {peer.agent && (
+                          <span className="rounded px-1 py-px text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]">
+                            AI agent
+                          </span>
+                        )}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+                {others.length === 0 && (
+                  <p className="mt-2 text-xs text-[rgb(var(--ec-page-text-muted))]">
+                    Just you so far. Send the link to bring people in.
+                  </p>
+                )}
+              </section>
+
+              {/* Inviting people */}
+              <section>
+                <h3 className={sectionLabel}>Invite people</h3>
+                <p className="mt-1 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                  Anyone with this link joins and edits this canvas with you.
+                </p>
+                <div className="mt-2 flex w-full items-center gap-2">
+                  <div
+                    title={url}
+                    className="flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover))] px-3 text-sm text-[rgb(var(--ec-page-text-muted))]"
+                  >
+                    <Link2 aria-hidden className="h-4 w-4 flex-none" />
+                    <span className="truncate font-mono text-xs">{shortened(url)}</span>
+                  </div>
+                  <CopyButton text={url} label="Copy invite" icon={<Copy aria-hidden />} className={primary} />
+                </div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  <a href={email} className={`${secondary} h-8 px-3 text-xs`}>
+                    <Mail aria-hidden /> Email an invite
+                  </a>
+                  <CopyButton
+                    text={invite}
+                    label="Copy invite message"
+                    icon={<MessageSquareText aria-hidden />}
+                    className={`${secondary} h-8 px-3 text-xs`}
+                  />
+                </div>
+              </section>
+            </div>
+
+            <div className="flex items-center justify-between gap-3 border-t border-[rgb(var(--ec-page-border))] px-6 py-3">
+              <p className="flex items-start gap-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]">
+                <Globe aria-hidden className="mt-px h-3 w-3 flex-none" />
+                <span>
+                  Anyone with the link can view and edit.
+                  {keptInMemory && " Canvases are kept in this EventCatalog's memory, so they're lost when it restarts."}
+                </span>
+              </p>
+              <button type="button" onClick={onClose} className={secondary}>
+                Done
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const initials = (name: string) =>
+  name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]!.toUpperCase())
+    .join('');
+
+function Avatar({ peer }: { peer: Peer }) {
+  return (
+    <span
+      className="relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white"
+      style={{ backgroundColor: peer.color }}
+    >
+      {peer.agent ? <AgentMark name={peer.name} size={12} /> : initials(peer.name)}
+      <Picture src={peer.picture} />
+    </span>
+  );
+}
+
+/** You, with your name (the name others see you by, which you can change unless you're signed in) */
+function YouChip({ peer, onRename }: { peer: Peer; onRename?: (name: string) => void }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(peer.name);
+  const save = () => {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== peer.name) onRename?.(trimmed);
+    setEditing(false);
+  };
+  return (
+    <li className="inline-flex items-center gap-2 rounded-full border border-[rgb(var(--ec-page-border))] py-1 pl-1 pr-2 text-sm">
+      <Avatar peer={peer} />
+      {editing ? (
+        <input
+          autoFocus
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={save}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') save();
+            if (event.key === 'Escape') {
+              event.stopPropagation();
+              setEditing(false);
+            }
+          }}
+          aria-label="Your name"
+          className="w-36 rounded-md border px-2 py-0.5 text-xs bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))]"
+        />
+      ) : (
+        <>
+          {peer.name} <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">(you)</span>
+        </>
+      )}
+      {!editing && onRename && (
+        <button
+          type="button"
+          aria-label="Change your name"
+          title="Change the name others see you by"
+          onClick={() => {
+            setDraft(peer.name);
+            setEditing(true);
+          }}
+          className="rounded-full p-1 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))]"
+        >
+          <Pencil aria-hidden className="h-3 w-3" />
+        </button>
+      )}
+    </li>
+  );
+}