@agent-native/toolkit 0.10.1 → 0.10.4

package/dist/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/dist/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AAInC,QAAA,MAAM,cAAc;;;8EA2BnB,CAAC;AAEF,MAAM,WAAW,WACf,SACE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC;AAED,QAAA,MAAM,UAAU,uFAsBf,CAAC;AAKF,QAAA,MAAM,MAAM,uFAgFX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AAInC,QAAA,MAAM,cAAc;;;8EA2BnB,CAAC;AAEF,MAAM,WAAW,WACf,SACE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC;AAED,QAAA,MAAM,UAAU,uFAsBf,CAAC;AAKF,QAAA,MAAM,MAAM,uFAiFX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/ui/button.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-import { LegacyButtonRenderContext, useDesignSystemComponent, } from "../design-system/context.js";
+import { LegacyButtonRenderContext, useDesignSystem, } from "../design-system/context.js";
 import { DesignSystemErrorBoundary } from "../design-system/error-boundary.js";
 import { useToolkitComponent } from "../provider.js";
 import { cn } from "../utils.js";
@@ -35,7 +35,7 @@ const ButtonBase = React.forwardRef(({ className, variant, size, asChild = false
 ButtonBase.displayName = "ButtonBase";
 const ButtonOverrideRenderContext = React.createContext(false);
 const Button = React.forwardRef(({ 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/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.10.1",
+  "version": "0.10.4",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/src/chat-history.css

@@ -211,7 +211,7 @@
   white-space: nowrap;
   font-size: 12px;
   font-weight: 500;
-  color: hsl(var(--foreground));
+  color: hsl(var(--muted-foreground));
 }
 
 .an-chat-history-row--active .an-chat-history-row__title {
@@ -227,7 +227,7 @@
 .an-chat-history--rail
   .an-chat-history-row--pinned:not(.an-chat-history-row--active)
   .an-chat-history-row__title {
-  color: hsl(var(--foreground));
+  color: hsl(var(--muted-foreground));
 }
 
 .an-chat-history-row__timestamp {

package/src/composer/PromptComposer.spec.ts

@@ -2,18 +2,7 @@
 
 import { describe, expect, it } from "vitest";
 
-import {
-  buildPromptComposerSubmission,
-  canSubmitWithAgentEngineState,
-} from "./PromptComposer.js";
-
-describe("canSubmitWithAgentEngineState", () => {
-  it("allows configured engines and blocks unresolved states", () => {
-    expect(canSubmitWithAgentEngineState("configured")).toBe(true);
-    expect(canSubmitWithAgentEngineState("missing")).toBe(false);
-    expect(canSubmitWithAgentEngineState("unavailable")).toBe(false);
-  });
-});
+import { buildPromptComposerSubmission } from "./PromptComposer.js";
 
 describe("buildPromptComposerSubmission", () => {
   it("passes images through files only — never inlines base64 into prompt text", async () => {

package/src/composer/PromptComposer.tsx

@@ -59,11 +59,6 @@ import type {
 } from "./types.js";
 
 const MAX_INLINE_TEXT_FILE_CHARS = 60_000;
-const SUBMIT_ENGINE_STATUS_TIMEOUT_MS = 1000;
-
-export function canSubmitWithAgentEngineState(state: string): boolean {
-  return state === "configured";
-}
 
 /**
  * Files the user attached via the "+" button in PromptComposer. The host owns
@@ -536,31 +531,6 @@ function PromptComposerInner({
       window.dispatchEvent(new Event("agent-engine:configured-changed"));
     }
   }, []);
-  const ensureAgentEngineReadyForSubmit = useCallback(async () => {
-    if (!resolvedModelStatusChecksEnabled) return true;
-    const state =
-      agentEngineConfigured.state === "missing"
-        ? "missing"
-        : await modelsAdapter.fetchAgentEngineConfiguredState!(
-            resolvedModelStatusChecksEnabled,
-            {
-              timeoutMs: SUBMIT_ENGINE_STATUS_TIMEOUT_MS,
-            },
-          );
-    if (state === "missing") {
-      bounceMissingKeySetup();
-      return false;
-    }
-    if (typeof window !== "undefined") {
-      window.dispatchEvent(new Event("agent-engine:configured-changed"));
-    }
-    return canSubmitWithAgentEngineState(state);
-  }, [
-    agentEngineConfigured.state,
-    bounceMissingKeySetup,
-    modelsAdapter,
-    resolvedModelStatusChecksEnabled,
-  ]);
   const retryAgentEngineStatus = useCallback(() => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new Event("agent-engine:configured-changed"));
@@ -657,7 +627,6 @@ function PromptComposerInner({
           initialText={initialText}
           initialTextKey={initialTextKey}
           onSubmit={handleSubmit}
-          onBeforeSubmit={ensureAgentEngineReadyForSubmit}
           clearOnSubmit={!preserveDraftOnSubmit}
           plusMenuMode={
             plusMenuMode ?? (attachmentsEnabled ? "upload-only" : "hidden")

package/src/composer/RealtimeVoiceMode.spec.tsx

@@ -807,6 +807,9 @@ describe("RealtimeVoiceMode", () => {
       expect(
         document.querySelector(".agent-realtime-voice-glow"),
       ).not.toBeNull();
+      expect(
+        document.querySelector(".agent-realtime-voice-edge-light"),
+      ).not.toBeNull();
       expect(
         document.querySelector(".agent-realtime-voice-working"),
       ).toBeNull();
@@ -843,6 +846,17 @@ describe("RealtimeVoiceMode", () => {
     const glow = document.querySelector('[data-realtime-voice-glow="true"]');
 
     expect(animate).toHaveBeenCalledTimes(1);
+    expect(animate).toHaveBeenCalledWith(
+      [
+        { "--agent-realtime-voice-angle": "0deg" },
+        { "--agent-realtime-voice-angle": "360deg" },
+      ],
+      {
+        duration: 12_000,
+        easing: "linear",
+        iterations: Number.POSITIVE_INFINITY,
+      },
+    );
     expect(updateGlowPlaybackRate).toHaveBeenLastCalledWith(1);
 
     render(

package/src/composer/RealtimeVoiceMode.tsx

@@ -775,7 +775,10 @@ export function RealtimeVoiceModeDock({
     }
 
     const animation = glowRef.current.animate(
-      [{ transform: "rotate(0turn)" }, { transform: "rotate(1turn)" }],
+      [
+        { "--agent-realtime-voice-angle": "0deg" },
+        { "--agent-realtime-voice-angle": "360deg" },
+      ] as Keyframe[],
       {
         duration: 12_000,
         easing: "linear",
@@ -989,7 +992,9 @@ export function RealtimeVoiceModeDock({
                     "agent-realtime-voice-glow",
                     workingGlowActive && "agent-realtime-voice-working",
                   )}
-                />
+                >
+                  <span className="agent-realtime-voice-edge-light" />
+                </span>
               ) : null}
               <span className="relative z-10 flex items-center justify-center">
                 {state === "connecting" ? (

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();
+  });
+});