@percena/weft 0.4.0-next.3 → 0.4.0-next.5

package/dist/action-bridge.cjs

@@ -15,21 +15,187 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/action-bridge.ts
 var action_bridge_exports = {};
 __export(action_bridge_exports, {
-  ActionReplayLayer: () => import_react.ActionReplayLayer,
-  useActionBridge: () => import_react.useActionBridge
+  ActionReplayLayer: () => ActionReplayLayer,
+  DEFAULT_TIMING: () => DEFAULT_TIMING,
+  createActionBridge: () => createActionBridge,
+  useActionBridge: () => useActionBridge,
+  weftAction: () => weftAction,
+  weftActionSelector: () => weftActionSelector
 });
 module.exports = __toCommonJS(action_bridge_exports);
-__reExport(action_bridge_exports, require("@percena/weft-action-bridge"), module.exports);
-var import_react = require("@percena/weft-action-bridge/react");
+
+// ../packages/action-bridge/src/index.ts
+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/src/react.tsx
+var import_react = require("react");
+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 = createActionBridge({
+      ...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,
-  ...require("@percena/weft-action-bridge")
+  weftAction,
+  weftActionSelector
 });

package/dist/action-bridge.d.cts

@@ -1,13 +1,112 @@
-export * from '@percena/weft-action-bridge';
-export { ActionReplayLayer, ActionReplayLayerProps, useActionBridge } from '@percena/weft-action-bridge/react';
-import '@weft/ui';
-import '@weft/local-chat';
-import '@weft/ui/lib/en-fallback';
-import '@percena/weft-react';
-import '@weft/core';
-import '@weft/timeline';
-import '@weft/runtime-core';
-import '@weft/policy';
-import '@weft/provider-flitro';
-import '@weft/local-runtime/browser';
-import '@weft/skills/browser';
+/**
+ * @percena/weft-action-bridge — productized action replay.
+ *
+ * Hosts annotate clickable elements with `data-weft-action` (via
+ * `weftAction(...)`), push standard action descriptors (usually derived from
+ * their own business event stream, with `actor` taken from the
+ * `X-Weft-Actor` header Flitro stamps on agent tool calls), and the bridge
+ * replays each agent action on the live page: a ghost cursor moves to the
+ * element, clicks (ripple), the element flashes, then `onReplayed` fires so
+ * the host can refresh its data. Elements that are not on screen degrade
+ * gracefully: the animation is skipped but `onReplayed` still fires.
+ *
+ * Framework-agnostic and dependency-free; React glue lives in
+ * `@percena/weft-action-bridge/react`.
+ */
+/** Standard action descriptor (optimization plan §6.1). */
+interface WeftActionEvent {
+    /** `agent` events are replayed; anything else is passed through. */
+    actor: string;
+    /** Business semantic, host-defined (e.g. `cart.item_added`). */
+    action?: string;
+    /** Matches `data-weft-action` on the page (e.g. `add-to-cart:p1`). */
+    target?: string | null;
+    /** Cursor bubble copy (e.g. `加入购物车：机械键盘`). */
+    label?: string;
+    /** Scopes replay to one panel/session when several are mounted. */
+    session?: string;
+}
+type CursorMode = 'ghost' | 'highlight' | 'off';
+/** Replay choreography (defaults match the reference shop demo). */
+interface ActionBridgeTiming {
+    cursorMoveMs: number;
+    rippleMs: number;
+    flashMs: number;
+    cursorHideMs: number;
+    /** Pause after `onReplayed` before the next queued event. */
+    settleMs: number;
+}
+declare const DEFAULT_TIMING: ActionBridgeTiming;
+interface EventSourceLike {
+    addEventListener(type: string, listener: (event: {
+        data: string;
+    }) => void): void;
+    removeEventListener?(type: string, listener: (event: {
+        data: string;
+    }) => void): void;
+}
+interface ActionBridgeOptions {
+    /** `ghost` (cursor + ripple + flash), `highlight` (flash only), `off`. */
+    cursor?: CursorMode;
+    /** Only replay events whose `session` matches (when both are set). */
+    session?: string;
+    /** Called after each agent event (replayed or degraded) settles. */
+    onReplayed?: (event: WeftActionEvent) => void | Promise<void>;
+    timing?: Partial<ActionBridgeTiming>;
+    /** Cursor bubble prefix (default `AI`). */
+    labelPrefix?: string;
+    document?: Document;
+}
+interface ConnectOptions<TRaw = unknown> {
+    /** SSE event name to listen for (default `weft-action`). */
+    eventName?: string;
+    /**
+     * Translate the host's raw event payload into a descriptor. Return null to
+     * ignore the event. Defaults to treating the payload as a descriptor.
+     */
+    map?: (raw: TRaw) => WeftActionEvent | null;
+}
+interface ActionBridge {
+    /** Queue one descriptor for replay (agent events only). */
+    dispatch(event: WeftActionEvent): void;
+    /** Subscribe to an EventSource/WebSocket-like emitter of descriptors. */
+    connect<TRaw = unknown>(source: EventSourceLike, options?: ConnectOptions<TRaw>): () => void;
+    /** Wait until everything queued so far has been replayed. */
+    flush(): Promise<void>;
+    dispose(): void;
+}
+/** Build the `data-weft-action` attribute: `weftAction('add-to-cart', 'p1')`. */
+declare function weftAction(action: string, id?: string | number): {
+    'data-weft-action': string;
+};
+/** Selector for a descriptor target. */
+declare function weftActionSelector(target: string): string;
+declare function createActionBridge(options?: ActionBridgeOptions): ActionBridge;
+
+/**
+ * @percena/weft-action-bridge/react — React glue for the action bridge.
+ *
+ * ```tsx
+ * <button {...weftAction('add-to-cart', product.id)}>加入购物车</button>
+ * <ActionReplayLayer source={eventSource} eventName="shop.event"
+ *   map={toWeftActionEvent} onReplayed={refresh} />
+ * ```
+ */
+
+interface ActionReplayLayerProps<TRaw = unknown> extends Omit<ActionBridgeOptions, 'document'> {
+    /** Event emitter carrying action descriptors (EventSource, WebSocket, …). */
+    source?: EventSourceLike;
+    /** SSE event name on `source` (default `weft-action`). */
+    eventName?: string;
+    /** Translate raw payloads into descriptors; return null to ignore. */
+    map?: ConnectOptions<TRaw>['map'];
+}
+/** Hook variant: returns the bridge so the host can `dispatch` directly. */
+declare function useActionBridge(options?: Omit<ActionBridgeOptions, 'document'>): ActionBridge;
+/**
+ * Mounts an action bridge for the lifetime of the component and subscribes it
+ * to `source`. Renders nothing — the ghost cursor manages its own DOM.
+ */
+declare function ActionReplayLayer<TRaw = unknown>(props: ActionReplayLayerProps<TRaw>): null;
+
+export { type ActionBridge, type ActionBridgeOptions, type ActionBridgeTiming, ActionReplayLayer, type ActionReplayLayerProps, type ConnectOptions, type CursorMode, DEFAULT_TIMING, type EventSourceLike, type WeftActionEvent, createActionBridge, useActionBridge, weftAction, weftActionSelector };

