@agent-native/toolkit 0.16.9 → 0.16.11

package/src/editor/RegistryBlockNode.tsx

@@ -80,6 +80,55 @@ function clickedInteractiveChild(target: HTMLElement) {
   return !!blockNode && !!editable && blockNode.contains(editable);
 }
 
+export function selectRegistryBlockNode({
+  editable,
+  allowInteractiveChild,
+  target,
+  getPos,
+  view,
+  preventDefault,
+  stopPropagation,
+}: {
+  editable: boolean;
+  allowInteractiveChild: boolean;
+  target: EventTarget | null;
+  getPos: (() => number | undefined) | boolean;
+  view: NodeViewProps["editor"]["view"];
+  preventDefault: () => void;
+  stopPropagation: () => void;
+}): boolean {
+  if (!editable) return false;
+  if (
+    !allowInteractiveChild &&
+    target instanceof HTMLElement &&
+    clickedInteractiveChild(target)
+  )
+    return false;
+  if (
+    allowInteractiveChild &&
+    target instanceof HTMLElement &&
+    target.closest("pre")
+  )
+    return false;
+  const pos = typeof getPos === "function" ? getPos() : null;
+  if (typeof pos !== "number") return false;
+  try {
+    preventDefault();
+    stopPropagation();
+    view.dispatch(
+      view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)),
+    );
+    view.focus();
+    return true;
+  } catch (error) {
+    // A node can disappear between the mousedown and selection dispatch during
+    // reconciliation. Keep that expected stale-position race recoverable, but
+    // do not hide unrelated editor failures.
+    if (error instanceof RangeError) return false;
+    throw error;
+  }
+}
+
 /* -------------------------------------------------------------------------- */
 /* B. RegistryBlockNodeView (React)                                           */
 /* -------------------------------------------------------------------------- */
