@1agh/maude 0.23.0 → 0.24.0

package/plugins/design/dev-server/collab/room.ts

@@ -73,6 +73,14 @@ export function createRoom(slug: string, callbacks: RoomCallbacks): Room {
   const awareness = new Awareness(doc);
 
   const conns = new Map<string, RoomConn>();
+  // clientID → owning conn.id, learned from the origin of each awareness update.
+  // Server-authoritative: we do NOT trust a client-supplied `__connId` (awareness
+  // is attacker-influenceable through a semi-trusted hub — DDR-054). On disconnect
+  // we remove exactly the clientIDs this conn published so other peers drop the
+  // avatar immediately, instead of waiting out the ~30s awareness timeout (which
+  // let phantom peers pile up on rapid reconnects — the cross-origin repro that
+  // surfaced this latent bug).
+  const connByClient = new Map<number, string>();
   let dirty = false;
   let flushTimer: ReturnType<typeof setTimeout> | null = null;
   let destroyed = false;
@@ -138,6 +146,13 @@ export function createRoom(slug: string, callbacks: RoomCallbacks): Room {
       if (changed.length === 0) return;
       const except =
         origin && typeof origin === 'object' && 'id' in origin ? (origin as RoomConn) : undefined;
+      // Learn which clientIDs belong to which conn from the update origin, so
+      // disconnect() can evict them precisely.
+      if (except) {
+        for (const id of added) connByClient.set(id, except.id);
+        for (const id of updated) connByClient.set(id, except.id);
+        for (const id of removed) connByClient.delete(id);
+      }
       broadcast(encodeAwarenessFrame(awareness, changed), except);
     }
   );
