@percena/weft 0.4.0-next.0 → 0.4.0-next.10

package/dist/action-bridge.cjs

@@ -0,0 +1,323 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/action-bridge.ts
+var action_bridge_exports = {};
+__export(action_bridge_exports, {
+  ActionReplayLayer: () => ActionReplayLayer,
+  DEFAULT_TIMING: () => DEFAULT_TIMING,
+  createActionBridge: () => createActionBridge,
+  useActionBridge: () => useActionBridge,
+  weftAction: () => weftAction,
+  weftActionSelector: () => weftActionSelector
+});
+module.exports = __toCommonJS(action_bridge_exports);
+
+// ../packages/action-bridge/dist/index.js
+var DEFAULT_TIMING = {
+  cursorMoveMs: 550,
+  rippleMs: 450,
+  flashMs: 900,
+  cursorHideMs: 2600,
+  settleMs: 180
+};
+function weftAction(action, id) {
+  return { "data-weft-action": id === void 0 ? action : `${action}:${id}` };
+}
+function weftActionSelector(target) {
+  return `[data-weft-action=${JSON.stringify(target)}]`;
+}
+var FLASH_CLASS = "weft-action-flash";
+var STYLE_ID = "weft-action-bridge-styles";
+function injectStyles(doc, timing) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.weft-ghost-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;transition:transform ${timing.cursorMoveMs}ms cubic-bezier(.22,1,.36,1),opacity .3s ease}
+.weft-ghost-cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
+.weft-ghost-cursor .weft-cursor-label{position:absolute;left:18px;top:18px;white-space:nowrap;background:rgba(30,30,40,.92);color:#fff;font:12px/1.6 system-ui,sans-serif;padding:2px 8px;border-radius:6px}
+.weft-ghost-cursor .weft-cursor-ripple{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(120,90,220,.8);opacity:0;transform:scale(.3)}
+.weft-ghost-cursor.weft-clicking .weft-cursor-ripple{animation:weft-cursor-ripple ${timing.rippleMs}ms ease-out}
+@keyframes weft-cursor-ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
+.${FLASH_CLASS}{animation:weft-action-flash ${timing.flashMs}ms ease-out}
+@keyframes weft-action-flash{0%{box-shadow:0 0 0 3px rgba(120,90,220,.65)}100%{box-shadow:0 0 0 3px rgba(120,90,220,0)}}
+`;
+  doc.head.appendChild(style);
+}
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function createActionBridge(options = {}) {
+  const doc = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  const cursorMode = options.cursor ?? "ghost";
+  const timing = { ...DEFAULT_TIMING, ...options.timing };
+  const labelPrefix = options.labelPrefix ?? "AI";
+  let queue = Promise.resolve();
+  let disposed = false;
+  let cursorEl = null;
+  let hideTimer;
+  const disconnects = [];
+  function ensureCursor() {
+    if (!doc || cursorMode !== "ghost") return null;
+    if (cursorEl) return cursorEl;
+    injectStyles(doc, timing);
+    cursorEl = doc.createElement("div");
+    cursorEl.className = "weft-ghost-cursor";
+    cursorEl.style.opacity = "0";
+    cursorEl.innerHTML = '<div class="weft-cursor-ripple"></div><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 2l16 8.5-7 1.8L9.4 19z" fill="#fff" stroke="#333" stroke-width="1.4"/></svg><span class="weft-cursor-label"></span>';
+    doc.body.appendChild(cursorEl);
+    return cursorEl;
+  }
+  async function replay(event) {
+    if (disposed || !doc) return;
+    const el = event.target ? doc.querySelector(weftActionSelector(event.target)) : null;
+    if (el && cursorMode !== "off") {
+      injectStyles(doc, timing);
+      const rect = el.getBoundingClientRect();
+      const cursor = ensureCursor();
+      if (cursor) {
+        const label = cursor.querySelector(".weft-cursor-label");
+        label.textContent = event.label ? `${labelPrefix} ${event.label}` : labelPrefix;
+        cursor.style.transform = `translate(${rect.left + rect.width / 2}px, ${rect.top + rect.height / 2}px)`;
+        cursor.style.opacity = "1";
+        await sleep(timing.cursorMoveMs + 70);
+        if (disposed) return;
+        cursor.classList.add("weft-clicking");
+      }
+      el.classList.add(FLASH_CLASS);
+      setTimeout(() => el.classList.remove(FLASH_CLASS), timing.flashMs + 50);
+      await sleep(timing.rippleMs);
+      cursor?.classList.remove("weft-clicking");
+    }
+    await options.onReplayed?.(event);
+    await sleep(timing.settleMs);
+    if (cursorEl) {
+      if (hideTimer) clearTimeout(hideTimer);
+      hideTimer = setTimeout(() => {
+        if (cursorEl) cursorEl.style.opacity = "0";
+      }, timing.cursorHideMs);
+    }
+  }
+  function accepts(event) {
+    if (event.actor !== "agent") return false;
+    if (options.session && event.session && event.session !== options.session) return false;
+    return true;
+  }
+  return {
+    dispatch(event) {
+      if (disposed || !accepts(event)) return;
+      queue = queue.then(() => replay(event)).catch(() => {
+      });
+    },
+    connect(source, connectOptions) {
+      const eventName = connectOptions?.eventName ?? "weft-action";
+      const map = connectOptions?.map ?? ((raw) => raw);
+      const listener = (e) => {
+        let raw;
+        try {
+          raw = JSON.parse(e.data);
+        } catch {
+          return;
+        }
+        const event = map(raw);
+        if (event) this.dispatch(event);
+      };
+      source.addEventListener(eventName, listener);
+      const disconnect = () => source.removeEventListener?.(eventName, listener);
+      disconnects.push(disconnect);
+      return disconnect;
+    },
+    flush() {
+      return queue;
+    },
+    dispose() {
+      disposed = true;
+      for (const disconnect of disconnects) disconnect();
+      if (hideTimer) clearTimeout(hideTimer);
+      cursorEl?.remove();
+      cursorEl = null;
+      doc?.getElementById(STYLE_ID)?.remove();
+    }
+  };
+}
+
+// ../packages/action-bridge/dist/react.js
+var import_react = require("react");
+var DEFAULT_TIMING2 = {
+  cursorMoveMs: 550,
+  rippleMs: 450,
+  flashMs: 900,
+  cursorHideMs: 2600,
+  settleMs: 180
+};
+function weftActionSelector2(target) {
+  return `[data-weft-action=${JSON.stringify(target)}]`;
+}
+var FLASH_CLASS2 = "weft-action-flash";
+var STYLE_ID2 = "weft-action-bridge-styles";
+function injectStyles2(doc, timing) {
+  if (doc.getElementById(STYLE_ID2)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = `
+.weft-ghost-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;transition:transform ${timing.cursorMoveMs}ms cubic-bezier(.22,1,.36,1),opacity .3s ease}
+.weft-ghost-cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
+.weft-ghost-cursor .weft-cursor-label{position:absolute;left:18px;top:18px;white-space:nowrap;background:rgba(30,30,40,.92);color:#fff;font:12px/1.6 system-ui,sans-serif;padding:2px 8px;border-radius:6px}
+.weft-ghost-cursor .weft-cursor-ripple{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(120,90,220,.8);opacity:0;transform:scale(.3)}
+.weft-ghost-cursor.weft-clicking .weft-cursor-ripple{animation:weft-cursor-ripple ${timing.rippleMs}ms ease-out}
+@keyframes weft-cursor-ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
+.${FLASH_CLASS2}{animation:weft-action-flash ${timing.flashMs}ms ease-out}
+@keyframes weft-action-flash{0%{box-shadow:0 0 0 3px rgba(120,90,220,.65)}100%{box-shadow:0 0 0 3px rgba(120,90,220,0)}}
+`;
+  doc.head.appendChild(style);
+}
+var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function createActionBridge2(options = {}) {
+  const doc = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  const cursorMode = options.cursor ?? "ghost";
+  const timing = { ...DEFAULT_TIMING2, ...options.timing };
+  const labelPrefix = options.labelPrefix ?? "AI";
+  let queue = Promise.resolve();
+  let disposed = false;
+  let cursorEl = null;
+  let hideTimer;
+  const disconnects = [];
+  function ensureCursor() {
+    if (!doc || cursorMode !== "ghost") return null;
+    if (cursorEl) return cursorEl;
+    injectStyles2(doc, timing);
+    cursorEl = doc.createElement("div");
+    cursorEl.className = "weft-ghost-cursor";
+    cursorEl.style.opacity = "0";
+    cursorEl.innerHTML = '<div class="weft-cursor-ripple"></div><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 2l16 8.5-7 1.8L9.4 19z" fill="#fff" stroke="#333" stroke-width="1.4"/></svg><span class="weft-cursor-label"></span>';
+    doc.body.appendChild(cursorEl);
+    return cursorEl;
+  }
+  async function replay(event) {
+    if (disposed || !doc) return;
+    const el = event.target ? doc.querySelector(weftActionSelector2(event.target)) : null;
+    if (el && cursorMode !== "off") {
+      injectStyles2(doc, timing);
+      const rect = el.getBoundingClientRect();
+      const cursor = ensureCursor();
+      if (cursor) {
+        const label = cursor.querySelector(".weft-cursor-label");
+        label.textContent = event.label ? `${labelPrefix} ${event.label}` : labelPrefix;
+        cursor.style.transform = `translate(${rect.left + rect.width / 2}px, ${rect.top + rect.height / 2}px)`;
+        cursor.style.opacity = "1";
+        await sleep2(timing.cursorMoveMs + 70);
+        if (disposed) return;
+        cursor.classList.add("weft-clicking");
+      }
+      el.classList.add(FLASH_CLASS2);
+      setTimeout(() => el.classList.remove(FLASH_CLASS2), timing.flashMs + 50);
+      await sleep2(timing.rippleMs);
+      cursor?.classList.remove("weft-clicking");
+    }
+    await options.onReplayed?.(event);
+    await sleep2(timing.settleMs);
+    if (cursorEl) {
+      if (hideTimer) clearTimeout(hideTimer);
+      hideTimer = setTimeout(() => {
+        if (cursorEl) cursorEl.style.opacity = "0";
+      }, timing.cursorHideMs);
+    }
+  }
+  function accepts(event) {
+    if (event.actor !== "agent") return false;
+    if (options.session && event.session && event.session !== options.session) return false;
+    return true;
+  }
+  return {
+    dispatch(event) {
+      if (disposed || !accepts(event)) return;
+      queue = queue.then(() => replay(event)).catch(() => {
+      });
+    },
+    connect(source, connectOptions) {
+      const eventName = connectOptions?.eventName ?? "weft-action";
+      const map = connectOptions?.map ?? ((raw) => raw);
+      const listener = (e) => {
+        let raw;
+        try {
+          raw = JSON.parse(e.data);
+        } catch {
+          return;
+        }
+        const event = map(raw);
+        if (event) this.dispatch(event);
+      };
+      source.addEventListener(eventName, listener);
+      const disconnect = () => source.removeEventListener?.(eventName, listener);
+      disconnects.push(disconnect);
+      return disconnect;
+    },
+    flush() {
+      return queue;
+    },
+    dispose() {
+      disposed = true;
+      for (const disconnect of disconnects) disconnect();
+      if (hideTimer) clearTimeout(hideTimer);
+      cursorEl?.remove();
+      cursorEl = null;
+      doc?.getElementById(STYLE_ID2)?.remove();
+    }
+  };
+}
+function useActionBridge(options = {}) {
+  const bridgeRef = (0, import_react.useRef)(null);
+  const optionsRef = (0, import_react.useRef)(options);
+  optionsRef.current = options;
+  if (!bridgeRef.current) {
+    bridgeRef.current = createActionBridge2({
+      ...options,
+      onReplayed: (event) => optionsRef.current.onReplayed?.(event)
+    });
+  }
+  (0, import_react.useEffect)(() => {
+    return () => {
+      bridgeRef.current?.dispose();
+      bridgeRef.current = null;
+    };
+  }, []);
+  return bridgeRef.current;
+}
+function ActionReplayLayer(props) {
+  const { source, eventName, map, ...bridgeOptions } = props;
+  const bridge = useActionBridge(bridgeOptions);
+  const mapRef = (0, import_react.useRef)(map);
+  mapRef.current = map;
+  (0, import_react.useEffect)(() => {
+    if (!source) return;
+    return bridge.connect(source, {
+      eventName,
+      map: mapRef.current ? (raw) => mapRef.current?.(raw) ?? null : void 0
+    });
+  }, [bridge, source, eventName]);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionReplayLayer,
+  DEFAULT_TIMING,
+  createActionBridge,
+  useActionBridge,
+  weftAction,
+  weftActionSelector
+});

package/dist/action-bridge.d.cts

@@ -0,0 +1,8 @@
+export { ActionReplayLayer, ActionReplayLayerProps, useActionBridge };
+import '@weft/ui';
+import '@weft/chat';
+import '@weft/ui/lib/en-fallback';
+import '@weft/react';
+import '@weft/runtime-core';
+import '@weft/timeline';
+import '@weft/provider-flitro';

package/dist/action-bridge.d.ts

@@ -0,0 +1,8 @@
+export { ActionReplayLayer, ActionReplayLayerProps, useActionBridge };
+import '@weft/ui';
+import '@weft/chat';
+import '@weft/ui/lib/en-fallback';
+import '@weft/react';
+import '@weft/runtime-core';
+import '@weft/timeline';
+import '@weft/provider-flitro';

package/dist/action-bridge.js

@@ -0,0 +1,291 @@
+// ../packages/action-bridge/dist/index.js
+var DEFAULT_TIMING = {
+  cursorMoveMs: 550,
+  rippleMs: 450,
+  flashMs: 900,
+  cursorHideMs: 2600,
+  settleMs: 180
+};
+function weftAction(action, id) {
+  return { "data-weft-action": id === void 0 ? action : `${action}:${id}` };
+}
+function weftActionSelector(target) {
+  return `[data-weft-action=${JSON.stringify(target)}]`;
+}
+var FLASH_CLASS = "weft-action-flash";
+var STYLE_ID = "weft-action-bridge-styles";
+function injectStyles(doc, timing) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.weft-ghost-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;transition:transform ${timing.cursorMoveMs}ms cubic-bezier(.22,1,.36,1),opacity .3s ease}
+.weft-ghost-cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
+.weft-ghost-cursor .weft-cursor-label{position:absolute;left:18px;top:18px;white-space:nowrap;background:rgba(30,30,40,.92);color:#fff;font:12px/1.6 system-ui,sans-serif;padding:2px 8px;border-radius:6px}
+.weft-ghost-cursor .weft-cursor-ripple{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(120,90,220,.8);opacity:0;transform:scale(.3)}
+.weft-ghost-cursor.weft-clicking .weft-cursor-ripple{animation:weft-cursor-ripple ${timing.rippleMs}ms ease-out}
+@keyframes weft-cursor-ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
+.${FLASH_CLASS}{animation:weft-action-flash ${timing.flashMs}ms ease-out}
+@keyframes weft-action-flash{0%{box-shadow:0 0 0 3px rgba(120,90,220,.65)}100%{box-shadow:0 0 0 3px rgba(120,90,220,0)}}
+`;
+  doc.head.appendChild(style);
+}
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function createActionBridge(options = {}) {
+  const doc = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  const cursorMode = options.cursor ?? "ghost";
+  const timing = { ...DEFAULT_TIMING, ...options.timing };
+  const labelPrefix = options.labelPrefix ?? "AI";
+  let queue = Promise.resolve();
+  let disposed = false;
+  let cursorEl = null;
+  let hideTimer;
+  const disconnects = [];
+  function ensureCursor() {
+    if (!doc || cursorMode !== "ghost") return null;
+    if (cursorEl) return cursorEl;
+    injectStyles(doc, timing);
+    cursorEl = doc.createElement("div");
+    cursorEl.className = "weft-ghost-cursor";
+    cursorEl.style.opacity = "0";
+    cursorEl.innerHTML = '<div class="weft-cursor-ripple"></div><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 2l16 8.5-7 1.8L9.4 19z" fill="#fff" stroke="#333" stroke-width="1.4"/></svg><span class="weft-cursor-label"></span>';
+    doc.body.appendChild(cursorEl);
+    return cursorEl;
+  }
+  async function replay(event) {
+    if (disposed || !doc) return;
+    const el = event.target ? doc.querySelector(weftActionSelector(event.target)) : null;
+    if (el && cursorMode !== "off") {
+      injectStyles(doc, timing);
+      const rect = el.getBoundingClientRect();
+      const cursor = ensureCursor();
+      if (cursor) {
+        const label = cursor.querySelector(".weft-cursor-label");
+        label.textContent = event.label ? `${labelPrefix} ${event.label}` : labelPrefix;
+        cursor.style.transform = `translate(${rect.left + rect.width / 2}px, ${rect.top + rect.height / 2}px)`;
+        cursor.style.opacity = "1";
+        await sleep(timing.cursorMoveMs + 70);
+        if (disposed) return;
+        cursor.classList.add("weft-clicking");
+      }
+      el.classList.add(FLASH_CLASS);
+      setTimeout(() => el.classList.remove(FLASH_CLASS), timing.flashMs + 50);
+      await sleep(timing.rippleMs);
+      cursor?.classList.remove("weft-clicking");
+    }
+    await options.onReplayed?.(event);
+    await sleep(timing.settleMs);
+    if (cursorEl) {
+      if (hideTimer) clearTimeout(hideTimer);
+      hideTimer = setTimeout(() => {
+        if (cursorEl) cursorEl.style.opacity = "0";
+      }, timing.cursorHideMs);
+    }
+  }
+  function accepts(event) {
+    if (event.actor !== "agent") return false;
+    if (options.session && event.session && event.session !== options.session) return false;
+    return true;
+  }
+  return {
+    dispatch(event) {
+      if (disposed || !accepts(event)) return;
+      queue = queue.then(() => replay(event)).catch(() => {
+      });
+    },
+    connect(source, connectOptions) {
+      const eventName = connectOptions?.eventName ?? "weft-action";
+      const map = connectOptions?.map ?? ((raw) => raw);
+      const listener = (e) => {
+        let raw;
+        try {
+          raw = JSON.parse(e.data);
+        } catch {
+          return;
+        }
+        const event = map(raw);
+        if (event) this.dispatch(event);
+      };
+      source.addEventListener(eventName, listener);
+      const disconnect = () => source.removeEventListener?.(eventName, listener);
+      disconnects.push(disconnect);
+      return disconnect;
+    },
+    flush() {
+      return queue;
+    },
+    dispose() {
+      disposed = true;
+      for (const disconnect of disconnects) disconnect();
+      if (hideTimer) clearTimeout(hideTimer);
+      cursorEl?.remove();
+      cursorEl = null;
+      doc?.getElementById(STYLE_ID)?.remove();
+    }
+  };
+}
+
+// ../packages/action-bridge/dist/react.js
+import { useEffect, useRef } from "react";
+var DEFAULT_TIMING2 = {
+  cursorMoveMs: 550,
+  rippleMs: 450,
+  flashMs: 900,
+  cursorHideMs: 2600,
+  settleMs: 180
+};
+function weftActionSelector2(target) {
+  return `[data-weft-action=${JSON.stringify(target)}]`;
+}
+var FLASH_CLASS2 = "weft-action-flash";
+var STYLE_ID2 = "weft-action-bridge-styles";
+function injectStyles2(doc, timing) {
+  if (doc.getElementById(STYLE_ID2)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = `
+.weft-ghost-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;transition:transform ${timing.cursorMoveMs}ms cubic-bezier(.22,1,.36,1),opacity .3s ease}
+.weft-ghost-cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
+.weft-ghost-cursor .weft-cursor-label{position:absolute;left:18px;top:18px;white-space:nowrap;background:rgba(30,30,40,.92);color:#fff;font:12px/1.6 system-ui,sans-serif;padding:2px 8px;border-radius:6px}
+.weft-ghost-cursor .weft-cursor-ripple{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(120,90,220,.8);opacity:0;transform:scale(.3)}
+.weft-ghost-cursor.weft-clicking .weft-cursor-ripple{animation:weft-cursor-ripple ${timing.rippleMs}ms ease-out}
+@keyframes weft-cursor-ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
+.${FLASH_CLASS2}{animation:weft-action-flash ${timing.flashMs}ms ease-out}
+@keyframes weft-action-flash{0%{box-shadow:0 0 0 3px rgba(120,90,220,.65)}100%{box-shadow:0 0 0 3px rgba(120,90,220,0)}}
+`;
+  doc.head.appendChild(style);
+}
+var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function createActionBridge2(options = {}) {
+  const doc = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  const cursorMode = options.cursor ?? "ghost";
+  const timing = { ...DEFAULT_TIMING2, ...options.timing };
+  const labelPrefix = options.labelPrefix ?? "AI";
+  let queue = Promise.resolve();
+  let disposed = false;
+  let cursorEl = null;
+  let hideTimer;
+  const disconnects = [];
+  function ensureCursor() {
+    if (!doc || cursorMode !== "ghost") return null;
+    if (cursorEl) return cursorEl;
+    injectStyles2(doc, timing);
+    cursorEl = doc.createElement("div");
+    cursorEl.className = "weft-ghost-cursor";
+    cursorEl.style.opacity = "0";
+    cursorEl.innerHTML = '<div class="weft-cursor-ripple"></div><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 2l16 8.5-7 1.8L9.4 19z" fill="#fff" stroke="#333" stroke-width="1.4"/></svg><span class="weft-cursor-label"></span>';
+    doc.body.appendChild(cursorEl);
+    return cursorEl;
+  }
+  async function replay(event) {
+    if (disposed || !doc) return;
+    const el = event.target ? doc.querySelector(weftActionSelector2(event.target)) : null;
+    if (el && cursorMode !== "off") {
+      injectStyles2(doc, timing);
+      const rect = el.getBoundingClientRect();
+      const cursor = ensureCursor();
+      if (cursor) {
+        const label = cursor.querySelector(".weft-cursor-label");
+        label.textContent = event.label ? `${labelPrefix} ${event.label}` : labelPrefix;
+        cursor.style.transform = `translate(${rect.left + rect.width / 2}px, ${rect.top + rect.height / 2}px)`;
+        cursor.style.opacity = "1";
+        await sleep2(timing.cursorMoveMs + 70);
+        if (disposed) return;
+        cursor.classList.add("weft-clicking");
+      }
+      el.classList.add(FLASH_CLASS2);
+      setTimeout(() => el.classList.remove(FLASH_CLASS2), timing.flashMs + 50);
+      await sleep2(timing.rippleMs);
+      cursor?.classList.remove("weft-clicking");
+    }
+    await options.onReplayed?.(event);
+    await sleep2(timing.settleMs);
+    if (cursorEl) {
+      if (hideTimer) clearTimeout(hideTimer);
+      hideTimer = setTimeout(() => {
+        if (cursorEl) cursorEl.style.opacity = "0";
+      }, timing.cursorHideMs);
+    }
+  }
+  function accepts(event) {
+    if (event.actor !== "agent") return false;
+    if (options.session && event.session && event.session !== options.session) return false;
+    return true;
+  }
+  return {
+    dispatch(event) {
+      if (disposed || !accepts(event)) return;
+      queue = queue.then(() => replay(event)).catch(() => {
+      });
+    },
+    connect(source, connectOptions) {
+      const eventName = connectOptions?.eventName ?? "weft-action";
+      const map = connectOptions?.map ?? ((raw) => raw);
+      const listener = (e) => {
+        let raw;
+        try {
+          raw = JSON.parse(e.data);
+        } catch {
+          return;
+        }
+        const event = map(raw);
+        if (event) this.dispatch(event);
+      };
+      source.addEventListener(eventName, listener);
+      const disconnect = () => source.removeEventListener?.(eventName, listener);
+      disconnects.push(disconnect);
+      return disconnect;
+    },
+    flush() {
+      return queue;
+    },
+    dispose() {
+      disposed = true;
+      for (const disconnect of disconnects) disconnect();
+      if (hideTimer) clearTimeout(hideTimer);
+      cursorEl?.remove();
+      cursorEl = null;
+      doc?.getElementById(STYLE_ID2)?.remove();
+    }
+  };
+}
+function useActionBridge(options = {}) {
+  const bridgeRef = useRef(null);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  if (!bridgeRef.current) {
+    bridgeRef.current = createActionBridge2({
+      ...options,
+      onReplayed: (event) => optionsRef.current.onReplayed?.(event)
+    });
+  }
+  useEffect(() => {
+    return () => {
+      bridgeRef.current?.dispose();
+      bridgeRef.current = null;
+    };
+  }, []);
+  return bridgeRef.current;
+}
+function ActionReplayLayer(props) {
+  const { source, eventName, map, ...bridgeOptions } = props;
+  const bridge = useActionBridge(bridgeOptions);
+  const mapRef = useRef(map);
+  mapRef.current = map;
+  useEffect(() => {
+    if (!source) return;
+    return bridge.connect(source, {
+      eventName,
+      map: mapRef.current ? (raw) => mapRef.current?.(raw) ?? null : void 0
+    });
+  }, [bridge, source, eventName]);
+  return null;
+}
+export {
+  ActionReplayLayer,
+  DEFAULT_TIMING,
+  createActionBridge,
+  useActionBridge,
+  weftAction,
+  weftActionSelector
+};