@@ -139,6 +188,21 @@ export function RegistryBlockNodeView(props: NodeViewProps) {
     (sideMap?.notionSync ?? false) &&
     (sideMap?.isNotionIncompatibleType?.(blockType) ?? false);
 
+  const selectNode = (
+    event: ReactMouseEvent<HTMLElement>,
+    allowInteractiveChild = false,
+  ) => {
+    selectRegistryBlockNode({
+      editable,
+      allowInteractiveChild,
+      target: event.target,
+      getPos: props.getPos,
+      view: props.editor.view,
+      preventDefault: () => event.preventDefault(),
+      stopPropagation: () => event.stopPropagation(),
+    });
+  };
+
   // The block data isn't in the side-map yet (e.g. a freshly inserted node whose
   // store entry hasn't been seeded). Render a graceful placeholder.
   if (!block) {
@@ -155,25 +219,23 @@ export function RegistryBlockNodeView(props: NodeViewProps) {
     );
   }
 
-  const selectNode = (event: ReactMouseEvent<HTMLElement>) => {
-    if (!editable) return;
-    const target = event.target;
-    if (target instanceof HTMLElement && clickedInteractiveChild(target))
-      return;
-    const pos = typeof props.getPos === "function" ? props.getPos() : null;
-    if (typeof pos !== "number") return;
-    try {
-      event.preventDefault();
-      event.stopPropagation();
-      const { view } = props.editor;
-      view.dispatch(
-        view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)),
-      );
-      view.focus();
-    } catch {
-      // Ignore stale positions during React/ProseMirror reconciliation.
-    }
-  };
+  if (block.loadError) {
+    return (
+      <NodeViewWrapper
+        className="plan-block-node"
+        data-block-id={blockId}
+        onMouseDownCapture={(event: ReactMouseEvent<HTMLElement>) =>
+          selectNode(event, true)
+        }
+      >
+        <RegistryBlockLoadErrorView
+          message={block.loadError.message}
+          rawSource={block.loadError.rawSource}
+        />
+      </NodeViewWrapper>
+    );
+  }
+
   const updateShellHover = (event: ReactMouseEvent<HTMLElement>) => {
     const target = event.target;
     setShellHovered(
@@ -277,6 +339,31 @@ export function RegistryBlockNodeView(props: NodeViewProps) {
   );
 }
 
+export function RegistryBlockLoadErrorView({
+  message,
+  rawSource,
+}: {
+  message: string;
+  rawSource?: string;
+}) {
+  return (
+    <div
+      contentEditable={false}
+      data-plan-interactive
+      className="plan-block-node__load-error space-y-2 rounded-md border border-border px-3 py-2 text-sm"
+    >
+      {rawSource ? (
+        <pre className="overflow-auto whitespace-pre-wrap font-mono text-xs text-foreground">
+          {rawSource}
+        </pre>
+      ) : null}
+      <p role="alert" className="text-muted-foreground">
+        {message}
+      </p>
+    </div>
+  );
+}
+
 export function LegacyJsonEditSurface({
   block,
   blockType,

package/src/editor/useCollabReconcile.concurrent.spec.ts

@@ -746,6 +746,81 @@ describe("useCollabReconcile — concurrent edit / lost-update guards", () => {
     expect(getEditorMarkdown(captured.editor!)).toBe("# Doc updated by agent");
   });
 
+  it("persists a non-lead client's own local edit to a nonempty shared document", async () => {
+    // Losing the lead election only bars this client from SEEDING. Its own
+    // typing still has to reach the app's persist path, or the text lives in
+    // the CRDT alone and the next lead mount overwrites it with the SQL body.
+    const persistedYdoc = new Y.Doc();
+    const persistedEditor = new CoreEditor({
+      extensions: createRichMarkdownExtensions({
+        dialect: "gfm",
+        ydoc: persistedYdoc,
+      }),
+    });
+    persistedEditor.commands.setContent("shared body");
+    const liveYdoc = new Y.Doc();
+    Y.applyUpdate(liveYdoc, Y.encodeStateAsUpdate(persistedYdoc), "remote");
+    persistedEditor.destroy();
+    persistedYdoc.destroy();
+
+    liveYdoc.clientID = 500;
+    const awareness = new Awareness(liveYdoc);
+    awareness
+      .getStates()
+      .set(1, { user: { name: "Lead peer" }, visible: true });
+
+    const emitted: string[] = [];
+    let capturedEditor: Editor | null = null;
+
+    function Probe() {
+      const guardsRef = React.useRef<ReturnType<
+        typeof useCollabReconcile
+      > | null>(null);
+      const editor = useEditor({
+        extensions: createRichMarkdownExtensions({
+          dialect: "gfm",
+          ydoc: liveYdoc,
+        }),
+        onUpdate: ({ editor, transaction }) => {
+          const guards = guardsRef.current;
+          if (!guards || guards.shouldIgnoreUpdate(transaction)) return;
+          const markdown = getEditorMarkdown(editor);
+          if (!guards.registerEmitted(markdown)) return;
+          emitted.push(markdown);
+        },
+      });
+      capturedEditor = editor;
+      guardsRef.current = useCollabReconcile({
+        editor,
+        ydoc: liveYdoc,
+        awareness,
+        collabSynced: true,
+        value: "shared body",
+        contentUpdatedAt: "2024-01-01T00:00:01.000Z",
+        editable: true,
+      });
+      return React.createElement("div", null);
+    }
+
+    act(() => root.render(React.createElement(Probe)));
+    await flush();
+
+    act(() => {
+      capturedEditor!.view.dispatch(
+        capturedEditor!.state.tr
+          .insertText(
+            " plus my edit",
+            capturedEditor!.state.doc.content.size - 1,
+          )
+          .setMeta("uiEvent", "input"),
+      );
+    });
+
+    expect(emitted.at(-1)).toContain("plus my edit");
+    awareness.destroy();
+    liveYdoc.destroy();
+  });
+
   it("does not reapply a partial save echo while an external editor control owns focus", async () => {
     const { captured, Harness } = makeHarness();
 

package/src/editor/useCollabReconcile.ts

@@ -298,7 +298,15 @@ export function useCollabReconcile({
       awareness.getStates().forEach((state, clientId) => {
         if (clientId === ydoc.clientID) return; // self
         if (clientId === AGENT_CLIENT_ID) return; // agent isn't a Yjs editor
-        const s = state as { user?: unknown; visible?: boolean };
+        const s = state as {
+          user?: unknown;
+          visible?: boolean;
+          canFlushDocument?: boolean;
+        };
+        // A read-only viewer binds no Y.Doc, so counting it as a peer lets
+        // stale CRDT content stand in for live collaboration and be written
+        // back over canonical SQL — resurrecting deleted content.
+        if (s?.canFlushDocument === false) return;
         if (s && s.user && s.visible !== false) peers += 1;
       });
       peerCountRef.current = peers;
@@ -362,7 +370,16 @@ export function useCollabReconcile({
         emptySnapshotDecisionPendingRef.current = false;
       };
     }
-    if (!isLeadClient) return;
+    // A non-lead client must never seed (two clients inserting the same content
+    // duplicates it), but `seededRef` also gates persistence and reconcile — so
+    // release it here anyway, or this client's own typing is dropped before it
+    // ever reaches SQL while its peers still see it through Yjs.
+    if (!isLeadClient) {
+      const releaseTimer = setTimeout(() => {
+        seededRef.current = true;
+      }, 0);
+      return () => clearTimeout(releaseTimer);
+    }
     let cancelled = false;
     // Defer via a timer task (NOT a microtask — microtasks can still run
     // inside React's commit and trigger flushSync-from-lifecycle warnings).

package/src/ui/index.ts

@@ -27,6 +27,7 @@ export * from "./logo.js";
 export * from "./menubar.js";
 export * from "./navigation-menu.js";
 export * from "./pagination.js";
+export * from "./pointer-lock.js";
 export * from "./popover.js";
 export * from "./progress.js";
 export * from "./radio-group.js";

package/src/ui/pointer-lock.ts

@@ -0,0 +1,21 @@
+// Radix's DismissableLayer (used by Dialog, Sheet, AlertDialog, Select, ...)
+// tracks every mounted layer that disables outside pointer events in one
+// shared, module-level registry: the first layer to mount saves
+// `document.body.style.pointerEvents` and sets it to "none", and the last
+// layer to unregister restores it. When a nested layer (e.g. a Select inside
+// a Sheet) is still unwinding its own close animation at the moment an outer
+// layer closes, the registry can end up with nothing left to trigger that
+// restore, and `pointerEvents` sticks at "none" — freezing the whole page
+// until reload. Defer any state change that opens a follow-up layer (another
+// dialog) or runs a mutation gated on the previous layer being fully closed
+// until pointer events are confirmed unlocked.
+export function afterBodyPointerUnlock(callback: () => void) {
+  const run = () => {
+    if (document.body.style.pointerEvents === "none") {
+      window.requestAnimationFrame(run);
+      return;
+    }
+    callback();
+  };
+  window.requestAnimationFrame(run);
+}

package/src/ui/tooltip.tsx

@@ -36,7 +36,7 @@ const TooltipContent = React.forwardRef<
         sideOffset={sideOffset}
         data-agent-native-tooltip="true"
         className={cn(
-          "z-[300] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md origin-[var(--radix-tooltip-content-transform-origin)] data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=delayed-open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=delayed-open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:duration-150 data-[state=closed]:duration-100 motion-reduce:data-[state=delayed-open]:zoom-in-100 motion-reduce:data-[state=closed]:zoom-out-100",
+          "z-[500] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md origin-[var(--radix-tooltip-content-transform-origin)] data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=delayed-open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=delayed-open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:duration-150 data-[state=closed]:duration-100 motion-reduce:data-[state=delayed-open]:zoom-in-100 motion-reduce:data-[state=closed]:zoom-out-100",
           className,
         )}
         {...props}