@gigabuddy/gadgets 0.1.8 → 0.1.10

package/index.js

@@ -5,6 +5,7 @@ function createGadgetRenderer(componentCode, data = {}, options) {
   const stateEnabled = options?.stateEnabled ?? false;
   const chatEnabled = options?.chatEnabled ?? false;
   const contextEnabled = options?.contextEnabled ?? false;
+  const roomEnabled = options?.roomEnabled ?? false;
   const escapedCode = componentCode.replace(/<\/script>/g, "<\\/script>");
   const serializedAssets = JSON.stringify(options?.assets ?? {});
   const stateBridgeScript = stateEnabled ? `
@@ -150,10 +151,183 @@ function createGadgetRenderer(componentCode, data = {}, options) {
         window.__rerenderGadget();
       }
     });` : "";
+  const roomBridgeScript = roomEnabled ? `
+    // \u2500\u2500 Room presence \u2500\u2500
+    window.gadget.room = {
+      peers: [],
+      userId: null,
+      displayName: null,
+      _peersCallbacks: [],
+      _playerJoinedCallbacks: [],
+      _playerLeftCallbacks: [],
+
+      setCursor: function(pos) {
+        window.parent.postMessage({ type: 'gadget-presence', cursor: pos }, '*');
+      },
+      setSelection: function(sel) {
+        window.parent.postMessage({ type: 'gadget-presence', selection: sel }, '*');
+      },
+      onPeersChange: function(cb) {
+        window.gadget.room._peersCallbacks.push(cb);
+        cb(window.gadget.room.peers);
+        return function() {
+          var i = window.gadget.room._peersCallbacks.indexOf(cb);
+          if (i !== -1) window.gadget.room._peersCallbacks.splice(i, 1);
+        };
+      },
+      onPlayerJoined: function(cb) {
+        window.gadget.room._playerJoinedCallbacks.push(cb);
+        return function() {
+          var i = window.gadget.room._playerJoinedCallbacks.indexOf(cb);
+          if (i !== -1) window.gadget.room._playerJoinedCallbacks.splice(i, 1);
+        };
+      },
+      onPlayerLeft: function(cb) {
+        window.gadget.room._playerLeftCallbacks.push(cb);
+        return function() {
+          var i = window.gadget.room._playerLeftCallbacks.indexOf(cb);
+          if (i !== -1) window.gadget.room._playerLeftCallbacks.splice(i, 1);
+        };
+      },
+    };
+
+    // \u2500\u2500 Room chat \u2500\u2500
+    window.gadget.roomChat = {
+      messages: [],
+      _messageCallbacks: [],
+
+      send: function(text) {
+        window.parent.postMessage({ type: 'gadget-chat-send', text: text }, '*');
+      },
+      onMessage: function(cb) {
+        window.gadget.roomChat._messageCallbacks.push(cb);
+        return function() {
+          var i = window.gadget.roomChat._messageCallbacks.indexOf(cb);
+          if (i !== -1) window.gadget.roomChat._messageCallbacks.splice(i, 1);
+        };
+      },
+    };
+
+    // \u2500\u2500 Gestures \u2500\u2500
+    window.gadget.gestures = {
+      active: [],
+      _spawnedCallbacks: [],
+      _dismissedCallbacks: [],
+
+      spawn: function(gadgetId, anchor, opts) {
+        opts = opts || {};
+        window.parent.postMessage({
+          type: 'gadget-gesture-send',
+          gadgetId: gadgetId,
+          anchor: anchor,
+          ttl: opts.ttl,
+          size: opts.size,
+          rotation: opts.rotation,
+        }, '*');
+      },
+      dismiss: function(gestureId) {
+        window.parent.postMessage({ type: 'gadget-gesture-dismiss', gestureId: gestureId }, '*');
+      },
+      reportAnchorRect: function(selector, rect) {
+        window.parent.postMessage({ type: 'gadget-anchor-rect', selector: selector, rect: rect }, '*');
+      },
+      onSpawned: function(cb) {
+        window.gadget.gestures._spawnedCallbacks.push(cb);
+        return function() {
+          var i = window.gadget.gestures._spawnedCallbacks.indexOf(cb);
+          if (i !== -1) window.gadget.gestures._spawnedCallbacks.splice(i, 1);
+        };
+      },
+      onDismissed: function(cb) {
+        window.gadget.gestures._dismissedCallbacks.push(cb);
+        return function() {
+          var i = window.gadget.gestures._dismissedCallbacks.indexOf(cb);
+          if (i !== -1) window.gadget.gestures._dismissedCallbacks.splice(i, 1);
+        };
+      },
+    };
+
+    // \u2500\u2500 Buddy attraction \u2500\u2500
+    window.gadget.buddy = {
+      attract: function(anchor, interest) {
+        window.parent.postMessage({
+          type: 'gadget-buddy-attract',
+          anchor: anchor,
+          interest: interest || 'medium',
+        }, '*');
+      },
+    };
+
+    window.addEventListener('message', function(event) {
+      var d = event.data;
+      if (!d) return;
+
+      // Presence updates
+      if (d.type === 'gadget-presence-update') {
+        window.gadget.room.peers = d.peers || [];
+        window.gadget.room._peersCallbacks.forEach(function(cb) { try { cb(d.peers || []); } catch(e) {} });
+        window.__rerenderGadget && window.__rerenderGadget();
+      }
+
+      // Player join/leave
+      if (d.type === 'gadget-player-joined') {
+        window.gadget.room._playerJoinedCallbacks.forEach(function(cb) { try { cb(d); } catch(e) {} });
+      }
+      if (d.type === 'gadget-player-left') {
+        window.gadget.room.peers = window.gadget.room.peers.filter(function(p) { return p.userId !== d.userId; });
+        window.gadget.room._playerLeftCallbacks.forEach(function(cb) { try { cb(d.userId); } catch(e) {} });
+        window.__rerenderGadget && window.__rerenderGadget();
+      }
+
+      // Chat
+      if (d.type === 'gadget-chat-message') {
+        var msg = d.message || d;
+        window.gadget.roomChat.messages.push(msg);
+        if (window.gadget.roomChat.messages.length > 100) window.gadget.roomChat.messages.shift();
+        window.gadget.roomChat._messageCallbacks.forEach(function(cb) { try { cb(msg); } catch(e) {} });
+        window.__rerenderGadget && window.__rerenderGadget();
+      }
+      if (d.type === 'gadget-chat-history') {
+        window.gadget.roomChat.messages = d.messages || [];
+        window.__rerenderGadget && window.__rerenderGadget();
+      }
+
+      // Gestures
+      if (d.type === 'gadget-gesture-spawned') {
+        window.gadget.gestures.active.push(d.gesture);
+        window.gadget.gestures._spawnedCallbacks.forEach(function(cb) { try { cb(d.gesture); } catch(e) {} });
+        window.__rerenderGadget && window.__rerenderGadget();
+      }
+      if (d.type === 'gadget-gesture-dismissed') {
+        window.gadget.gestures.active = window.gadget.gestures.active.filter(function(g) { return g.id !== d.gestureId; });
+        window.gadget.gestures._dismissedCallbacks.forEach(function(cb) { try { cb(d.gestureId); } catch(e) {} });
+        window.__rerenderGadget && window.__rerenderGadget();
+      }
+      if (d.type === 'gadget-gesture-sync') {
+        window.gadget.gestures.active = d.gestures || [];
+        window.__rerenderGadget && window.__rerenderGadget();
+      }
+
+      // Anchor rect request from host
+      if (d.type === 'gadget-request-anchor-rect' && d.selector) {
+        try {
+          var el = document.querySelector(d.selector);
+          if (el) {
+            var rect = el.getBoundingClientRect();
+            window.parent.postMessage({
+              type: 'gadget-anchor-rect',
+              selector: d.selector,
+              rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+            }, '*');
+          }
+        } catch(e) {}
+      }
+    });` : "";
   const chatPropFragment = chatEnabled ? ", chat: window.gadget.chat" : "";
   const contextPropFragment = contextEnabled ? ", context: window.gadget.context" : "";
+  const roomPropFragment = roomEnabled ? ", room: window.gadget.room, roomChat: window.gadget.roomChat, gestures: window.gadget.gestures" : "";
   const breakoutPropFragment = ", breakout: { active: window.gadget.breakout._active, originalRect: window.gadget.breakout._originalRect, request: window.gadget.breakout.request, exit: window.gadget.breakout.exit }";
-  const componentProps = stateEnabled ? `{ data: window.__GADGET_DATA__, viewport: window.__GADGET_VIEWPORT__, state: window.gadget.state ? { shared: window.gadget.state.shared, user: window.gadget.state.user } : undefined, userId: window.gadget.state ? window.gadget.state.userId : undefined${chatPropFragment}${contextPropFragment}${breakoutPropFragment} }` : `{ data: window.__GADGET_DATA__, viewport: window.__GADGET_VIEWPORT__${chatPropFragment}${contextPropFragment}${breakoutPropFragment} }`;
+  const componentProps = stateEnabled ? `{ data: window.__GADGET_DATA__, viewport: window.__GADGET_VIEWPORT__, state: window.gadget.state ? { shared: window.gadget.state.shared, user: window.gadget.state.user } : undefined, userId: window.gadget.state ? window.gadget.state.userId : undefined${chatPropFragment}${contextPropFragment}${breakoutPropFragment}${roomPropFragment} }` : `{ data: window.__GADGET_DATA__, viewport: window.__GADGET_VIEWPORT__${chatPropFragment}${contextPropFragment}${breakoutPropFragment}${roomPropFragment} }`;
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -236,6 +410,7 @@ function createGadgetRenderer(componentCode, data = {}, options) {
 ${stateBridgeScript}
 ${chatBridgeScript}
 ${contextBridgeScript}
+${roomBridgeScript}
 
     window.__gadgetRoot = null;
     window.__gadgetComponent = null;
@@ -317,7 +492,7 @@ ${contextBridgeScript}
         window.__gadgetRoot = root;
         root.render(
           <ErrorBoundary>
-            <ComponentToRender data={window.__GADGET_DATA__} viewport={window.__GADGET_VIEWPORT__}${stateEnabled ? " state={window.gadget.state ? { shared: window.gadget.state.shared, user: window.gadget.state.user } : undefined} userId={window.gadget.state ? window.gadget.state.userId : undefined}" : ""}${chatEnabled ? " chat={window.gadget.chat}" : ""}${contextEnabled ? " context={window.gadget.context}" : ""} breakout={{ active: window.gadget.breakout._active, originalRect: window.gadget.breakout._originalRect, request: window.gadget.breakout.request, exit: window.gadget.breakout.exit }} />
+            <ComponentToRender data={window.__GADGET_DATA__} viewport={window.__GADGET_VIEWPORT__}${stateEnabled ? " state={window.gadget.state ? { shared: window.gadget.state.shared, user: window.gadget.state.user } : undefined} userId={window.gadget.state ? window.gadget.state.userId : undefined}" : ""}${chatEnabled ? " chat={window.gadget.chat}" : ""}${contextEnabled ? " context={window.gadget.context}" : ""}${roomEnabled ? " room={window.gadget.room} roomChat={window.gadget.roomChat} gestures={window.gadget.gestures}" : ""} breakout={{ active: window.gadget.breakout._active, originalRect: window.gadget.breakout._originalRect, request: window.gadget.breakout.request, exit: window.gadget.breakout.exit }} />
           </ErrorBoundary>
         );
       } else {
@@ -497,8 +672,295 @@ function setupGadgetBreakout(iframe, options) {
     window.removeEventListener("message", handler);
   };
 }
+
+// libs/gadgets/src/lib/setupGadgetAwareness.ts
+function setupGadgetAwareness(iframe, options) {
+  const {
+    gadgetId,
+    sceneGraph,
+    getAwarenessStates,
+    onAwarenessPublish,
+    onSceneGraphChange,
+    throttleMs = 100
+  } = options;
+  let filter = "focused";
+  let throttleTimer = null;
+  let pendingUpdate = false;
+  function getIframeBounds() {
+    return iframe.getBoundingClientRect();
+  }
+  function roomToGadget(rx, ry, bounds) {
+    const gx = (rx - bounds.left) / bounds.width;
+    const gy = (ry - bounds.top) / bounds.height;
+    if (gx < 0 || gx > 1 || gy < 0 || gy > 1)
+      return null;
+    return { x: gx, y: gy };
+  }
+  function gadgetToRoom(gx, gy, bounds) {
+    return {
+      x: gx * bounds.width + bounds.left,
+      y: gy * bounds.height + bounds.top
+    };
+  }
+  function buildAwarenessState() {
+    const states = getAwarenessStates();
+    const bounds = getIframeBounds();
+    const allParticipants = [];
+    const focused = [];
+    for (const [, entry] of states) {
+      const s = entry.state;
+      if (!s || typeof s !== "object")
+        continue;
+      const participant = {
+        actorId: s["actorId"] ?? s["displayName"] ?? "unknown",
+        displayName: s["displayName"],
+        intent: s["intent"],
+        focus: s["focus"]
+      };
+      const cursorVal = s["cursor"];
+      if (cursorVal && typeof cursorVal === "object") {
+        const rc = cursorVal;
+        const gc = roomToGadget(rc.x, rc.y, bounds);
+        if (gc) {
+          participant.cursor = gc;
+        }
+      }
+      allParticipants.push(participant);
+      const focusVal = s["focus"];
+      if (focusVal === gadgetId || focusVal === `gadget:${gadgetId}`) {
+        focused.push(participant);
+      }
+    }
+    const gadgetAnchors = sceneGraph.getGadgetAnchors(gadgetId).map((a) => ({
+      id: a.anchorId,
+      bounds: a.bounds,
+      occupant: a.occupant,
+      attention: a.attention
+    }));
+    return {
+      participants: filter === "focused" ? focused : allParticipants,
+      anchors: gadgetAnchors,
+      focused
+    };
+  }
+  function scheduleForward() {
+    if (throttleTimer) {
+      pendingUpdate = true;
+      return;
+    }
+    forwardAwareness();
+    throttleTimer = setTimeout(() => {
+      throttleTimer = null;
+      if (pendingUpdate) {
+        pendingUpdate = false;
+        forwardAwareness();
+      }
+    }, throttleMs);
+  }
+  function forwardAwareness() {
+    if (!iframe.contentWindow)
+      return;
+    const state = buildAwarenessState();
+    iframe.contentWindow.postMessage({ type: "gadget-awareness-state", ...state }, "*");
+  }
+  function handleMessage(event) {
+    if (event.source !== iframe.contentWindow)
+      return;
+    const msg = event.data;
+    if (!msg || typeof msg.type !== "string")
+      return;
+    switch (msg.type) {
+      case "gadget-anchor-register": {
+        const anchors = msg.anchors;
+        if (Array.isArray(anchors)) {
+          sceneGraph.registerAnchors(gadgetId, anchors);
+          onSceneGraphChange?.();
+        }
+        break;
+      }
+      case "gadget-anchor-update": {
+        const { id, occupant, attention } = msg;
+        if (typeof id === "string") {
+          sceneGraph.updateAnchor(gadgetId, id, { occupant, attention });
+          onSceneGraphChange?.();
+        }
+        break;
+      }
+      case "gadget-awareness-publish": {
+        const state = msg.state;
+        if (state && typeof state === "object") {
+          if (state["cursor"] && typeof state["cursor"] === "object") {
+            const gc = state["cursor"];
+            const bounds = getIframeBounds();
+            state["cursor"] = gadgetToRoom(gc.x, gc.y, bounds);
+          }
+          onAwarenessPublish?.(gadgetId, state);
+        }
+        break;
+      }
+      case "gadget-awareness-subscribe": {
+        const newFilter = msg.filter;
+        if (newFilter === "focused" || newFilter === "room" || newFilter === "all") {
+          filter = newFilter;
+          forwardAwareness();
+        }
+        break;
+      }
+    }
+  }
+  window.addEventListener("message", handleMessage);
+  const onLoad = () => forwardAwareness();
+  iframe.addEventListener("load", onLoad);
+  return () => {
+    window.removeEventListener("message", handleMessage);
+    iframe.removeEventListener("load", onLoad);
+    if (throttleTimer)
+      clearTimeout(throttleTimer);
+    sceneGraph.removeGadget(gadgetId);
+    onSceneGraphChange?.();
+  };
+}
+
+// libs/gadgets/src/lib/sceneGraph.ts
+var SceneGraph = class {
+  anchors = /* @__PURE__ */ new Map();
+  onChange = null;
+  /**
+   * Set a callback for when the scene graph changes.
+   */
+  setOnChange(cb) {
+    this.onChange = cb;
+  }
+  /**
+   * Register anchors for a gadget. Replaces any existing anchors
+   * from the same gadget with the same IDs.
+   */
+  registerAnchors(gadgetId, anchors) {
+    for (const a of anchors) {
+      const qualifiedId = `${gadgetId}:${a.id}`;
+      const parentQualified = a.parent ? `${gadgetId}:${a.parent}` : void 0;
+      this.anchors.set(qualifiedId, {
+        qualifiedId,
+        anchorId: a.id,
+        gadgetId,
+        bounds: a.bounds,
+        parent: parentQualified,
+        occupant: this.anchors.get(qualifiedId)?.occupant,
+        attention: this.anchors.get(qualifiedId)?.attention ?? []
+      });
+    }
+    this.onChange?.();
+  }
+  /**
+   * Update an anchor's occupancy or attention.
+   */
+  updateAnchor(gadgetId, anchorId, update) {
+    const qualifiedId = `${gadgetId}:${anchorId}`;
+    const anchor = this.anchors.get(qualifiedId);
+    if (!anchor)
+      return;
+    if (update.occupant !== void 0) {
+      anchor.occupant = update.occupant ?? void 0;
+    }
+    if (update.attention !== void 0) {
+      anchor.attention = update.attention;
+    }
+    this.onChange?.();
+  }
+  /**
+   * Remove all anchors for a gadget (cleanup on iframe removal).
+   */
+  removeGadget(gadgetId) {
+    const toRemove = [];
+    for (const [id, anchor] of this.anchors) {
+      if (anchor.gadgetId === gadgetId) {
+        toRemove.push(id);
+      }
+    }
+    for (const id of toRemove) {
+      this.anchors.delete(id);
+    }
+    if (toRemove.length > 0)
+      this.onChange?.();
+  }
+  /**
+   * Get all anchors as a flat map.
+   */
+  getAnchors() {
+    return this.anchors;
+  }
+  /**
+   * Get anchors for a specific gadget.
+   */
+  getGadgetAnchors(gadgetId) {
+    const result = [];
+    for (const anchor of this.anchors.values()) {
+      if (anchor.gadgetId === gadgetId) {
+        result.push(anchor);
+      }
+    }
+    return result;
+  }
+  /**
+   * Get the anchor tree, optionally rooted at a specific anchor.
+   */
+  getAnchorTree(rootId) {
+    const childMap = /* @__PURE__ */ new Map();
+    for (const anchor of this.anchors.values()) {
+      const parentKey = anchor.parent ?? void 0;
+      if (!childMap.has(parentKey))
+        childMap.set(parentKey, []);
+      childMap.get(parentKey).push(anchor);
+    }
+    const buildNode = (anchor) => {
+      const children = (childMap.get(anchor.qualifiedId) ?? []).map(buildNode);
+      return { ...anchor, children };
+    };
+    if (rootId) {
+      const root = this.anchors.get(rootId);
+      if (!root)
+        return [];
+      return [buildNode(root)];
+    }
+    return (childMap.get(void 0) ?? []).map(buildNode);
+  }
+  /**
+   * Find the anchor at a given point (in room coordinates).
+   * Returns the deepest (most specific) anchor containing the point.
+   */
+  findAnchorAt(x, y) {
+    let best = null;
+    let bestArea = Infinity;
+    for (const anchor of this.anchors.values()) {
+      const b = anchor.bounds;
+      if (x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
+        const area = b.w * b.h;
+        if (area < bestArea) {
+          best = anchor;
+          bestArea = area;
+        }
+      }
+    }
+    return best;
+  }
+  /**
+   * Get a serializable snapshot of all anchors.
+   */
+  toJSON() {
+    return Array.from(this.anchors.values()).map((a) => ({
+      id: a.qualifiedId,
+      gadgetId: a.gadgetId,
+      bounds: a.bounds,
+      parent: a.parent,
+      occupant: a.occupant,
+      attention: a.attention
+    }));
+  }
+};
 export {
+  SceneGraph,
   createGadgetRenderer,
+  setupGadgetAwareness,
   setupGadgetBreakout
 };
 //# sourceMappingURL=index.js.map