package/dist/action-bridge.d.ts

@@ -1,13 +1,112 @@
-export * from '@percena/weft-action-bridge';
-export { ActionReplayLayer, ActionReplayLayerProps, useActionBridge } from '@percena/weft-action-bridge/react';
-import '@weft/ui';
-import '@weft/local-chat';
-import '@weft/ui/lib/en-fallback';
-import '@percena/weft-react';
-import '@weft/core';
-import '@weft/timeline';
-import '@weft/runtime-core';
-import '@weft/policy';
-import '@weft/provider-flitro';
-import '@weft/local-runtime/browser';
-import '@weft/skills/browser';
+/**
+ * @percena/weft-action-bridge — productized action replay.
+ *
+ * Hosts annotate clickable elements with `data-weft-action` (via
+ * `weftAction(...)`), push standard action descriptors (usually derived from
+ * their own business event stream, with `actor` taken from the
+ * `X-Weft-Actor` header Flitro stamps on agent tool calls), and the bridge
+ * replays each agent action on the live page: a ghost cursor moves to the
+ * element, clicks (ripple), the element flashes, then `onReplayed` fires so
+ * the host can refresh its data. Elements that are not on screen degrade
+ * gracefully: the animation is skipped but `onReplayed` still fires.
+ *
+ * Framework-agnostic and dependency-free; React glue lives in
+ * `@percena/weft-action-bridge/react`.
+ */
+/** Standard action descriptor (optimization plan §6.1). */
+interface WeftActionEvent {
+    /** `agent` events are replayed; anything else is passed through. */
+    actor: string;
+    /** Business semantic, host-defined (e.g. `cart.item_added`). */
+    action?: string;
+    /** Matches `data-weft-action` on the page (e.g. `add-to-cart:p1`). */
+    target?: string | null;
+    /** Cursor bubble copy (e.g. `加入购物车：机械键盘`). */
+    label?: string;
+    /** Scopes replay to one panel/session when several are mounted. */
+    session?: string;
+}
+type CursorMode = 'ghost' | 'highlight' | 'off';
+/** Replay choreography (defaults match the reference shop demo). */
+interface ActionBridgeTiming {
+    cursorMoveMs: number;
+    rippleMs: number;
+    flashMs: number;
+    cursorHideMs: number;
+    /** Pause after `onReplayed` before the next queued event. */
+    settleMs: number;
+}
+declare const DEFAULT_TIMING: ActionBridgeTiming;
+interface EventSourceLike {
+    addEventListener(type: string, listener: (event: {
+        data: string;
+    }) => void): void;
+    removeEventListener?(type: string, listener: (event: {
+        data: string;
+    }) => void): void;
+}
+interface ActionBridgeOptions {
+    /** `ghost` (cursor + ripple + flash), `highlight` (flash only), `off`. */
+    cursor?: CursorMode;
+    /** Only replay events whose `session` matches (when both are set). */
+    session?: string;
+    /** Called after each agent event (replayed or degraded) settles. */
+    onReplayed?: (event: WeftActionEvent) => void | Promise<void>;
+    timing?: Partial<ActionBridgeTiming>;
+    /** Cursor bubble prefix (default `AI`). */
+    labelPrefix?: string;
+    document?: Document;
+}
+interface ConnectOptions<TRaw = unknown> {
+    /** SSE event name to listen for (default `weft-action`). */
+    eventName?: string;
+    /**
+     * Translate the host's raw event payload into a descriptor. Return null to
+     * ignore the event. Defaults to treating the payload as a descriptor.
+     */
+    map?: (raw: TRaw) => WeftActionEvent | null;
+}
+interface ActionBridge {
+    /** Queue one descriptor for replay (agent events only). */
+    dispatch(event: WeftActionEvent): void;
+    /** Subscribe to an EventSource/WebSocket-like emitter of descriptors. */
+    connect<TRaw = unknown>(source: EventSourceLike, options?: ConnectOptions<TRaw>): () => void;
+    /** Wait until everything queued so far has been replayed. */
+    flush(): Promise<void>;
+    dispose(): void;
+}
+/** Build the `data-weft-action` attribute: `weftAction('add-to-cart', 'p1')`. */
+declare function weftAction(action: string, id?: string | number): {
+    'data-weft-action': string;
+};
+/** Selector for a descriptor target. */
+declare function weftActionSelector(target: string): string;
+declare function createActionBridge(options?: ActionBridgeOptions): ActionBridge;
+
+/**
+ * @percena/weft-action-bridge/react — React glue for the action bridge.
+ *
+ * ```tsx
+ * <button {...weftAction('add-to-cart', product.id)}>加入购物车</button>
+ * <ActionReplayLayer source={eventSource} eventName="shop.event"
+ *   map={toWeftActionEvent} onReplayed={refresh} />
+ * ```
+ */
+
+interface ActionReplayLayerProps<TRaw = unknown> extends Omit<ActionBridgeOptions, 'document'> {
+    /** Event emitter carrying action descriptors (EventSource, WebSocket, …). */
+    source?: EventSourceLike;
+    /** SSE event name on `source` (default `weft-action`). */
+    eventName?: string;
+    /** Translate raw payloads into descriptors; return null to ignore. */
+    map?: ConnectOptions<TRaw>['map'];
+}
+/** Hook variant: returns the bridge so the host can `dispatch` directly. */
+declare function useActionBridge(options?: Omit<ActionBridgeOptions, 'document'>): ActionBridge;
+/**
+ * Mounts an action bridge for the lifetime of the component and subscribes it
+ * to `source`. Renders nothing — the ghost cursor manages its own DOM.
+ */
+declare function ActionReplayLayer<TRaw = unknown>(props: ActionReplayLayerProps<TRaw>): null;
+
+export { type ActionBridge, type ActionBridgeOptions, type ActionBridgeTiming, ActionReplayLayer, type ActionReplayLayerProps, type ConnectOptions, type CursorMode, DEFAULT_TIMING, type EventSourceLike, type WeftActionEvent, createActionBridge, useActionBridge, weftAction, weftActionSelector };

package/dist/action-bridge.js

@@ -1,7 +1,169 @@
-// src/action-bridge.ts
-export * from "@percena/weft-action-bridge";
-import { ActionReplayLayer, useActionBridge } from "@percena/weft-action-bridge/react";
+// ../packages/action-bridge/src/index.ts
+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/src/react.tsx
+import { useEffect, useRef } from "react";
+function useActionBridge(options = {}) {
+  const bridgeRef = useRef(null);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  if (!bridgeRef.current) {
+    bridgeRef.current = createActionBridge({
+      ...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,
-  useActionBridge
+  DEFAULT_TIMING,
+  createActionBridge,
+  useActionBridge,
+  weftAction,
+  weftActionSelector
 };