@@ -161,16 +176,14 @@ export function createRoom(slug: string, callbacks: RoomCallbacks): Room {
 
   function disconnect(conn: RoomConn): void {
     conns.delete(conn.id);
-    // Awareness states keyed by the conn token; clean them up so other peers'
-    // cursor renderers can drop the avatar.
-    const states = awareness.getStates();
+    // Remove the awareness states this conn published (tracked by update origin
+    // in connByClient) so other peers' cursor renderers drop the avatar now,
+    // not after the ~30s awareness timeout.
     const stale: number[] = [];
-    for (const clientId of states.keys()) {
-      // Bridge: our Awareness state setters tag the state with `__connId`
-      // matching conn.id; remove states whose owning conn just left.
-      const state = states.get(clientId) as { __connId?: string } | undefined;
-      if (state && state.__connId === conn.id) stale.push(clientId);
+    for (const [clientId, connId] of connByClient) {
+      if (connId === conn.id) stale.push(clientId);
     }
+    for (const clientId of stale) connByClient.delete(clientId);
     if (stale.length) removeAwarenessStates(awareness, stale, conn);
   }
 

package/plugins/design/dev-server/context-menu.tsx

@@ -55,6 +55,15 @@ export interface MenuItem {
   shortcut?: string;
   destructive?: boolean;
   disabled?: boolean;
+  /**
+   * Optional nested flyout (e.g. `Theme ▸ DS default / Light / Dark / Follow
+   * chrome`). When present the row opens a submenu on hover / ArrowRight /
+   * click and `onSelect` on THIS item is not invoked — only the chosen leaf's
+   * `onSelect` fires. A disabled leaf carries `disabledHint` for its title.
+   */
+  submenu?: MenuItem[];
+  /** Hover/title hint shown when the item is `disabled` (a11y affordance). */
+  disabledHint?: string;
   onSelect: (target: ContextTarget) => void;
 }
 
@@ -158,20 +167,20 @@ const MENU_CSS = `
 .dc-context-menu {
   position: fixed;
   z-index: 7;
-  background: var(--u-bg-0, var(--bg-0, #fff));
-  border: 1px solid var(--u-fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #fff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: 8px;
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
   padding: 4px;
   min-width: 220px;
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--u-fg-0, var(--fg-0, rgba(20,15,10,0.92)));
+  color: var(--maude-chrome-fg-0, rgba(20,15,10,0.92));
   user-select: none;
 }
 .dc-context-menu .dc-menu-sep {
   height: 1px;
-  background: var(--border-subtle, rgba(0,0,0,0.08));
+  background: var(--maude-chrome-border, rgba(0,0,0,0.08));
   margin: 4px -4px;
 }
 .dc-context-menu .dc-menu-item {
@@ -191,7 +200,7 @@ const MENU_CSS = `
 }
 .dc-context-menu .dc-menu-item:hover,
 .dc-context-menu .dc-menu-item:focus-visible {
-  background: var(--u-bg-3, var(--bg-3, rgba(0,0,0,0.05)));
+  background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 8%, transparent);
   outline: none;
 }
 .dc-context-menu .dc-menu-item[disabled] {
@@ -204,11 +213,28 @@ const MENU_CSS = `
   color: var(--accent-fg, #fff);
 }
 .dc-context-menu .dc-menu-shortcut {
-  color: var(--fg-2, rgba(40,30,20,0.55));
+  color: var(--maude-chrome-fg-1, rgba(40,30,20,0.55));
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 10px;
   font-variant-numeric: tabular-nums;
 }
+/* Submenu flyout (Theme ▸ …). Anchored to the right of its parent row; flips
+   left near the viewport edge via .is-flip. Reuses .dc-menu-item styling. */
+.dc-context-menu .dc-menu-sub { position: relative; }
+.dc-context-menu .dc-menu-caret { color: var(--maude-chrome-fg-1, rgba(40,30,20,0.55)); font-size: 11px; }
+.dc-context-menu .dc-menu-flyout {
+  position: absolute;
+  top: -5px;
+  left: calc(100% + 3px);
+  min-width: 196px;
+  padding: 4px;
+  background: var(--maude-chrome-bg-0, #fff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
+  border-radius: 8px;
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
+  z-index: 8;
+}
+.dc-context-menu .dc-menu-flyout.is-flip { left: auto; right: calc(100% + 3px); }
 `.trim();
 
 function ensureMenuStyles(): void {
@@ -346,21 +372,7 @@ function ContextMenuView({
           <div key={sectionKey} role="group">
             {si > 0 ? <div className="dc-menu-sep" aria-hidden="true" /> : null}
             {section.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                role="menuitem"
-                disabled={item.disabled}
-                className={`dc-menu-item${item.destructive ? ' is-destructive' : ''}`}
-                onClick={() => {
-                  if (item.disabled) return;
-                  item.onSelect(target);
-                  onClose();
-                }}
-              >
-                <span>{item.label}</span>
-                {item.shortcut ? <span className="dc-menu-shortcut">{item.shortcut}</span> : null}
-              </button>
+              <MenuItemRow key={item.id} item={item} target={target} onClose={onClose} />
             ))}
           </div>
         );
@@ -368,3 +380,135 @@ function ContextMenuView({
     </div>
   );
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// MenuItemRow — a single menu row. Plain rows render a button; rows with a
+// `submenu` render a flyout (opens on hover / ArrowRight / click). Additive:
+// existing flat registries (no `submenu`) take the plain-button path unchanged.
+
+function MenuItemRow({
+  item,
+  target,
+  onClose,
+}: {
+  item: MenuItem;
+  target: ContextTarget;
+  onClose: () => void;
+}) {
+  const [subOpen, setSubOpen] = useState(false);
+  const [flip, setFlip] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const flyoutRef = useRef<HTMLDivElement>(null);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  if (!item.submenu || item.submenu.length === 0) {
+    return (
+      <button
+        type="button"
+        role="menuitem"
+        disabled={item.disabled}
+        title={item.disabled ? item.disabledHint : undefined}
+        className={`dc-menu-item${item.destructive ? ' is-destructive' : ''}`}
+        onClick={() => {
+          if (item.disabled) return;
+          item.onSelect(target);
+          onClose();
+        }}
+      >
+        <span>{item.label}</span>
+        {item.shortcut ? <span className="dc-menu-shortcut">{item.shortcut}</span> : null}
+      </button>
+    );
+  }
+
+  const cancelClose = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+  const open = (focusFirst = false) => {
+    cancelClose();
+    const r = btnRef.current?.getBoundingClientRect();
+    if (r && typeof window !== 'undefined') setFlip(r.right + 200 > window.innerWidth);
+    setSubOpen(true);
+    if (focusFirst) {
+      setTimeout(() => {
+        flyoutRef.current
+          ?.querySelector<HTMLButtonElement>('button.dc-menu-item:not([disabled])')
+          ?.focus();
+      }, 0);
+    }
+  };
+  const scheduleClose = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setSubOpen(false), 140);
+  };
+
+  return (
+    <div className="dc-menu-sub" onMouseEnter={() => open()} onMouseLeave={scheduleClose}>
+      <button
+        ref={btnRef}
+        type="button"
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={subOpen}
+        disabled={item.disabled}
+        className="dc-menu-item"
+        onClick={() => (subOpen ? setSubOpen(false) : open())}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            open(true);
+          } else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            if (subOpen) {
+              e.stopPropagation();
+              setSubOpen(false);
+            }
+          }
+        }}
+      >
+        <span>{item.label}</span>
+        <span className="dc-menu-caret" aria-hidden="true">
+          ▸
+        </span>
+      </button>
+      {subOpen ? (
+        <div
+          ref={flyoutRef}
+          className={`dc-menu-flyout${flip ? ' is-flip' : ''}`}
+          role="menu"
+          onMouseEnter={cancelClose}
+          onMouseLeave={scheduleClose}
+        >
+          {item.submenu.map((sub) => (
+            <button
+              key={sub.id}
+              type="button"
+              role="menuitem"
+              disabled={sub.disabled}
+              title={sub.disabled ? sub.disabledHint : undefined}
+              className={`dc-menu-item${sub.destructive ? ' is-destructive' : ''}`}
+              onClick={() => {
+                if (sub.disabled) return;
+                sub.onSelect(target);
+                onClose();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setSubOpen(false);
+                  btnRef.current?.focus();
+                }
+              }}
+            >
+              <span>{sub.label}</span>
+              {sub.shortcut ? <span className="dc-menu-shortcut">{sub.shortcut}</span> : null}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/plugins/design/dev-server/context.ts

@@ -117,6 +117,30 @@ export interface Context {
   projectLabel: string;
   paths: Paths;
   bus: Bus;
+  /**
+   * T2 (9.1-A) — origin of the segregated canvas-content server (e.g.
+   * `http://localhost:51234`), set by server.ts once the second listener binds.
+   * The client reads it via /_config to build absolute, cross-origin iframe
+   * URLs. Undefined in tests / before the canvas listener boots.
+   */
+  canvasOrigin?: string;
+  /**
+   * T2 (9.1-A) — origin of the MAIN dev-server listener (e.g.
+   * `http://localhost:4399`), set by server.ts once the primary listener binds.
+   * Used by `cspForCanvasShell` to allowlist the legit embedder in the canvas
+   * origin's `frame-ancestors`. Undefined in tests / before boot.
+   */
+  mainOrigin?: string;
+  /**
+   * Phase 9.2 (DDR-064) — `MAUDE_SHARED_DOC` feature flag. When true, the
+   * collab room's Y.Doc becomes the SINGLE shared doc per canvas: the
+   * hub-facing HocuspocusProvider attaches to it directly (no second doc, no
+   * disk-mediated reconcile). Default `false`/undefined = the proven two-doc
+   * path = zero regression. Set by server.ts from the env; tests set it
+   * directly on the Context they construct. Threaded through Phase A; the flag
+   * gates behavior starting in Phase B.
+   */
+  sharedDoc?: boolean;
 }
 
 function resolveRepoRoot(): string {

package/plugins/design/dev-server/contextual-toolbar.tsx

@@ -41,14 +41,14 @@ const CTX_TOOLBAR_CSS = `
   align-items: stretch;
   gap: 2px;
   padding: 4px;
-  background: var(--u-bg-0, var(--bg-0, #ffffff));
-  border: 1px solid var(--u-fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: 8px;
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   letter-spacing: 0.02em;
-  color: var(--u-fg-0, #1a1a1a);
+  color: var(--maude-chrome-fg-0, #1a1a1a);
   user-select: none;
   opacity: 0;
   transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -72,8 +72,8 @@ const CTX_TOOLBAR_CSS = `
 }
 .dc-elem-ctx-tb .dc-elem-ctx-count {
   padding: 4px 8px 4px 10px;
-  color: var(--fg-1, rgba(40,30,20,0.7));
-  border-right: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08));
+  color: var(--maude-chrome-fg-1, rgba(40,30,20,0.7));
+  border-right: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08));
   margin-right: 2px;
   font-variant-numeric: tabular-nums;
 }