@agent-native/toolkit 0.10.9 → 0.10.11

package/src/composer/TiptapComposer.tsx

@@ -948,6 +948,50 @@ function latestModelsOnly(models: string[]): string[] {
   });
 }
 
+/**
+ * Coarse relative cost per model, rendered as a quiet `$`…`$$$` suffix.
+ *
+ * Tokens and their order mirror `MODEL_COST_ORDER` in `@agent-native/core`'s
+ * chat-model-groups, which sorts these same rows — the toolkit cannot import
+ * from core, so a new model family has to be added in both places. Tiers are
+ * each provider's own entry/mid/flagship ladder, not a cross-provider price
+ * claim; anything unlisted has no tier rather than a guessed one.
+ */
+const MODEL_COST_TIERS: ReadonlyArray<readonly [string, 1 | 2 | 3]> = [
+  ["luna", 1],
+  ["terra", 2],
+  ["sol", 3],
+  ["haiku", 1],
+  ["sonnet", 2],
+  ["opus", 3],
+  ["fable", 3],
+  ["flash", 1],
+  ["pro", 3],
+];
+
+const COST_TIER_LABELS = { 1: "Lower", 2: "Medium", 3: "Higher" } as const;
+
+export function composerModelCostTier(model: string): 1 | 2 | 3 | undefined {
+  const normalized = model.toLowerCase();
+  return MODEL_COST_TIERS.find(([token]) => normalized.includes(token))?.[1];
+}
+
+function ModelCostTier({ model }: { model: string }) {
+  const tier = composerModelCostTier(model);
+  if (!tier) return null;
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className="shrink-0 text-[11px] tabular-nums text-muted-foreground/60"
+      >
+        {"$".repeat(tier)}
+      </span>
+      <span className="sr-only">{COST_TIER_LABELS[tier]} cost</span>
+    </>
+  );
+}
+
 /**
  * Optional secondary model menu for apps that drive a separate generation model
  * alongside the chat LLM (e.g. the Assets app's image-generation model). When
@@ -1357,6 +1401,7 @@ function ModelSelector({
                       <span className="flex-1 min-w-0 text-[13px] text-foreground truncate">
                         {friendlyModelName(m)}
                       </span>
+                      <ModelCostTier model={m} />
                       {m === model && group.configured && (
                         <IconCheck className="h-3.5 w-3.5 shrink-0 text-blue-500" />
                       )}

package/src/editor/DragHandle.spec.ts

@@ -4,7 +4,24 @@ import { Editor } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { DragHandle, type DragHandleOptions } from "./DragHandle.js";
+import {
+  DragHandle,
+  dragPreviewTransform,
+  type DragHandleOptions,
+} from "./DragHandle.js";
+
+describe("dragPreviewTransform", () => {
+  it("keeps the grabbed point under the pointer", () => {
+    expect(
+      dragPreviewTransform({
+        clientX: 180,
+        clientY: 240,
+        pointerOffsetX: 32,
+        pointerOffsetY: 9,
+      }),
+    ).toBe("translate3d(148px, 231px, 0)");
+  });
+});
 
 function makeRect({
   left,
@@ -146,6 +163,21 @@ function childText(editor: Editor, index: number): string {
   return editor.state.doc.child(index).textContent;
 }
 
+function focusEditorWithNativeSelection(editor: Editor): void {
+  editor.view.dom.focus();
+  editor.commands.setTextSelection({ from: 1, to: 3 });
+  const textNode = editor.view.dom.querySelector("p")?.firstChild;
+  if (!(textNode instanceof Text)) {
+    throw new Error("Expected a paragraph text node");
+  }
+  const range = document.createRange();
+  range.setStart(textNode, 0);
+  range.setEnd(textNode, Math.min(2, textNode.length));
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
 afterEach(() => {
   document.body.innerHTML = "";
   document
@@ -160,11 +192,13 @@ describe("DragHandle menu", () => {
     try {
       clickHandle(handle);
 
-      expect(getMenuItems().map((item) => item.textContent)).toEqual([
+      const items = getMenuItems();
+      expect(items.map((item) => item.textContent)).toEqual([
         "Duplicate",
         "Delete",
         "Insert block below",
       ]);
+      expect(document.activeElement).toBe(items[0]);
     } finally {
       editor.destroy();
     }
@@ -222,6 +256,9 @@ describe("DragHandle menu", () => {
     const { editor, handle } = mountEditor("<p>First</p><p>Second</p>");
 
     try {
+      focusEditorWithNativeSelection(editor);
+      expect(document.activeElement).toBe(editor.view.dom);
+      expect(window.getSelection()?.toString()).toBe("Fi");
       handle.dispatchEvent(
         new MouseEvent("mousedown", {
           bubbles: true,
@@ -250,6 +287,63 @@ describe("DragHandle menu", () => {
       expect(editor.state.doc.childCount).toBe(2);
       expect(childText(editor, 0)).toBe("Second");
       expect(childText(editor, 1)).toBe("First");
+      expect(editor.state.selection.empty).toBe(true);
+      expect(editor.isFocused).toBe(false);
+      expect(window.getSelection()?.toString()).toBe("");
+
+      expect(editor.commands.undo()).toBe(true);
+      expect(childText(editor, 0)).toBe("First");
+      expect(childText(editor, 1)).toBe("Second");
+    } finally {
+      editor.destroy();
+    }
+  });
+
+  it("preserves native selections outside the editor after a drop", () => {
+    const outside = document.createElement("p");
+    outside.textContent = "Keep this selection";
+    document.body.append(outside);
+    const { editor, handle } = mountEditor("<p>First</p><p>Second</p>");
+
+    try {
+      const textNode = outside.firstChild;
+      if (!(textNode instanceof Text)) {
+        throw new Error("Expected outside text");
+      }
+      const range = document.createRange();
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, 4);
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+
+      handle.dispatchEvent(
+        new MouseEvent("mousedown", {
+          bubbles: true,
+          button: 0,
+          clientX: 12,
+          clientY: 12,
+        }),
+      );
+      document.dispatchEvent(
+        new MouseEvent("mousemove", {
+          bubbles: true,
+          clientX: 12,
+          clientY: 56,
+        }),
+      );
+      document.dispatchEvent(
+        new MouseEvent("mouseup", {
+          bubbles: true,
+          button: 0,
+          clientX: 12,
+          clientY: 56,
+        }),
+      );
+
+      expect(childText(editor, 0)).toBe("Second");
+      expect(childText(editor, 1)).toBe("First");
+      expect(window.getSelection()?.toString()).toBe("Keep");
     } finally {
       editor.destroy();
     }
@@ -271,6 +365,7 @@ describe("DragHandle menu", () => {
     );
 
     try {
+      focusEditorWithNativeSelection(source.editor);
       hoverAt(32, 12);
       source.handle.dispatchEvent(
         new MouseEvent("mousedown", {
@@ -315,6 +410,11 @@ describe("DragHandle menu", () => {
       expect(childText(target.editor, 0)).toBe("Move me");
       expect(childText(target.editor, 1)).toBe("Target first");
       expect(childText(target.editor, 2)).toBe("Target second");
+      expect(source.editor.state.selection.empty).toBe(true);
+      expect(target.editor.state.selection.empty).toBe(true);
+      expect(source.editor.isFocused).toBe(false);
+      expect(target.editor.isFocused).toBe(false);
+      expect(window.getSelection()?.toString()).toBe("");
     } finally {
       source.editor.destroy();
       target.editor.destroy();
@@ -337,6 +437,7 @@ describe("DragHandle menu", () => {
     );
 
     try {
+      focusEditorWithNativeSelection(source.editor);
       hoverAt(32, 12);
       source.handle.dispatchEvent(
         new MouseEvent("mousedown", {
@@ -381,6 +482,11 @@ describe("DragHandle menu", () => {
       expect(target.editor.state.doc.childCount).toBe(2);
       expect(childText(target.editor, 0)).toBe("Target first");
       expect(childText(target.editor, 1)).toBe("Target second");
+      expect(source.editor.state.selection.empty).toBe(true);
+      expect(target.editor.state.selection.empty).toBe(true);
+      expect(source.editor.isFocused).toBe(false);
+      expect(target.editor.isFocused).toBe(false);
+      expect(window.getSelection()?.toString()).toBe("");
     } finally {
       source.editor.destroy();
       target.editor.destroy();

package/src/editor/DragHandle.ts

@@ -148,6 +148,8 @@ type DragSession = {
   sourceNodeSize: number;
   startX: number;
   startY: number;
+  pointerOffsetX: number;
+  pointerOffsetY: number;
   dragging: boolean;
   preview: HTMLElement | null;
   dropLine: HTMLElement | null;
@@ -194,6 +196,47 @@ let activeHoverRegistration: DragHandleRegistration | null = null;
 const clamp = (value: number, min: number, max: number) =>
   Math.min(Math.max(value, min), max);
 
+export const dragPreviewTransform = ({
+  clientX,
+  clientY,
+  pointerOffsetX,
+  pointerOffsetY,
+}: {
+  clientX: number;
+  clientY: number;
+  pointerOffsetX: number;
+  pointerOffsetY: number;
+}) =>
+  `translate3d(${clientX - pointerOffsetX}px, ${clientY - pointerOffsetY}px, 0)`;
+
+const collapseAndBlurEditorAfterDrop = (
+  view: EditorView,
+  preferredPos: number,
+) => {
+  const pos = clamp(preferredPos, 0, view.state.doc.content.size);
+  const selection = TextSelection.near(view.state.doc.resolve(pos), 1);
+  if (!view.state.selection.eq(selection)) {
+    view.dispatch(view.state.tr.setSelection(selection));
+  }
+
+  const nativeSelection = window.getSelection();
+  const selectionBelongsToEditor = [
+    nativeSelection?.anchorNode,
+    nativeSelection?.focusNode,
+  ].some((node) => node && (node === view.dom || view.dom.contains(node)));
+  if (selectionBelongsToEditor) {
+    nativeSelection?.removeAllRanges();
+  }
+  const activeElement = document.activeElement;
+  if (
+    activeElement instanceof HTMLElement &&
+    (activeElement === view.dom || view.dom.contains(activeElement))
+  ) {
+    activeElement.blur();
+  }
+  view.dom.blur();
+};
+
 const editorArea = (registration: DragHandleRegistration) => {
   const rect = registration.view.dom.getBoundingClientRect();
   return rect.width * rect.height;
@@ -977,7 +1020,12 @@ export const DragHandle = Extension.create<DragHandleOptions>({
     ) => {
       if (!session.preview) return;
 
-      session.preview.style.transform = `translate3d(${clientX + 12}px, ${clientY + 10}px, 0)`;
+      session.preview.style.transform = dragPreviewTransform({
+        clientX,
+        clientY,
+        pointerOffsetX: session.pointerOffsetX,
+        pointerOffsetY: session.pointerOffsetY,
+      });
     };
 
     const updateDropLine = (
@@ -1174,6 +1222,7 @@ export const DragHandle = Extension.create<DragHandleOptions>({
         ) {
           const sourceNode = session.view.state.doc.nodeAt(sourceStart);
           if (sourceNode) {
+            let dropCommitted = false;
             const sourceRegistration = registrationForView(session.view);
             const transferData = sourceRegistration?.getDragTransferData?.({
               view: session.view,
@@ -1198,7 +1247,7 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                 false);
 
             if (handled) {
-              target.view.focus();
+              dropCommitted = true;
             } else if (target.view === session.view) {
               const insertPos =
                 dropPos > sourceStart ? dropPos - sourceNode.nodeSize : dropPos;
@@ -1206,10 +1255,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                 .delete(sourceStart, sourceEnd)
                 .insert(insertPos, sourceNode);
 
-              tr.setSelection(NodeSelection.create(tr.doc, insertPos));
-
               session.view.dispatch(tr.scrollIntoView());
-              session.view.focus();
+              dropCommitted = true;
             } else {
               try {
                 const targetNode = target.view.state.schema.nodeFromJSON(
@@ -1225,9 +1272,6 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                   dropPos,
                   targetNode,
                 );
-                insertTr.setSelection(
-                  NodeSelection.create(insertTr.doc, dropPos),
-                );
                 target.view.dispatch(insertTr.scrollIntoView());
 
                 const deleteTr = session.view.state.tr.delete(
@@ -1235,12 +1279,19 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                   sourceEnd,
                 );
                 session.view.dispatch(deleteTr);
-                target.view.focus();
+                dropCommitted = true;
               } catch {
                 // If the target schema cannot accept this node, leave the
                 // source document untouched.
               }
             }
+
+            if (dropCommitted) {
+              collapseAndBlurEditorAfterDrop(target.view, dropPos);
+              if (target.view !== session.view) {
+                collapseAndBlurEditorAfterDrop(session.view, sourceStart);
+              }
+            }
           }
         }
       } else if (commit && !session.dragging && event) {
@@ -1356,6 +1407,7 @@ export const DragHandle = Extension.create<DragHandleOptions>({
             if (!sourceNode) return;
 
             e.preventDefault();
+            const sourceRect = currentBlock.getBoundingClientRect();
             dragSession = {
               view: editorView,
               sourceBlock: currentBlock,
@@ -1363,6 +1415,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
               sourceNodeSize: sourceNode.nodeSize,
               startX: e.clientX,
               startY: e.clientY,
+              pointerOffsetX: e.clientX - sourceRect.left,
+              pointerOffsetY: e.clientY - sourceRect.top,
               dragging: false,
               preview: null,
               dropLine: null,