@agent-native/toolkit 0.10.2 → 0.10.5

package/src/design-system/default-adapter.tsx

@@ -332,7 +332,7 @@ const DefaultSurface: DesignSystemComponents["Surface"] = ({
   const elementProps = {
     ...props,
     className: cn(
-      "rounded-lg border bg-card text-card-foreground",
+      "rounded-lg bg-card text-card-foreground",
       elevation === "none" && "shadow-none",
       elevation === "low" && "shadow-sm",
       elevation === "medium" && "shadow-md",

package/src/design-system/design-system.spec.tsx

@@ -1,11 +1,17 @@
 // @vitest-environment happy-dom
 
-import { act, type ComponentProps } from "react";
+import { act, forwardRef, type ComponentProps } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { ToolkitProvider } from "../provider.js";
 import { Button } from "../ui/button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.js";
 import { ActionButton } from "./components.js";
 import { defaultDesignSystemComponents } from "./default-adapter.js";
 import { defineDesignSystem } from "./definition.js";
@@ -157,6 +163,98 @@ describe("design-system contract", () => {
     );
   });
 
+  it.each(["pointer", "Enter", "Space", "ArrowDown"])(
+    "preserves Radix menu trigger behavior through a legacy Button override with %s activation",
+    async (activation) => {
+      const onOpenChange = vi.fn();
+      let buttonRef: HTMLButtonElement | null = null;
+      const LegacyButton = forwardRef<
+        HTMLButtonElement,
+        ComponentProps<typeof Button>
+      >(
+        (
+          {
+            asChild: _asChild,
+            emphasis: _emphasis,
+            intent: _intent,
+            size: _size,
+            variant: _variant,
+            ...props
+          },
+          ref,
+        ) => <button {...props} ref={ref} data-adapter="legacy" />,
+      );
+
+      await act(async () => {
+        root.render(
+          <ToolkitProvider
+            components={{ Button: LegacyButton }}
+            designSystem={{}}
+          >
+            <DropdownMenu onOpenChange={onOpenChange}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  ref={(node) => {
+                    buttonRef = node;
+                  }}
+                >
+                  Open menu
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem>First item</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </ToolkitProvider>,
+        );
+      });
+
+      const trigger = container.querySelector<HTMLButtonElement>("button");
+      expect(trigger).not.toBeNull();
+      expect(buttonRef).toBe(trigger);
+      expect(trigger?.getAttribute("aria-haspopup")).toBe("menu");
+      expect(trigger?.getAttribute("aria-expanded")).toBe("false");
+      expect(trigger?.dataset.state).toBe("closed");
+
+      await act(async () => {
+        trigger?.focus();
+        if (activation === "pointer") {
+          trigger?.dispatchEvent(
+            new PointerEvent("pointerdown", {
+              bubbles: true,
+              button: 0,
+              pointerType: "mouse",
+            }),
+          );
+        } else {
+          const key = activation === "Space" ? " " : activation;
+          trigger?.dispatchEvent(
+            new KeyboardEvent("keydown", { bubbles: true, key }),
+          );
+        }
+        await Promise.resolve();
+      });
+
+      expect(onOpenChange).toHaveBeenCalledTimes(1);
+      expect(onOpenChange).toHaveBeenLastCalledWith(true);
+      expect(trigger?.getAttribute("aria-expanded")).toBe("true");
+      expect(trigger?.dataset.state).toBe("open");
+      expect(document.querySelector("[role=menu]")).not.toBeNull();
+
+      await act(async () => {
+        document.activeElement?.dispatchEvent(
+          new KeyboardEvent("keydown", { bubbles: true, key: "Escape" }),
+        );
+        await Promise.resolve();
+      });
+
+      expect(onOpenChange).toHaveBeenCalledTimes(2);
+      expect(onOpenChange).toHaveBeenLastCalledWith(false);
+      expect(trigger?.getAttribute("aria-expanded")).toBe("false");
+      expect(trigger?.dataset.state).toBe("closed");
+    },
+  );
+
   it("isolates a broken customer component and renders the default control", () => {
     vi.spyOn(console, "error").mockImplementation(() => {});
     const BrokenActionButton = () => {

package/src/editor/SharedRichEditor.spec.tsx

@@ -0,0 +1,82 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { SharedRichEditor } from "./SharedRichEditor.js";
+
+describe("SharedRichEditor block controls", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("mounts the shared Notion-style block grip by default", async () => {
+    await act(async () => {
+      root.render(
+        <SharedRichEditor
+          value="<p>First</p><p>Second</p>"
+          onChange={() => undefined}
+        />,
+      );
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+
+    const prose = container.querySelector<HTMLElement>(".an-rich-md-prose");
+    const firstBlock = prose?.firstElementChild;
+    for (const [element, rect] of [
+      [prose, { left: 0, top: 0, right: 640, bottom: 100 }],
+      [firstBlock, { left: 0, top: 0, right: 640, bottom: 24 }],
+    ] as const) {
+      if (!element) continue;
+      Object.defineProperty(element, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          ...rect,
+          x: rect.left,
+          y: rect.top,
+          width: rect.right - rect.left,
+          height: rect.bottom - rect.top,
+          toJSON: () => ({}),
+        }),
+      });
+    }
+    document.dispatchEvent(
+      new MouseEvent("mousemove", {
+        bubbles: true,
+        clientX: 8,
+        clientY: 8,
+      }),
+    );
+    expect(container.querySelector(".an-rich-md-wrapper")).not.toBeNull();
+    expect(container.querySelector(".drag-handle")).not.toBeNull();
+  });
+
+  it("allows hosts to opt out when they own block controls", async () => {
+    await act(async () => {
+      root.render(
+        <SharedRichEditor
+          value="First"
+          onChange={() => undefined}
+          dragHandle={false}
+        />,
+      );
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+
+    expect(container.querySelector(".drag-handle")).toBeNull();
+  });
+});

package/src/editor/SharedRichEditor.tsx

@@ -6,6 +6,7 @@ import type { Doc as YDoc } from "yjs";
 
 import { cn } from "../utils.js";
 import { BubbleToolbar, type BubbleToolbarItem } from "./BubbleToolbar.js";
+import { DragHandle } from "./DragHandle.js";
 import {
   createSharedEditorExtensions,
   type RichMarkdownDialect,
@@ -37,6 +38,8 @@ export interface SharedRichEditorProps {
   preset?: RichMarkdownEditorPreset;
   /** Toggle individual base extensions (tables/tasks/link/codeBlock/image). */
   features?: SharedEditorFeatures;
+  /** Show the Notion-style block grip and action menu. Defaults to `true`. */
+  dragHandle?: boolean;
   /**
    * Injectable image uploader for the shared image block. Used only when
    * `features.image` is on. Pass `uploadEditorImage` (the framework
@@ -141,6 +144,7 @@ export function SharedRichEditor({
   dialect = "gfm",
   preset = "plan",
   features,
+  dragHandle = true,
   onImageUpload = null,
   extraExtensions,
   placeholder = "Type '/' for commands...",
@@ -170,6 +174,23 @@ export function SharedRichEditor({
   onChangeRef.current = onChange;
   onBlurRef.current = onBlur;
 
+  const effectiveExtraExtensions = useMemo(() => {
+    const extras = extraExtensions ?? [];
+    if (
+      !dragHandle ||
+      extras.some((extension) => extension.name === "dragHandle")
+    ) {
+      return extras;
+    }
+
+    return [
+      DragHandle.configure({
+        wrapperSelector: ".an-rich-md-wrapper",
+      }),
+      ...extras,
+    ];
+  }, [dragHandle, extraExtensions]);
+
   const extensions = useMemo(
     () =>
       createSharedEditorExtensions({
@@ -177,7 +198,7 @@ export function SharedRichEditor({
         preset,
         placeholder,
         features,
-        extraExtensions,
+        extraExtensions: effectiveExtraExtensions,
         onImageUpload,
         collab: ydoc ? { ydoc, awareness, user } : null,
         disableHistory,
@@ -192,7 +213,7 @@ export function SharedRichEditor({
       placeholder,
       preset,
       features,
-      extraExtensions,
+      effectiveExtraExtensions,
       onImageUpload,
       ydoc,
       awareness,

package/src/editor/SlashCommandMenu.spec.ts

@@ -1,8 +1,13 @@
+// @vitest-environment happy-dom
+
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
 import { describe, expect, it } from "vitest";
 
 import {
   DEFAULT_SLASH_COMMANDS,
   filterSlashCommandItems,
+  focusEditorInInsertedBlock,
 } from "./SlashCommandMenu.js";
 
 describe("filterSlashCommandItems", () => {
@@ -31,3 +36,55 @@ describe("filterSlashCommandItems", () => {
     );
   });
 });
+
+describe("focusEditorInInsertedBlock", () => {
+  it.each([
+    ["Text", "paragraph", "paragraph"],
+    ["Heading 1", "heading", "heading"],
+    ["Bulleted list", "bulletList", "paragraph"],
+    ["Numbered list", "orderedList", "paragraph"],
+    ["Quote", "blockquote", "paragraph"],
+    ["Code block", "codeBlock", "codeBlock"],
+  ])(
+    "leaves the caret inside the %s block instead of after it",
+    (title, activeNode, parentNode) => {
+      const element = document.createElement("div");
+      document.body.appendChild(element);
+      const editor = new Editor({
+        element,
+        extensions: [StarterKit],
+        content: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "/code" }],
+            },
+          ],
+        },
+      });
+
+      try {
+        const slashRange = { from: 1, to: 6 };
+        editor.commands.setTextSelection(slashRange);
+        editor.chain().focus().deleteRange(slashRange).run();
+        const command = DEFAULT_SLASH_COMMANDS.find(
+          (item) => item.title === title,
+        );
+        if (!command) throw new Error(`Missing slash command: ${title}`);
+        command.action(editor);
+        focusEditorInInsertedBlock(editor, slashRange.from);
+
+        expect(editor.isActive(activeNode)).toBe(true);
+        expect(editor.state.selection.$from.parent.type.name).toBe(parentNode);
+        expect(editor.state.selection.from).toBeLessThanOrEqual(
+          editor.state.selection.$from.end(),
+        );
+        expect(editor.isFocused).toBe(true);
+      } finally {
+        editor.destroy();
+        element.remove();
+      }
+    },
+  );
+});

package/src/editor/SlashCommandMenu.tsx

@@ -1,3 +1,4 @@
+import { TextSelection } from "@tiptap/pm/state";
 import type { Editor } from "@tiptap/react";
 import {
   useCallback,
@@ -27,6 +28,66 @@ export interface SlashCommandItem {
   action: (editor: Editor) => void;
 }
 
+/**
+ * Put the caret inside the block a slash command just created or transformed.
+ *
+ * Tiptap commands usually preserve a text selection, but commands that replace
+ * the current paragraph (notably code blocks and horizontal rules) can leave a
+ * node selection or a caret at the following block. Resolving from the slash
+ * range keeps the behavior consistent for built-in and app-provided block
+ * commands: after selecting a block, typing starts in that block immediately.
+ */
+export function focusEditorInInsertedBlock(
+  editor: Editor,
+  anchorPosition?: number,
+): void {
+  if (editor.isDestroyed) return;
+
+  const { state } = editor;
+  const anchor = Math.max(
+    1,
+    Math.min(anchorPosition ?? state.selection.from, state.doc.content.size),
+  );
+  let containingTextblock: number | null = null;
+  let nextTextblock: number | null = null;
+  let previousTextblock: number | null = null;
+
+  state.doc.nodesBetween(0, state.doc.content.size, (node, pos) => {
+    if (!node.isTextblock) return;
+
+    const start = pos + 1;
+    const end = pos + node.nodeSize - 1;
+    if (anchor >= start && anchor <= end) {
+      containingTextblock ??= anchor;
+      return;
+    }
+    if (start > anchor) {
+      if (nextTextblock === null || start < nextTextblock) {
+        nextTextblock = start;
+      }
+      return;
+    }
+    if (previousTextblock === null || start > previousTextblock) {
+      previousTextblock = Math.min(anchor, end);
+    }
+  });
+
+  const target = containingTextblock ?? nextTextblock ?? previousTextblock;
+  if (target === null) {
+    editor.commands.focus();
+    return;
+  }
+
+  const transaction = state.tr.setSelection(
+    TextSelection.create(
+      state.doc,
+      Math.max(1, Math.min(target, state.doc.content.size)),
+    ),
+  );
+  editor.view.dispatch(transaction.scrollIntoView());
+  editor.view.focus();
+}
+
 export interface SlashCommandFeatureFlags {
   tables?: boolean;
   tasks?: boolean;
@@ -192,13 +253,18 @@ export function SlashCommandMenu({
     (command: SlashCommandItem) => {
       if (slashPosRef.current !== null) {
         const { from } = editor.state.selection;
+        const anchorPosition = slashPosRef.current;
         editor
           .chain()
           .focus()
-          .deleteRange({ from: slashPosRef.current, to: from })
+          .deleteRange({ from: anchorPosition, to: from })
           .run();
+        command.action(editor);
+        focusEditorInInsertedBlock(editor, anchorPosition);
+      } else {
+        command.action(editor);
+        focusEditorInInsertedBlock(editor);
       }
-      command.action(editor);
       close();
     },
     [close, editor],

package/src/editor/index.ts

@@ -26,6 +26,7 @@ export {
   DEFAULT_SLASH_COMMANDS,
   createImageSlashCommand,
   filterSlashCommandItems,
+  focusEditorInInsertedBlock,
   type SlashCommandItem,
   type SlashCommandMenuProps,
   type SlashCommandFeatureFlags,

package/src/editor.css

@@ -8,6 +8,81 @@
   cursor: default;
 }
 
+/* Shared Notion-style block controls. Apps can override the color tokens, but
+   every SharedRichEditor gets a usable grip/menu without app-local CSS. */
+.drag-handle {
+  position: absolute;
+  display: none;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: hsl(var(--muted-foreground) / 0.45);
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+  z-index: 10;
+}
+
+.drag-handle:hover,
+.drag-handle:focus-visible {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  outline: none;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.notion-editor-is-dragging,
+.notion-editor-is-dragging * {
+  cursor: grabbing !important;
+}
+
+.notion-block--dragging {
+  opacity: 0.35;
+  transition: opacity 0.12s ease;
+}
+
+.notion-drag-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  max-width: min(720px, calc(100vw - 48px));
+  overflow: hidden;
+  background: transparent !important;
+  box-shadow: none;
+  opacity: 0.55;
+  pointer-events: none;
+  will-change: transform;
+}
+
+.notion-drag-preview > * {
+  margin: 0 !important;
+  max-height: 180px;
+  overflow: hidden;
+}
+
+.notion-drag-preview,
+.notion-drag-preview * {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+.notion-drop-indicator {
+  position: absolute;
+  z-index: 60;
+  height: 3px;
+  border-radius: 999px;
+  background: hsl(var(--ring));
+  box-shadow: 0 0 0 1px hsl(var(--background));
+  pointer-events: none;
+  transform: translateY(-1px);
+}
+
 .an-rich-md-loading {
   min-height: 7rem;
 }

package/src/ui/button.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 
 import {
   LegacyButtonRenderContext,
-  useDesignSystemComponent,
+  useDesignSystem,
 } from "../design-system/context.js";
 import { DesignSystemErrorBoundary } from "../design-system/error-boundary.js";
 import type {
@@ -22,8 +22,7 @@ const buttonVariants = cva(
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        outline: "bg-accent text-accent-foreground hover:bg-accent/80",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -83,7 +82,8 @@ const ButtonOverrideRenderContext = React.createContext(false);
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant, size, asChild = false, intent, emphasis, ...props }, ref) => {
-    const DesignSystemActionButton = useDesignSystemComponent("ActionButton");
+    const DesignSystemActionButton =
+      useDesignSystem()?.components?.ActionButton;
     const Override = useToolkitComponent("Button");
     const isRenderingOverride = React.useContext(ButtonOverrideRenderContext);
     const isRenderingLegacyButton = React.useContext(LegacyButtonRenderContext);

package/src/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg bg-card text-card-foreground shadow-sm",
       className,
     )}
     {...props}

package/src/ui/table.tsx

@@ -20,7 +20,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={className} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -28,11 +28,7 @@ const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
+  <tbody ref={ref} className={className} {...props} />
 ));
 TableBody.displayName = "TableBody";
 
@@ -42,10 +38,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className,
-    )}
+    className={cn("bg-muted/50 font-medium", className)}
     {...props}
   />
 ));
@@ -58,7 +51,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
       className,
     )}
     {...props}