@agent-native/toolkit 0.10.1 → 0.10.4

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/styles.css

@@ -20,66 +20,213 @@
  */
 @source "./**/*.{js,ts,tsx}";
 
+@property --agent-realtime-voice-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+
 .agent-realtime-voice-glow {
-  --agent-realtime-voice-edge-opacity: 0.52;
-  --agent-realtime-voice-halo-opacity: 0.28;
+  --agent-realtime-voice-angle: 0deg;
+  --agent-realtime-voice-proximity: 72;
+  --agent-realtime-voice-edge-sensitivity: 30;
+  --agent-realtime-voice-color-sensitivity: 50;
+  --agent-realtime-voice-cone-spread: 25;
+  --agent-realtime-voice-fill-opacity: 0.5;
+  --agent-realtime-voice-card-bg: hsl(var(--background));
+  --agent-realtime-voice-glow-color: 40 80% 80%;
+  --agent-realtime-voice-glow-padding: 18px;
+  --agent-realtime-voice-gradient-one: radial-gradient(
+    at 80% 55%,
+    #c084fc 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-two: radial-gradient(
+    at 69% 34%,
+    #f472b6 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-three: radial-gradient(
+    at 8% 6%,
+    #38bdf8 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-four: radial-gradient(
+    at 41% 38%,
+    #c084fc 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-five: radial-gradient(
+    at 86% 85%,
+    #f472b6 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-six: radial-gradient(
+    at 82% 18%,
+    #38bdf8 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-seven: radial-gradient(
+    at 51% 4%,
+    #f472b6 0,
+    transparent 50%
+  );
   position: absolute;
   z-index: 0;
-  inset: -4px;
+  inset: -1px;
   border-radius: inherit;
+  isolation: isolate;
   pointer-events: none;
-  transform: rotate(0turn);
-  will-change: transform;
+  transform: translate3d(0, 0, 0.01px);
 }
 
 .agent-realtime-voice-working {
-  --agent-realtime-voice-edge-opacity: 0.92;
-  --agent-realtime-voice-halo-opacity: 0.58;
+  --agent-realtime-voice-proximity: 96;
 }
 
 .agent-realtime-voice-glow::before,
 .agent-realtime-voice-glow::after {
   position: absolute;
   inset: 0;
+  z-index: 0;
   border-radius: inherit;
   pointer-events: none;
   content: "";
-  background: conic-gradient(
-    from -18deg,
-    transparent 0deg 228deg,
-    oklch(0.65 0.2 294 / 0.18) 244deg,
-    oklch(0.7 0.2 265 / 0.7) 274deg,
-    oklch(0.79 0.16 235 / 0.96) 306deg,
-    oklch(0.96 0.035 210) 326deg,
-    oklch(0.88 0.11 202 / 0.72) 340deg,
-    transparent 360deg
-  );
-  opacity: var(--agent-realtime-voice-edge-opacity);
-  padding: 1.5px;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  transition: opacity 220ms ease-out;
+  transition: opacity 250ms ease-out;
 }
 
 .agent-realtime-voice-glow::before {
-  inset: -1px;
-  opacity: var(--agent-realtime-voice-halo-opacity);
-  padding: 2px;
-  filter: blur(1px) drop-shadow(0 0 2px oklch(0.9 0.07 215 / 0.95))
-    drop-shadow(0 0 6px oklch(0.78 0.15 236 / 0.82))
-    drop-shadow(0 0 14px oklch(0.67 0.2 258 / 0.48))
-    drop-shadow(0 0 28px oklch(0.62 0.18 276 / 0.26));
+  border: 1px solid transparent;
+  background:
+    linear-gradient(
+        var(--agent-realtime-voice-card-bg),
+        var(--agent-realtime-voice-card-bg)
+      )
+      padding-box,
+    linear-gradient(transparent 0 100%) border-box,
+    var(--agent-realtime-voice-gradient-one) border-box,
+    var(--agent-realtime-voice-gradient-two) border-box,
+    var(--agent-realtime-voice-gradient-three) border-box,
+    var(--agent-realtime-voice-gradient-four) border-box,
+    var(--agent-realtime-voice-gradient-five) border-box,
+    var(--agent-realtime-voice-gradient-six) border-box,
+    var(--agent-realtime-voice-gradient-seven) border-box,
+    linear-gradient(#c084fc 0 100%) border-box;
+  opacity: calc(
+    (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-color-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-color-sensitivity))
+  );
+  mask-image: conic-gradient(
+    from var(--agent-realtime-voice-angle) at center,
+    #000 calc(var(--agent-realtime-voice-cone-spread) * 1%),
+    rgb(0 0 0 / 75%) calc((var(--agent-realtime-voice-cone-spread) + 4) * 1%),
+    rgb(0 0 0 / 45%) calc((var(--agent-realtime-voice-cone-spread) + 8) * 1%),
+    rgb(0 0 0 / 18%) calc((var(--agent-realtime-voice-cone-spread) + 12) * 1%),
+    transparent calc((var(--agent-realtime-voice-cone-spread) + 15) * 1%),
+    transparent calc((100 - var(--agent-realtime-voice-cone-spread) - 15) * 1%),
+    rgb(0 0 0 / 18%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 12) * 1%),
+    rgb(0 0 0 / 45%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 8) * 1%),
+    rgb(0 0 0 / 75%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 4) * 1%),
+    #000 calc((100 - var(--agent-realtime-voice-cone-spread)) * 1%)
+  );
+}
+
+.agent-realtime-voice-glow::after {
+  border: 1px solid transparent;
+  background:
+    var(--agent-realtime-voice-gradient-one) padding-box,
+    var(--agent-realtime-voice-gradient-two) padding-box,
+    var(--agent-realtime-voice-gradient-three) padding-box,
+    var(--agent-realtime-voice-gradient-four) padding-box,
+    var(--agent-realtime-voice-gradient-five) padding-box,
+    var(--agent-realtime-voice-gradient-six) padding-box,
+    var(--agent-realtime-voice-gradient-seven) padding-box,
+    linear-gradient(#c084fc 0 100%) padding-box;
+  mask-image:
+    linear-gradient(to bottom, #000, #000),
+    radial-gradient(ellipse at 50% 50%, #000 40%, transparent 65%),
+    radial-gradient(ellipse at 66% 66%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 33%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 66% 33%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 66%, #000 5%, transparent 40%),
+    conic-gradient(
+      from var(--agent-realtime-voice-angle) at center,
+      transparent 5%,
+      #000 15%,
+      #000 85%,
+      transparent 95%
+    );
+  mask-composite: subtract, add, add, add, add, add;
+  opacity: calc(
+    var(--agent-realtime-voice-fill-opacity) *
+      (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-color-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-color-sensitivity))
+  );
+  mix-blend-mode: soft-light;
+}
+
+.agent-realtime-voice-edge-light {
+  position: absolute;
+  z-index: 1;
+  inset: calc(var(--agent-realtime-voice-glow-padding) * -1);
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: calc(
+    (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-edge-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-edge-sensitivity))
+  );
+  mask-image: conic-gradient(
+    from var(--agent-realtime-voice-angle) at center,
+    #000 2.5%,
+    rgb(0 0 0 / 85%) 4%,
+    rgb(0 0 0 / 55%) 7%,
+    rgb(0 0 0 / 25%) 11%,
+    transparent 15%,
+    transparent 85%,
+    rgb(0 0 0 / 25%) 89%,
+    rgb(0 0 0 / 55%) 93%,
+    rgb(0 0 0 / 85%) 96%,
+    #000 97.5%
+  );
   mix-blend-mode: plus-lighter;
+  transition: opacity 250ms ease-out;
+}
+
+.agent-realtime-voice-edge-light::before {
+  position: absolute;
+  inset: var(--agent-realtime-voice-glow-padding);
+  border-radius: inherit;
+  content: "";
+  box-shadow:
+    inset 0 0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 100%),
+    inset 0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 60%),
+    inset 0 0 3px hsl(var(--agent-realtime-voice-glow-color) / 50%),
+    inset 0 0 6px hsl(var(--agent-realtime-voice-glow-color) / 40%),
+    inset 0 0 15px hsl(var(--agent-realtime-voice-glow-color) / 30%),
+    inset 0 0 25px 2px hsl(var(--agent-realtime-voice-glow-color) / 20%),
+    inset 0 0 50px 2px hsl(var(--agent-realtime-voice-glow-color) / 10%),
+    0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 60%),
+    0 0 3px hsl(var(--agent-realtime-voice-glow-color) / 50%),
+    0 0 6px hsl(var(--agent-realtime-voice-glow-color) / 40%),
+    0 0 15px hsl(var(--agent-realtime-voice-glow-color) / 30%),
+    0 0 25px 2px hsl(var(--agent-realtime-voice-glow-color) / 20%),
+    0 0 50px 2px hsl(var(--agent-realtime-voice-glow-color) / 10%);
 }
 
 @media (prefers-reduced-motion: reduce) {
   .agent-realtime-voice-glow {
-    transform: rotate(35deg);
+    --agent-realtime-voice-angle: 35deg;
   }
 }

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 {
@@ -83,7 +83,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);